interactive.js

// Interactive 3-D scene powered by Three.js
// This file mirrors the sphere layout from the original CPU ray-tracer
// and adds full mouse / touch interaction via OrbitControls.
/* global THREE */

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import Stats from 'three/examples/jsm/libs/stats.module.js';
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass.js';

(function () {
  // --- Renderer ------------------------------------------------------------
  const renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.outputColorSpace = THREE.SRGBColorSpace;
  renderer.useLegacyLights = false;
  renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = THREE.PCFSoftShadowMap;
  renderer.toneMapping = THREE.ACESFilmicToneMapping;
  renderer.toneMappingExposure = 1.2;
  document.body.appendChild(renderer.domElement);

  // We'll build the post-processing composer after scene & camera are available.

  // Remove loading indicator once canvas is attached
  const loadingElem = document.getElementById('loading');
  if (loadingElem) loadingElem.remove();

  // --- Scene & Camera ------------------------------------------------------
  const scene = new THREE.Scene();
  scene.background = new THREE.Color(0x0d0d15);
  scene.fog = new THREE.Fog(0x0d0d15, 5, 20);

  const camera = new THREE.PerspectiveCamera(
    45,
    window.innerWidth / window.innerHeight,
    0.1,
    100
  );
  camera.position.set(0, 0, 5);

  // Now that scene & camera exist, build post-processing composer
  const composer = new EffectComposer(renderer);
  composer.addPass(new RenderPass(scene, camera));
  const bloomPass = new UnrealBloomPass(
    new THREE.Vector2(window.innerWidth, window.innerHeight),
    1.5,   // strength
    0.4,   // radius
    0.85   // threshold
  );
  composer.addPass(bloomPass);

  // Orbit / trackball style controls
  const controls = new OrbitControls(camera, renderer.domElement);
  controls.enableDamping = true;
  controls.dampingFactor = 0.05;
  controls.target.set(0, 0, -1.2); // Look toward center of sphere cluster

  // --- Lighting ------------------------------------------------------------
  scene.add(new THREE.AmbientLight(0x101020, 0.4));

  // Global lighting – soft sky/ground hemisphere plus distant key light
  const hemiLight = new THREE.HemisphereLight(0x3399ff, 0xff0066, 0.3);
  scene.add(hemiLight);

  const dirLight = new THREE.DirectionalLight(0xffffff, 1.2);
  dirLight.position.set(-5, 10, 5);
  dirLight.castShadow = true;
  dirLight.shadow.mapSize.set(2048, 2048);
  dirLight.shadow.bias = -0.0005;
  scene.add(dirLight);

  const light1 = new THREE.PointLight(0xff66aa, 3, 0, 2);
  light1.position.set(-3, -0.5, 1);
  light1.castShadow = true;
  scene.add(light1);

  const light2 = new THREE.PointLight(0x66ccff, 3, 0, 2);
  light2.position.set(3, 2, 1);
  light2.castShadow = true;
  scene.add(light2);

  // Additional neon lights for atmosphere
  const neonBack = new THREE.PointLight(0xffff00, 2, 0, 2);
  neonBack.position.set(0, 4, -4);
  scene.add(neonBack);

  // Helper visuals (can be commented out later)
  // scene.add(new THREE.PointLightHelper(light1, 0.1));
  // scene.add(new THREE.PointLightHelper(light2, 0.1));

  // --- Geometry -----------------------------------------------------------
  function addSphere({ position, radius, color, metalness = 0, roughness = 0.4 }) {
    const geom = new THREE.SphereGeometry(radius, 64, 64);
    const mat = new THREE.MeshStandardMaterial({ color, metalness, roughness });
    const mesh = new THREE.Mesh(geom, mat);
    mesh.position.set(position.x, position.y, position.z);
    scene.add(mesh);
    return mesh;
  }

  // Mapping original material colors to hex -----------------------------------------------------------------------
  const spheres = [
    {
      position: { x: -1.1, y: 0.6, z: -1 },
      radius: 0.2,
      color: 0x8080e5 // bluish
    },
    {
      position: { x: 0.2, y: -0.1, z: -1 },
      radius: 0.5,
      color: 0xe58888 // reddish
    },
    {
      position: { x: 1.2, y: -0.5, z: -1.75 },
      radius: 0.4,
      color: 0x33aa33 // greenish
    }
  ];

  const sphereMeshes = spheres.map(addSphere);
  sphereMeshes.forEach(m => {
    m.castShadow = true;
    m.receiveShadow = true;
    m.material.metalness = 1;
    m.material.roughness = 0.2;
    m.material.emissive = m.material.color.clone();
    m.material.emissiveIntensity = 1.5;
  });

  // Add a central cube so the scene has a distinct reference object
  const cubeSize = 0.5;
  const cubeGeom = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
  const cubeMat = new THREE.MeshStandardMaterial({ color: 0xffff00, metalness: 0.1, roughness: 0.5 });
  const cube = new THREE.Mesh(cubeGeom, cubeMat);
  cube.castShadow = true;
  cube.receiveShadow = true;
  cube.material.metalness = 1;
  cube.material.roughness = 0.1;
  cube.material.emissive = new THREE.Color(0xffff00);
  cube.material.emissiveIntensity = 2.0;
  scene.add(cube);

  // Axes helper (RGB = X,Y,Z)
  const axesHelper = new THREE.AxesHelper(1.5);
  scene.add(axesHelper);

  // Ground plane & grid helper
  const groundGeom = new THREE.PlaneGeometry(20, 20);
  const groundMat = new THREE.MeshStandardMaterial({ color: 0x111111, roughness: 0.9, metalness: 0.3 });
  const ground = new THREE.Mesh(groundGeom, groundMat);
  ground.rotation.x = -Math.PI / 2;
  ground.position.y = -1;
  ground.receiveShadow = true;
  scene.add(ground);

  const grid = new THREE.GridHelper(20, 40, 0x00ffff, 0x550055);
  grid.position.y = -1 + 0.001; // slight offset to avoid z-fight
  scene.add(grid);

  // Performance stats overlay
  const stats = new Stats();
  document.body.appendChild(stats.dom);

  // --- Height-map conversion (2-D image → 3-D mesh) -----------------------
  function createHeightMapMesh(img, {
    sizeX = 8,
    sizeZ = 8,
    heightScale = 3,
    material = null
  } = {}) {
    const w = img.naturalWidth;
    const h = img.naturalHeight;

    // Draw image to temp canvas to read pixel data
    const canvas = document.createElement('canvas');
    canvas.width = w;
    canvas.height = h;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);
    const pixels = ctx.getImageData(0, 0, w, h).data;

    // Each pixel -> vertex elevation
    const geometry = new THREE.PlaneGeometry(sizeX, sizeZ, w - 1, h - 1);
    const pos = geometry.attributes.position;
    for (let i = 0; i < pos.count; i++) {
      const x = i % w;
      const y = Math.floor(i / w);
      const idx = (y * w + x) * 4;
      const lum = pixels[idx]; // red channel (image should be grayscale)
      const heightVal = (lum / 255) * heightScale;
      pos.setZ(i, heightVal);
    }
    geometry.computeVertexNormals();

    const mat = material || new THREE.MeshStandardMaterial({
      color: 0x888888,
      roughness: 0.8,
      metalness: 0.0,
      side: THREE.DoubleSide
    });

    const mesh = new THREE.Mesh(geometry, mat);
    mesh.rotation.x = -Math.PI / 2; // make it horizontal
    mesh.castShadow = false;
    mesh.receiveShadow = true;
    return mesh;
  }

  // Example usage with an external height-map image (cross-origin safe)
  const heightMapURL =
    'https://threejsfundamentals.org/threejs/resources/images/heightmap-96x64.png';

  const img = new Image();
  img.crossOrigin = 'anonymous';
  img.src = heightMapURL;
  img.onload = () => {
    const hmMesh = createHeightMapMesh(img, { sizeX: 8, sizeZ: 8, heightScale: 3 });
    hmMesh.position.y = -1; // sit on ground
    scene.add(hmMesh);

    // Load and apply a texture atlas to the terrain
    const textureURL = 'https://threejsfundamentals.org/threejs/resources/images/wall.jpg';
    const loader = new THREE.TextureLoader();
    loader.setCrossOrigin('anonymous');
    loader.load(textureURL, texture => {
      texture.encoding = THREE.sRGBEncoding;
      texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
      texture.repeat.set(4, 4); // tile the texture
      hmMesh.material.map = texture;
      hmMesh.material.needsUpdate = true;
    }, undefined, err => {
      console.error('Error loading texture', err);
    });
  };

  // --- Handle resize -------------------------------------------------------
  window.addEventListener('resize', onWindowResize, false);
  function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
    composer.setSize(window.innerWidth, window.innerHeight);
  }

  // --- Render loop ---------------------------------------------------------
  function animate() {
    requestAnimationFrame(animate);
    controls.update();
    stats.update();
    composer.render();
  }

  animate();

  // Expose for console debugging
  window.scene = scene;
  window.camera = camera;
  window.controls = controls;
})();