Working on a project that combines three.js and typescript, I encountered an issue while attempting to color a sphere by raycasting to it. The problem arises when the object moves - the raycast doesn't seem to acknowledge the new position of the object and misses hitting it altogether. Below is the snippet of my code:
import * as THREE from "three";
// Initialization
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const scene = new THREE.Scene();
// Creating a sphere
const geometry = new THREE.SphereGeometry();
const sphereMaterial = new THREE.MeshLambertMaterial({
color: "0xFFFFFF",
});
const sphere = new THREE.Mesh(geometry, sphereMaterial);
scene.add(sphere);
// Light setup
const ambientLight = new THREE.AmbientLight();
scene.add(ambientLight);
// Raycasting implementation
const mousePosition = new THREE.Vector2();
const raycaster = new THREE.Raycaster();
window.addEventListener("mousemove", (event) => {
mousePosition.x = (event.clientX / window.innerWidth) * 2 - 1;
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");
}
}
});
// Animation loop
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 setup
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);
I am unsure whether raycasting is suitable for detecting moving objects in this scenario. If not, what alternative method would be recommended?