use-cannon
use-cannon copied to clipboard
Raycast - API for dynamic updates props "from" and "to"
Hi,
I wanted to attach raycast to the character to check if it is touching the ground before jump. I noticed that there is no option to change start and end points of raycast (like it is in the useSphere hook we can call an api and change position etc.) without causing the rerender the component which in my opinion can affect on performance and it is not comfortable to use.
For now a walkaround to not cause the rerender more than raycaster component is create separate component and change it state through the store.
Below part of code which shows a little the issue
const Raycaster = React.forwardRef((props, ref) => {
// get state from zustand with rerender component and apply it to "from" and "to" props
const raycast = useRaycastClosest(
{
from: [0, 10, 0],
to: [0, -10, 0],
collisionFilterMask: 1,
skipBackfaces: true,
},
ref
);
return <></>;
});
const Player = (props)=> {
const refRaycast = React.createRef();
const [ref, api] = useSphere(() => ({
mass: 1,
type: 'Dynamic',
position: [-5, -8.5, 0],
fixedRotation: true,
allowSleep: false,
collisionFilterGroup: 2,
material: {
friction: 0,
},
...props,
}));
const velocity = useRef([0, 0, 0]);
useEffect(() => api.velocity.subscribe((v) => (velocity.current = v)), []);
// useFrame in which check position of sphere and change the state through zustand
return (
<group>
<Raycaster ref={refRaycast} />
<mesh ref={ref}>
<sphereBufferGeometry attach="geometry" args={[1, 8, 8]} />
<meshStandardMaterial color="#a81b00" />
</mesh>
</group>
)
}