/* A conversation with chatGPT resulted in this, which supposedly
allows toggling between (roughly) the classic phong model and the
modern physically based rendering. I haven't tested it yet, but it may
be useful. */

<script type="importmap">
{
  "imports": {
    "three": "https://cdn.jsdelivr.net/npm/three@0.179/build/three.module.js",
    "lil-gui": "https://cdn.jsdelivr.net/npm/lil-gui@0.20/+esm"
  }
}
</script>
<script type="module">
import * as THREE from 'three';
import GUI from 'lil-gui';

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(innerWidth, innerHeight);
document.body.style.margin = 0;
document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x202025);
const camera = new THREE.PerspectiveCamera(50, innerWidth/innerHeight, 0.1, 100);
camera.position.set(5,3,8); camera.lookAt(0,0,0);

// Geometry & material (Phong to mimic “classic” feel)
const mat = new THREE.MeshPhongMaterial({ color: 0x88ccff, shininess: 60 });
scene.add(new THREE.Mesh(new THREE.BoxGeometry(1,2,3), mat));
const s = new THREE.Mesh(new THREE.SphereGeometry(1,32,16), mat); s.position.x = -2.5; scene.add(s);
const c = new THREE.Mesh(new THREE.ConeGeometry(1,3,32), mat);   c.position.x =  2.5; scene.add(c);

scene.add(new THREE.AmbientLight(0xffffff, 0.2));

// Point light
const light = new THREE.PointLight(0xffffff, 100, 0, 2); // intensity in cd
light.position.set(2,2,2);
scene.add(light);
scene.add(new THREE.PointLightHelper(light, 0.2));

const gui = new GUI();
const p = { mode: 'physical', intensity: 100, distance: 0, decay: 2 };
gui.add(p, 'mode', ['physical','classic-ish']).onChange(() => {
  if (p.mode === 'physical') { light.decay = 2; light.distance = 0; }
  else                       { light.decay = 0; /* keep distance 0 for no falloff */ }
});
gui.add(p, 'intensity', 0, 5000, 1).onChange(v => light.intensity = v);
gui.add(p, 'distance', 0, 20, 0.1).onChange(v => light.distance = v);
gui.add(p, 'decay', 0, 4, 0.1).onChange(v => light.decay = v);

function tick(){ renderer.render(scene, camera); requestAnimationFrame(tick); } tick();

addEventListener('resize', () => {
  camera.aspect = innerWidth/innerHeight; camera.updateProjectionMatrix();
  renderer.setSize(innerWidth, innerHeight);
});
</script>