This example demonstrates creating custom follow cam functionality. A.k.a. Third person camera.
A pivot is created, another object is added to the pivot, positioned offset from the center of the pivot, the camera is then added to the offset object. The pivot is then also attached to the main scene object that you want to be centered in the view so that the pivot stays attached to the main object in case it is moved. Mouse events can be used to rotate the pivot or extend the distance of the offset object that was added to the pivot. In the code, see the file
useFollowCam.jsx and where it is used in
In this scene, you can use the mouse to rotate around the main character object. You can also zoom in and out of the targeted object. It is very similar to using OrbitControls.
Other things that this example demonstrates are,
Loading the model mesh and animations as separate files. See
Using the Threejs
AnimationActionto play different animations. See
Applying velocity to a Cannon
Bodybased on keyboard presses. See
Toggling the Cannon debug renderer on and off. See
|Follow Cam Example 2||codesandbox.io|
git clone https://github.com/Sean-Bradley/React-Three-Fiber-Boilerplate.git cd React-Three-Fiber-Boilerplate git checkout followCam npm install npm start