0

I’m experimenting with using react-three/rapier as my physics engine, however I can’t get a camera to follow the position of a Rapier object. The camera follows the object as it falls down the z axis, but as soon as it hits the ground and bounces around the camera bounces around on a seemingly different target, I’ve created a sandbox to show this here:https://codesandbox.io/s/solitary-snowflake-199g3k

As you can see from the below gif, the camera follows the box as it falls, but then pans wildly after impact with the floor

[![enter image description here][1]][1]

component is as below:

import { OrbitControls, PerspectiveCamera } from "@react-three/drei";
import { useFrame } from "@react-three/fiber";
import { RigidBody, CuboidCollider } from "@react-three/rapier";

import * as THREE from "three";

import { useRef } from "react";

const Scene = () => {
  const ref = useRef();
  const bodyRef = useRef();
  const cameraRef = useRef();

  const lookAtVec = new THREE.Vector3(0, 0, 0);
  const cameraVector = new THREE.Vector3(0, 0, 0);

  useFrame((state) => {
    const boxPos = bodyRef.current.translation();
    console.log(boxPos);
    lookAtVec.set(boxPos.x, boxPos.y, boxPos.z);
    cameraVector.lerp(lookAtVec, 0.1);
    state.camera.lookAt(cameraVector);
    state.camera.updateProjectionMatrix();
  });


  [1]: https://i.stack.imgur.com/aLbqt.gif
WillMaddicott
  • 512
  • 6
  • 20

0 Answers0