pmndrs / use-cannon

👋💣 physics based hooks for @react-three/fiber
https://cannon.pmnd.rs
2.74k stars 153 forks source link

Raycast - API for dynamic updates props "from" and "to" #329

Open Russo-creation opened 2 years ago

Russo-creation commented 2 years ago

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>
  )
}