Dynamic Raycasting in React Three.js Associating Raycaster with Dynamic Objects in React Three Fiber

[@paradise_hope]

import React, { useRef, useState, useEffect } from "react";
import { Canvas, useFrame } from "@react-three/fiber";
import { OrbitControls, Line } from "@react-three/drei";
import * as THREE from "three";
const Sphere = ({ position, raycaster }) => {
const meshRef = useRef();
useFrame(() => {
if (meshRef.current) {
// Reset color to red
meshRef.current.material.color.set("red");
// Check intersections
const intersects = raycaster.current.intersectObject(meshRef.current);
if (intersects.length > 0) {
meshRef.current.material.color.set("blue");
}
}
});
return (


);
};
const RaycasterLine = ({ origin, direction, length }) => {
const linePoints = [
origin, // Start at origin
origin.clone().add(direction.clone().multiplyScalar(length)), // End at ray length
];
return ;
};
const MovingBox = ({ raycaster, objects }) => {
const boxRef = useRef();
const [position, setPosition] = useState([0, 0.5, 0]);
const speed = 0.1;
// Direction of the raycaster
const direction = useRef(new THREE.Vector3(0, -1, 0));
// Handle keyboard input
useEffect(() => {
const handleKeyDown = (event) => {
setPosition((prev) => {
switch (event.key) {
case "w": // Move forward
return [prev[0], prev[1], prev[2] - speed];
case "s": // Move backward
return [prev[0], prev[1], prev[2] + speed];
case "a": // Move left
return [prev[0] - speed, prev[1], prev[2]];
case "d": // Move right
return [prev[0] + speed, prev[1], prev[2]];
default:
return prev;
}
});
};
window.addEventListener("keydown", handleKeyDown);
return () => window.removeEventListener("keydown", handleKeyDown);
}, []);
useFrame(() => {
if (boxRef.current) {
// Update box position
boxRef.current.position.set(...position);
// Update raycaster origin to match the box's position
raycaster.current.set(
new THREE.Vector3(...position), // Raycaster origin
direction.current // Raycaster direction
);
// Check for intersections
const intersects = raycaster.current.intersectObjects(objects);
console.log("intersects",intersects)
if (intersects.length > 0) {
console.log("Collision detected with:", intersects[0].object);
intersects[0].object.material.color.set("yellow");
}
}
});
return (


{/* Visualize Raycaster Line */}

);
};
const Scene = () => {
const raycaster = useRef(new THREE.Raycaster());
const objects = useRef([]);
return (

objects.current.push(ref)}
/>
objects.current.push(ref)}
/>
objects.current.push(ref)}
/>
{/* Grid Helper */}
{/* Dynamic Moving Box */}

);
};
const App = () => {
return (

);
};
export default App;