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