How to make camera move along with the model?

Questions
,
1

Hello I’m new to react three fibre and I wanted to create camera movement like this website - https://www.joshuas.world/ how can I achieve that??

2

There’s quite a lot of ways to do this - you’re limited pretty much only by your creativity.

You could cast a ray from the camera in camera.getWorldDirection, see where it hits the ground - and move the model there smoothly using Object3D.position.lerp.

If the model has a predefined animation and you just permanently bind camera to it - you can also just Object3D.add(camera) - this will parent your camera to the object so that it inherits the object position and rotation before applying it’s own transformation (this has a few drawbacks, especially if at any point you’d like to unparent the camera from the object - in general it’s good to keep the scene structure as flat as possible - but if you want the camera to always follow the same object, this should definitely be the simplest solution.)

1 Like
3

you can just put the camera into your model. and make it look at the models centerpoint. if you use gltfjsx you get access to your models scene graph and you can naturally extend it, put stuff in it.

import { PerspectiveCamera } from '@react-three/drei'

const ref = useRef()
useFrame((state, delta) => {
  state.camera.lookAt(ref.current.position)
}) 
...
<mesh ref={ref} geometry={foo} material={bar}>
  <PerspectiveCamera makeDefault position={[0, 0, 10]} />
</mesh>

alternatively, the model on this site and the camera could also be static, while the isle spins around the Y axis.

1 Like
4

You have to understand the idea of constraints. In this case the bike is constrained to a circular path. The only variable that is changing is the z rotation of the camera. I am assuming you already have a scene and renderer. I am not familiar with three fibre, so there might be some tools available to you that are not available in the vanilla library.

const box = new THREE.Mesh(new THREE.BoxGeometry(1,1,1), new THREE.MeshBasicMaterial({ color: 0x00ff00 }));
scene.add(box);
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const controls = new THREE.OrbitControls(camera, renderer.domElement);

function initCameraControls(cameraControls) {
    // constrain the orbit controls to a fixed angle and radius
    cameraControls.maxPolarAngle = cameraControls.minPolarAngle = 1.25;
    cameraControls.maxTargetRadius = cameraControls.minTargetRadius = 13;
    cameraControls.enableZoom = false;
    //make sure the camera is looking at the scene origin
    cameraControls.target = new THREE.Vector3(0, 0, 0);
    cameraControls.camera.updateProjectionMatrix();
}

function setBikePosition(bike, cameraControls) {
    // the only value that is changing in the scene is the horizontal angle 
    // of the camera, this is called the azimuthalAngle. We capture that (an
    // offset of PI/2 was necessary for my scene.
    const _rotation = cameraControls.getAzimuthalAngle() - Math.PI/2;
    
    const _radius = 10;
    const _bike_path = (angle) => {
        const x = _radius * Math.cos(angle);
        const y = _radius * Math.sin(angle);
        return { x, y }
    }

    // the following calculates the bikes x and y position based on the provided angle
    const _bike_position = _bike_path(_rotation);
    bike.position.x = _bike_position.x;
    bike.position.y = _bike_position.y;

    // the bikes axis also needs to remain tangent to the circle. The following does that.
    bike.rotation.z = _rotation;

    // we call updateMatrixWorld so that the position and rotation are up to date
    // before the next animation frame.
    bike.updateMatrixWorld();
}

initCameraControls(controls); // initialize camera controls
setBikePosition(box, controls); // initialize object position/rotation

// I prefer to use the onBeforeRender or onAfterRender callbacks
// rather than placing code directly in my render loop. It improves 
// control and separation.
box.onBeforeRender = () => {
    setBikePosition(box, controls);
}

Hope this was helpful and not too detailed!

Best,
-Nate

1 Like
5

This was helpful but i have done that camera is perfect but I want to move the object in circle path on scroll. I have created a path but how to move the object in that path on scroll with camera??
Here is my codesandbox
https://codesandbox.io/p/devbox/github/harshharsha/FinalWeb

6

i don’t think this requires any math or complication at all, imo it’s just a static camera and a static player, and the world rotates.

like this: affectionate-currying-rf9nsd - CodeSandbox

3 Likes
7

Thank you for the solution

8

Of course! This is definitely the best answer.