# Rotate camera rather than object

**URL:** <https://discourse.threejs.org/t/rotate-camera-rather-than-object/35923>\
**Category:** Questions\
**Tags:** controls, camera\
**Created:** [March 14, 2022, 10:28am UTC](https://discourse.threejs.org/t/rotate-camera-rather-than-object/35923 "2022-03-14T10:28:15Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![MarcoSA](https://avatars.discourse-cdn.com/v4/letter/m/a8b319/32.png) [@MarcoSA](https://discourse.threejs.org/u/MarcoSA)\
**Post date:** [March 14, 2022, 10:28am UTC](https://discourse.threejs.org/t/rotate-camera-rather-than-object/35923/1 "2022-03-14T10:28:15Z")

</div>

Hi,

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](https://threejs.org/docs/#examples/en/controls/OrbitControls) 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.

---

<div class="post-metadata">

**Author:** ![vielzutun.ch](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/vielzutun.ch/32/21366_2.png) [@vielzutun.ch](https://discourse.threejs.org/u/vielzutun.ch)\
**Post date:** [March 14, 2022, 10:36am UTC](https://discourse.threejs.org/t/rotate-camera-rather-than-object/35923/2 "2022-03-14T10:36:59Z")

</div>

> [@MarcoSA](#):
>
> But to me _ **it seems** _ like my object is rotating not my camera.

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

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

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

scene.background = texture;

```

Or add an AxesHelper for reference:

```javascript
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

```

---

<div class="post-metadata">

**Author:** ![MarcoSA](https://avatars.discourse-cdn.com/v4/letter/m/a8b319/32.png) [@MarcoSA](https://discourse.threejs.org/u/MarcoSA)\
**Post date:** [March 14, 2022, 10:56am UTC](https://discourse.threejs.org/t/rotate-camera-rather-than-object/35923/3 "2022-03-14T10:56:13Z")

</div>

Hi @vielzutun.ch ,

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?

---

<div class="post-metadata">

**Author:** ![vielzutun.ch](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/vielzutun.ch/32/21366_2.png) [@vielzutun.ch](https://discourse.threejs.org/u/vielzutun.ch)\
**Post date:** [March 14, 2022, 11:07am UTC](https://discourse.threejs.org/t/rotate-camera-rather-than-object/35923/4 "2022-03-14T11:07:25Z")

</div>

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:

> [@MarcoSA](#):
>
> 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.

Have you made sure, that the [`OrbitControls.target`](https://threejs.org/docs/index.html?q=Orbit#examples/en/controls/OrbitControls.target) is set to your objects center?

---

<div class="post-metadata">

**Author:** ![MarcoSA](https://avatars.discourse-cdn.com/v4/letter/m/a8b319/32.png) [@MarcoSA](https://discourse.threejs.org/u/MarcoSA)\
**Post date:** [March 14, 2022, 11:44am UTC](https://discourse.threejs.org/t/rotate-camera-rather-than-object/35923/5 "2022-03-14T11:44:27Z")

</div>

I assumed you meant it jokingly 🙂

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.

---

<div class="post-metadata">

**Author:** ![vielzutun.ch](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/vielzutun.ch/32/21366_2.png) [@vielzutun.ch](https://discourse.threejs.org/u/vielzutun.ch)\
**Post date:** [March 14, 2022, 12:25pm UTC](https://discourse.threejs.org/t/rotate-camera-rather-than-object/35923/6 "2022-03-14T12:25:06Z")

</div>

> [@MarcoSA](#):
>
> I am actually not sure what it is set to on render.

😕  
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):

 ![Bildschirmfoto 2022-03-14 um 13.10.51](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/9/d/9db9ea96be38796dd1f2b15f5768ff4ab8d0bfe2.jpeg)

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

---

<div class="post-metadata">

**Author:** ![MarcoSA](https://avatars.discourse-cdn.com/v4/letter/m/a8b319/32.png) [@MarcoSA](https://discourse.threejs.org/u/MarcoSA)\
**Post date:** [March 14, 2022, 12:32pm UTC](https://discourse.threejs.org/t/rotate-camera-rather-than-object/35923/7 "2022-03-14T12:32:04Z")

</div>

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).

---

<div class="post-metadata">

**Author:** ![vielzutun.ch](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/vielzutun.ch/32/21366_2.png) [@vielzutun.ch](https://discourse.threejs.org/u/vielzutun.ch)\
**Post date:** [March 14, 2022, 12:33pm UTC](https://discourse.threejs.org/t/rotate-camera-rather-than-object/35923/8 "2022-03-14T12:33:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![MarcoSA](https://avatars.discourse-cdn.com/v4/letter/m/a8b319/32.png) [@MarcoSA](https://discourse.threejs.org/u/MarcoSA)\
**Post date:** [March 14, 2022, 12:46pm UTC](https://discourse.threejs.org/t/rotate-camera-rather-than-object/35923/9 "2022-03-14T12:46:52Z")

</div>

I can orbit around the object but not 360°, the behavior is similar to : [three.js examples](https://threejs.org/examples/?q=gltf#webgl_loader_gltf)

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?

---

<div class="post-metadata">

**Author:** ![MarcoSA](https://avatars.discourse-cdn.com/v4/letter/m/a8b319/32.png) [@MarcoSA](https://discourse.threejs.org/u/MarcoSA)\
**Post date:** [March 14, 2022, 12:50pm UTC](https://discourse.threejs.org/t/rotate-camera-rather-than-object/35923/10 "2022-03-14T12:50:21Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![vielzutun.ch](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/vielzutun.ch/32/21366_2.png) [@vielzutun.ch](https://discourse.threejs.org/u/vielzutun.ch)\
**Post date:** [March 14, 2022, 2:48pm UTC](https://discourse.threejs.org/t/rotate-camera-rather-than-object/35923/11 "2022-03-14T14:48:59Z")

</div>

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”.

---

<div class="post-metadata">

**Author:** ![Dannie226](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dannie226/32/21794_2.png) [@Dannie226](https://discourse.threejs.org/u/Dannie226)\
**Post date:** [March 17, 2022, 10:48am UTC](https://discourse.threejs.org/t/rotate-camera-rather-than-object/35923/12 "2022-03-17T10:48:31Z")

</div>

> [@MarcoSA](#):
>
> But I still do not know how the camera decides what is the center point for it to orbit around

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.

---

<div class="post-metadata">

**Author:** ![MarcoSA](https://avatars.discourse-cdn.com/v4/letter/m/a8b319/32.png) [@MarcoSA](https://discourse.threejs.org/u/MarcoSA)\
**Post date:** [March 17, 2022, 10:51am UTC](https://discourse.threejs.org/t/rotate-camera-rather-than-object/35923/13 "2022-03-17T10:51:20Z")

</div>

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.