Raycasting

import * as THREE from 'three';
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
document.body.appendChild(renderer.domElement);
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0a0a14);
const camera = new THREE.PerspectiveCamera(45, 1, 0.1, 100);
camera.position.set(0, 3.4, 4.6);
camera.lookAt(0, 0, 0);
scene.add(new THREE.AmbientLight(0x556080, 1.4));
const dLight = new THREE.DirectionalLight(0xffffff, 1.0);
dLight.position.set(3, 5, 2);
scene.add(dLight);

const GRID = 6;
const boxes = [];
const baseColor = new THREE.Color(0x4d5cff);
const hoverColor = new THREE.Color(0xffce4d);
for (let x = 0; x < GRID; x++) {
  for (let z = 0; z < GRID; z++) {
    const mat = new THREE.MeshStandardMaterial({ color: baseColor.clone(), roughness: 0.5 });
    const box = new THREE.Mesh(new THREE.BoxGeometry(0.6, 0.6, 0.6), mat);
    box.position.set((x - (GRID - 1) / 2) * 0.85, 0, (z - (GRID - 1) / 2) * 0.85);
    scene.add(box);
    boxes.push(box);
  }
}

const raycaster = new THREE.Raycaster();
const pointer = new THREE.Vector2();
let userControl = false;
addEventListener('pointermove', (e) => {
  userControl = true;
  pointer.x = (e.clientX / innerWidth) * 2 - 1;
  pointer.y = -(e.clientY / innerHeight) * 2 + 1;
});

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

let hovered = null;
renderer.setAnimationLoop((t) => {
  if (!userControl) {
    const time = t * 0.00055;
    pointer.x = Math.sin(time * 1.3) * 0.75;
    pointer.y = Math.sin(time * 0.9) * 0.55;
  }
  raycaster.setFromCamera(pointer, camera);
  const hits = raycaster.intersectObjects(boxes);
  const hit = hits.length ? hits[0].object : null;
  if (hit !== hovered) {
    if (hovered) { hovered.material.color.copy(baseColor); hovered.scale.setScalar(1); }
    if (hit) { hit.material.color.copy(hoverColor); hit.scale.setScalar(1.25); }
    hovered = hit;
  }
  renderer.render(scene, camera);
});