Three.js光线投射不适用于移动对象

这是一个三个.js和typescript的项目。我正试图通过对球体进行光线投射来为其着色,但光线投射似乎不知道对象何时移动,并假设它仍在原始位置,并且在移动时不会碰到对象。这是我的代码:

import * as THREE from "three";

// boilerplate
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const scene = new THREE.Scene();

// sphere object
const geometry = new THREE.SphereGeometry();
const sphereMaterial = new THREE.MeshLambertMaterial({
  color: "0xFFFFFF",
});
const sphere = new THREE.Mesh(geometry, sphereMaterial);
scene.add(sphere);

// light
const ambientLight = new THREE.AmbientLight();
scene.add(ambientLight);

// raycasting
const mousePosition = new THREE.Vector2();
const raycaster = new THREE.Raycaster();
window.addEventListener("mousemove", (event) => {
  mousePosition.x = (event.clientX / window.innerWidth) * 2 - 1; // from the original values (event.clientX/Y) we create normalized values via these formulas
  mousePosition.y = (event.clientY / window.innerHeight) * 2 - 1;

  raycaster.setFromCamera(mousePosition, camera);
  const intersects = raycaster.intersectObjects(scene.children);
  console.log(intersects);

  for (let i = 0; i < intersects.length; i++) {
    if (intersects[i].object === sphere) {
      (intersects[i].object as any).material.color.set("red");
    }
  }
});

// animations
let step = 0;

const animate = (time: number) => {
  step += 0.01;
  sphere.position.y = 4 * Math.abs(Math.sin(step + 1));

  renderer.render(scene, camera);
};

// camera
const camera = new THREE.PerspectiveCamera(
  60,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera.position.set(5, 5, 10);
camera.lookAt(new THREE.Vector3(0, 0, 0));

renderer.setAnimationLoop(animate);

我甚至不确定光线投射是否应该用于移动对象,那么如果不是,在这种情况下,有什么好的替代方法可以代替光线投射呢?