Three.js 光线投射不适用于移动物体

Question

这是一个三.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);

我什至不确定光线投射是否适用于移动物体，所以如果不是，对于这种情况，什么是光线投射的良好替代方案？

Answer 1

您应该能够通过以下方式计算鼠标坐标来解决您的问题：

const rect = renderer.domElement.getBoundingClientRect();
mousePosition.x = ( ( event.clientX - rect.left ) / ( rect.right - rect.left ) ) * 2 - 1;
mousePosition.y = - ( ( event.clientY - rect.top ) / ( rect.bottom - rect.top) ) * 2 + 1;

实例：https://jsfiddle.net/9nhftaud/1/