Skip to content


 Zabbix
 Grafana
 Prometheus
 React Three Fiber
 Threejs and TypeScript
 SocketIO and TypeScript
 Blender Topological Earth
 Sweet Home 3D
 Design Patterns Python
 Design Patterns TypeScript
   
 Course Coupon Codes
Three.js and TypeScript
Kindle Edition
$6.99 $9.99 Paperback 
$22.99 $29.99




Design Patterns in TypeScript
Kindle Edition
$6.99 $9.99 Paperback
$11.99 $19.99




Design Patterns in Python
Kindle Edition
$6.99 $9.99 Paperback
$11.99 $19.99




Follow Cam

Working Example

Description

This example demonstrates creating custom follow cam functionality. 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 Player.jsx.

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,

  • Cannon-es useCompoundBody. See Player.jsx

  • Loading the model mesh and animations as separate files. See Eve.jsx

  • Using the Threejs AnimationMixer, AnimationClip and AnimationAction to play different animations. See Eve.jsx and Player.jsx

  • Cannon-es useContactMaterial. See Game.jsx

  • Applying velocity to a Cannon Body based on keyboard presses. See Player.jsx

  • Toggling the Cannon debug renderer on and off. See Game.jsx

GitHub Branch

git clone https://github.com/Sean-Bradley/React-Three-Fiber-Boilerplate.git
cd React-Three-Fiber-Boilerplate
git checkout followCam
npm install
npm start