Rotate camera rather than object


I am using orbit controls with a perspective camera.

When rotating it seems like its the object (3D model loaded via GLTF loader) which is being rotated instead of the camera.

I would like to have the object stay in one position and have the the camera rotate around it.

On three.js docs it says “Orbit controls allow the camera to orbit around a target.” But to me it seems like my object is rotating not my camera.

Is this possible? I am not finding a clear example on how to do this.

That’s what Einstein was talking about in his Theory of Relativity … :smiling_face:

Try using a scene.background in order to know for sure:

let texture = new THREE.TextureLoader().load( 'uv_grid_opengl.jpg' );
texture.mapping = THREE.EquirectangularReflectionMapping;

scene.background = texture;

Or add an AxesHelper for reference:

const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );
1 Like

Hi ,

Thank you for the tip about using the texture.

I also logged the camera position at different times. It is the camera which is moving.

However, it still seems like its the 3D model, the camera “orbit” is not smooth and I can also not rotate the camera 360° around the object.

Do you perhaps have any advice for this?

My little remark about the Theory of relativity was added a little jokingly. But there’s a serious observation at its core. It’s the same misconception that for hundreds of years led mankind to believe, that the sun was revolving about the earth, while it is infact the other way around.

As far as your new question is concerned:

Have you made sure, that the is set to your objects center?

I assumed you meant it jokingly :slight_smile:

I am not sure that it is set to the center of the object, I am actually not sure what it is set to on render.

However, I have a dropdown box with a list of “components” which is related to the 3D model and depending on what component is selected, the target is set to the coordinates of that component.

So somehow I should maybe cache the center point of my object to be sure the orbit controls / camera always orbit around that point.

If you have access to your source code, you could (should!) look it up in the Developer tools / JavaScript console of your browser. Place a break point early in your render() function, try to orbit the camera using your mouse, then look it up, like so (as seen in Safari, in my case):

In a similar way you can look up your objects coordinates.

I see the target is 0,0,0 which is also where my 3D model is placed in the scene. As I set the object position to 0,0,0. Using object.scene.position.x = 0 (same for X and Y).

And you still can’t orbit all around this object?

I can orbit around the object but not 360°, the behavior is similar to : three.js examples

When you get to the top it stops it does not rotate around.

Further more, if you right click to pan and pan that the 3D model so that is in the top right corner and then try to orbit the object the orbit is not around the object but seems to be around the center of the scene.

Does what I am saying make sense?

I know the camera is what’s moving (thanks’ to your help) but what is the cameras “center” around which it orbits once you pan?

I think I understand why it “stops” at the top. If you just rotate the camera you can orbit down again on the other side. But I still do not know how the camera decides what is the center point for it to orbit around…

You can orbit full 360° around the equator, so to speak. You can’t go across the poles. Reason is, that positive y-axis is always “up”.

1 Like

The camera orbits around the target vector on orbit controls. Change that, then you change what the camera both looks at and what it orbits around. Panning moves that target vector.

1 Like

Perfect thank you.

My problem was the co-ordinates I was using as the target were incorrect. They were off by a factor of 1000.