Three.js camera on path

Good day.

Have this code

I’m interested in how you can make the camera move from the initial position, slightly higher along the y axis or along the axis z

for example, what I need is attaching a screenshot

1 Like

In updateCamera, instead of animating the camera, you can animate an invisible pivot object (since camera is an Object3D as well, the API will be almost identical.)

Add the camera as a child of the pivot object, then add any local offset you’d like (you can also do these calculations manually, by simply copying world rotation of the pivot to the camera - if you’d prefer camera to stay at the root level of the scene.)

I’m not entirely competent in this, but as I understand it, you wrote that you need to add some kind of transparent object and attach a camera to it. In this I do not understand how the camera will work if it is attached to the 2nd object, but should follow the path of the 1st.

if possible, write a couple of lines of code for a complete understanding.

Thank you.

@Lighty

here you go buddy, i updated your pen with what you need…

safe x

1 Like

Thank you
I will watch

@Lighty

here we go, basically i set another object in front of the cube that the cube looks at also…

safe x

1 Like

exactly what is needed ))))

@Lighty cool man :ok_hand:

yes, cameraTargetlook does already lookAt(lookTarget.position) so it’s rotation is already defined in the updateCamera loop, you can easily do this though by changine the position of lookTarget left and right, does that make sense?

@Lighty i mean so it looks at the translated position of lookTarget

my task is to turn the object itself, from the fact that I change the camera a little, this will not affect the rotation of the object itself.

I mean that my object - the model is loaded like this.

solved the problem by turning the model itself in a blender, but it’s still interesting if there is a solution to this.

i made something like this once, camera movement along a path and the object’s somewhat turning: https://codesandbox.io/s/r3f-game-i2160?file=/src/3d/Rig.js the math is in the “useFrame” bits, that’s the frameloop.

2 Likes

@Lighty yes there’s actually a simple way after some reading using rotateOnAxis after lookAt… i’ve updated the pen here…

safe x

Thank you!!!

1 Like

@Lighty pleasure.

I just saw this on the weekly summary.

You can’t rotate the camera on the Z-axis. But you can rotate the world around the camera. This allows you use an “in cockpit” view.

Here are a couple of examples:
Flight Display
Flight Simulation

As the last example illustrates, three.js can handle some pretty complex modeling at 60fps. So you are not limited to a wireframe world.

@phil_crowther, not sure what you mean by

i didn’t know that, can you explain a bit more what you mean?

would this not allow you to do so…?

var z_axis = new THREE.Vector3( 0, 0, 1 );

camera.up.applyQuaternion(quaternion.setFromAxisAngle(z_axis, angle));

1 Like

What I meant was that you can you can’t currently rotate a scene on the Z-axis using the camera. There is no camera.rotation.z.

The kind of scene I had in mind begins with a standard skybox, created as follows:
envMap = new THREE.CubeTextureLoader()
.setPath(“skyboxdirectory/”)
.load([“px.jpg”, “nx.jpg”, “py.jpg”, “ny.jpg”, “pz.jpg”, “nz.jpg”]);
scene.background = envMap;

You then populate this 3D space with objects.

You can use the camera to look at the scene you have created by changing the camera position and rotation. You can rotate the camera on the x-axis to look up or down (camera.rotation.x). And you can rotate the camera on the y-axis to look left or right (camera.rotation.y). But you can’t rotate the camera on the z-axis so that the horizon is banked. There is no camera.rotation.z. The horizon is always level. (You can go upside down 180 degrees, but the horizon will still be level.)

In your example, it looks like you want to create something like a roller coaster simulation where the coaster is banking a lot. If you were to eventually put that coaster track in a standard skybox environment and were to attach a camera to your vehicle, you would be able to follow the movement of the vehicle up and down and left and right. But you would not be able to get the camera to bank with the vehicle. The camera (and horizon) would always remain level - as if on a gimbal.

At present, it appears that you are not having this problem because (I believe) you are effectively rotating the world (the track) around the camera. If you want to add a skybox (which I assume you will), you will have to use something like the custom version that I created which rotates around you. If you want to use a directional light source (like the sun), you will need to move the light around you. And if you create external objects (like a ground map or terrain), you will have to move and rotate those objects around you.

My two demo programs should provide you with an example of how those things can be done. Feel free to extract what you want from them. Everything is in subroutines, so that should be relatively easy.

@phil_crowther

then why if i do

camera.rotation.z = 0.5; 

does the camera rotate on z?

maybe i’m not getting something but i’ve made an example here…

1 Like