Hello guys
I have a problem with reference the RigidBody component from react three rapier, when I try to catch the reference is always null.
import { Canvas } from "@react-three/fiber";
import { Suspense, useRef, useState } from "react";
import { Physics, RigidBody, RapierRigidBody } from "@react-three/rapier";
import { OrbitControls, Box } from "@react-three/drei";
import * as THREE from "three";
const Model = () => {
const cubeRef = useRef<RapierRigidBody>(null);
console.log(cubeRef); ----> this ref is always null
const [hover, setHover] = useState(false);
const jump = () => {
if (cubeRef.current) {
const impulse = new THREE.Vector3(0, 5, 0);
cubeRef.current.applyImpulse(impulse, true);
}
console.log("Jumping!");
};
return (
<>
<ambientLight intensity={1} />
<OrbitControls />
<RigidBody ref={cubeRef} position={[-2.5, 1, 0]}>
<Box
onClick={jump}
onPointerEnter={() => setHover(true)}
onPointerLeave={() => setHover(false)}
>
<meshStandardMaterial color={hover ? "hotpink" : "royalblue"} />
</Box>
</RigidBody>
<RigidBody type="fixed">
<Box args={[10, 1, 10]} position={[0, 0, 0]}>
<meshStandardMaterial color="springgreen" />
</Box>
</RigidBody>
</>
);
};
export const PhysicsModel = () => {
return (
<Canvas
shadows
camera={{ position: [10, 10, 10], fov: 30 }}
style={{ height: "100vh", width: "100vw" }}
>
<Suspense fallback={null}>
<Physics>
<Model />
</Physics>
</Suspense>
</Canvas>
);
};
And this is my package.json
"dependencies": {
"@headlessui/react": "^2.2.0",
"@heroicons/react": "^2.2.0",
"@react-three/drei": "^9.121.4",
"@react-three/fiber": "^8.17.14",
"@react-three/rapier": "^2.1.0",
"curvedpath": "file:",
"gsap": "^3.12.7",
"install": "^0.13.0",
"lamina": "^1.1.23",
"npm": "^11.2.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router-dom": "^7.4.0",
"three": "^0.176.0",
"three-stdlib": "^2.36.0"
},
I have been debugging for a long time with no result.
Appreciate any help guys, Thanks in advance