RayCaster with Hepler Line in React js with R3F THREE

[@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(({ clock }) => {
const elapsedTime = clock.getElapsedTime();
if (meshRef.current) {
meshRef.current.position.y = Math.sin(elapsedTime * position[0] * 0.3) * 1.5;
// 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, near, far }) => {
const linePoints = [
origin.clone().add(direction.clone().multiplyScalar(near)), // Start at near distance
origin.clone().add(direction.clone().multiplyScalar(far)), // End at far distance
];
return ;
};
const MovingBox = ({ raycaster }) => {
const boxRef = useRef(); // Declare boxRef to refer to the mesh
const [position, setPosition] = useState([0, 0.5, 0]);
const speed = 0.1;
// 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 && raycaster.current) {
// Reset color to orange
boxRef.current.material.color.set("yellow");
// Check intersections
const intersects = raycaster.current.intersectObject(boxRef.current);
if (intersects.length > 0) {
// Change color if intersected
boxRef.current.material.color.set("blue");
}
}
});
return (


);
};
const Scene = () => {
const raycaster = useRef(new THREE.Raycaster());
const origin = new THREE.Vector3(-3, 0.5, 0);
const direction = new THREE.Vector3(10, 0, 0).normalize();
const near = 10; // Correct near distance
const far = 20; // Correct far distance
raycaster.current.near = near;
raycaster.current.far = far;
useFrame(() => {
raycaster.current.set(origin, direction);
});
return (



{/* Raycaster Line with near and far applied */}

{/* Grid Helper */}

{/* Dynamic Moving Box */}


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

);
};
export default App;