# Control for turning camera? (fixed axis and pivot point)

**URL:** <https://discourse.threejs.org/t/control-for-turning-camera-fixed-axis-and-pivot-point/37705>\
**Category:** Questions\
**Tags:** camera-controls, controls, camera\
**Created:** [May 2, 2022, 9:01am UTC](https://discourse.threejs.org/t/control-for-turning-camera-fixed-axis-and-pivot-point/37705 "2022-05-02T09:01:57Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![janrembold](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/janrembold/32/26025_2.png) [@janrembold](https://discourse.threejs.org/u/janrembold)\
**Post date:** [May 2, 2022, 9:01am UTC](https://discourse.threejs.org/t/control-for-turning-camera-fixed-axis-and-pivot-point/37705/1 "2022-05-02T09:01:57Z")

</div>

Hi, I’m searching for a control that allows me to spin the camera around like standing on a tower and having a 360 degree view while you (the camera) is turning around. The camera pivot point is fixed.

Following features need to be fulfilled:

- mouse and touch controls on mobile devices (like OrbitControls)
- damping activated
- fixed to y-axis
- no zoom needed

Is it possible to configure one of the existing cameras to make this happen? I want to avoid building a new custom control if possible.

Thanks in advance!  
Best, Jan

![Bildschirmfoto 2022-05-02 um 10.58.37](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/8/786513ec4773309aa8fffe38eeaa2d817fce9ba0.png)

---

<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:** [May 2, 2022, 9:07am UTC](https://discourse.threejs.org/t/control-for-turning-camera-fixed-axis-and-pivot-point/37705/2 "2022-05-02T09:07:45Z")

</div>

How about introducing **two** cameras like this:

1st camera is controlled via OrbitControls as-is.  
2nd camera uses 1st camera’s position as target and 1st camera’s taget as position.

Then render what the 2nd camera sees.

P.S.: locking to y-axis can be achieved via [max/minPolarAngle](https://threejs.org/docs/#examples/en/controls/OrbitControls.maxPolarAngle) = Math.PI / 2.

---

<div class="post-metadata">

**Author:** ![janrembold](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/janrembold/32/26025_2.png) [@janrembold](https://discourse.threejs.org/u/janrembold)\
**Post date:** [May 2, 2022, 11:52am UTC](https://discourse.threejs.org/t/control-for-turning-camera-fixed-axis-and-pivot-point/37705/4 "2022-05-02T11:52:50Z")

</div>

Hi, thanks for the super quick response! While I was trying out your proposal I came up with a sandbox like that: [MapControls Events (forked) - CodeSandbox](https://codesandbox.io/s/mapcontrols-events-forked-5fgbyq)

This is just a super simple OrbitControl with the default canvas camera and it spins around very nicely.  
But honestly I have no idea why it does that. Shouldn’t this control always “orbit” around something?

---

<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:** [May 2, 2022, 1:25pm UTC](https://discourse.threejs.org/t/control-for-turning-camera-fixed-axis-and-pivot-point/37705/5 "2022-05-02T13:25:32Z")

</div>

To my knowledge, a camera controlled through OrbitControls **_can_** orbit around the `controls.target` (a 3D point), based on a mouse click&drag action. Without your mouse input, nothing happens or moves. Give me a little time and I will present a JSFiddle which demonstrates my point.

To be continued …

---

<div class="post-metadata">

**Author:** ![janrembold](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/janrembold/32/26025_2.png) [@janrembold](https://discourse.threejs.org/u/janrembold)\
**Post date:** [May 2, 2022, 3:05pm UTC](https://discourse.threejs.org/t/control-for-turning-camera-fixed-axis-and-pivot-point/37705/6 "2022-05-02T15:05:38Z")

</div>

Have you seen my CodeSandbox above? This does exactly what I wanted it to do 🙂 You can simply spin around by dragging the mouse.

I was just confused because most other OrbitControl examples do something like that: [Orbit Controls Demo](https://drei.pmnd.rs/?path=/story/controls-orbitcontrols--orbit-controls-story)

Anyways, the way it works on the Sandbox is perfect for me!

---

<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:** [May 2, 2022, 4:24pm UTC](https://discourse.threejs.org/t/control-for-turning-camera-fixed-axis-and-pivot-point/37705/7 "2022-05-02T16:24:51Z")

</div>

Thanks for alerting me, but since I had already started the implementation, (which turned out to be a little more involved than I had expected) I didn’t want to throw it away.

I saw your code sandbox, but couldn’t detect a “spin around”. For me it appeared as a mere “pan”.

Anyway, here is my interpretation of your initial request:

> **[Pivot Camera - JSFiddle - Code Playground](https://jsfiddle.net/Chrisssie/sf68hu09/)**
>
> Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

Initially you see a 3rd-person view from an external, fixed-position camera.

I’m showing both orbiting and pivoting cameras by means of a [CameraHelper](https://threejs.org/docs/#api/en/helpers/CameraHelper), whose representation on screen scales with the far plane of the camera frustum. That’s why I had to restrict the far reach of each camera, so their respective CameraHelpers wouldn’t visually intersect.

The orbiting camera is shown close to the ground, while I elevated the pivoting camera by a small amount. See how they’re always facing each other when you click&drag.

By activating ONE of the three statements in the render() function, you get to see what each of the cameras sees.

```javascript
/ ************Activate ONLY ONE of the following:************ /
		
//	renderer.render( scene, orbitCamera );
//	renderer.render( scene, pivotCamera );
	renderer.render( scene, observerCamera );

```

---

<div class="post-metadata">

**Author:** ![rrrr\_rrrr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/rrrr_rrrr/32/7697_2.png) [@rrrr\_rrrr](https://discourse.threejs.org/u/rrrr_rrrr)\
**Post date:** [May 3, 2022, 4:43am UTC](https://discourse.threejs.org/t/control-for-turning-camera-fixed-axis-and-pivot-point/37705/8 "2022-05-03T04:43:01Z")

</div>

Better off writing a function that rotates camera based on direction of mouse movement instead of using OrbitControls.

But, if you’d like to use OrbitControls, here is a demo: [Ray\_Muti.html](https://discourse.threejs.org/uploads/short-url/9NDP3JmTgWC7rxBPxOozHfDyHmy.html) (7.3 KB)

To activate **keyboard** commands make the mouse is over the canvas and has focus.

- Press 1 key to switch to 360 mode.
- Press 0 key to revert.

---

<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:** [May 3, 2022, 5:18am UTC](https://discourse.threejs.org/t/control-for-turning-camera-fixed-axis-and-pivot-point/37705/9 "2022-05-03T05:18:19Z")

</div>

These are the thread starter’s requirements:

> Following features need to be fulfilled:
> 
> ```
> mouse and touch controls on mobile devices (like OrbitControls)
> damping activated
> fixed to y-axis
> no zoom needed
> 
> ```

And OrbitControls has all of that right out of the box.

> [@rrrr\_rrrr](#):
>
> But, if you’d like to use OrbitControls, here is a demo

Thanks for your offer, but I supplied my own demo in the JSFiddle already. 😛

---

<div class="post-metadata">

**Author:** ![janrembold](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/janrembold/32/26025_2.png) [@janrembold](https://discourse.threejs.org/u/janrembold)\
**Post date:** [May 3, 2022, 6:41am UTC](https://discourse.threejs.org/t/control-for-turning-camera-fixed-axis-and-pivot-point/37705/10 "2022-05-03T06:41:20Z")

</div>

Wow, this feedback is overwhelming! Thanks for those detailed examples!!! I need to closely study them!

Seems we have 3 completely different approaches that are doing more or less the same thing. I also added a gridHelper to my demo, maybe that makes it even clearer that it is nicely spinning around with close to zero code effort: [OrbitControl spinning 360 view - CodeSandbox](https://codesandbox.io/s/orbitcontrol-spinning-360-view-5fgbyq?file=/src/index.js)

As Christophs answer was first, maybe you could put all 3 possible ways (link to your fiddle, my sandbox and the html file) into a single reply, so I can set the “Solution” flag that future visitors see all solutions at once.

Thanks guys for your support!!!

---

<div class="post-metadata">

**Author:** ![janrembold](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/janrembold/32/26025_2.png) [@janrembold](https://discourse.threejs.org/u/janrembold)\
**Post date:** [May 3, 2022, 7:21pm UTC](https://discourse.threejs.org/t/control-for-turning-camera-fixed-axis-and-pivot-point/37705/11 "2022-05-03T19:21:27Z")

</div>

I have to correct myself. My solution is not correct. It spins around a center point and because the outer boxes are away far enough it looks like the camera is spinning around.

But the camera is orbitting around the center what is not the desired solution.

---

<div class="post-metadata">

**Author:** ![phil\_crowther](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/phil_crowther/32/64202_2.png) [@phil\_crowther](https://discourse.threejs.org/u/phil_crowther)\
**Post date:** [May 4, 2022, 6:17pm UTC](https://discourse.threejs.org/t/control-for-turning-camera-fixed-axis-and-pivot-point/37705/12 "2022-05-04T18:17:28Z")

</div>

camera.rotation.y = ???

As long as you are not using “LookAt” (which overrides everything), you should be able to freely rotate the camera in any direction you like - along the x, y and/or z axes.

I have written several posts on the subject of moving and rotating your camera.

---

<div class="post-metadata">

**Author:** ![Remi-Tribia](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/remi-tribia/32/26113_2.png) [@Remi-Tribia](https://discourse.threejs.org/u/Remi-Tribia)\
**Post date:** [May 5, 2022, 7:03am UTC](https://discourse.threejs.org/t/control-for-turning-camera-fixed-axis-and-pivot-point/37705/13 "2022-05-05T07:03:05Z")

</div>

Using OrbitControls and setting the target position to be 1 cm in front of the camera, limiting polar rotation to the angle you need, should do the trick.  
I’m using this for years, lastly I combined OrbitControls (rotate & panning) + TrackballControls (zoom) to have damping also on zoom (not available with OrbitControls).

---

<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:** [May 5, 2022, 7:12am UTC](https://discourse.threejs.org/t/control-for-turning-camera-fixed-axis-and-pivot-point/37705/14 "2022-05-05T07:12:08Z")

</div>

> [@Remi-Tribia](#):
>
> Using OrbitControls and **setting the target position to be 1 cm in front of the camera** , limiting polar rotation to the angle you need, should do the trick.

That’s an incredibly cool and effortless variant and I’d be willing to pass you the solution credit if I knew how to do that!

---

<div class="post-metadata">

**Author:** ![Remi-Tribia](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/remi-tribia/32/26113_2.png) [@Remi-Tribia](https://discourse.threejs.org/u/Remi-Tribia)\
**Post date:** [May 5, 2022, 8:10am UTC](https://discourse.threejs.org/t/control-for-turning-camera-fixed-axis-and-pivot-point/37705/15 "2022-05-05T08:10:17Z")

</div>

Setting target position is simple: ` controls.target.set(x,y,z)`

And to get target position knowing the camera (just remove typing for simple js):

```javascript
const calculateTarget = (camera: PerspectiveCamera, distance = 0.01): Vector3 =>
  (new Vector3()).addVectors(
    camera.getWorldPosition(new Vector3()),
    camera.getWorldDirection(new Vector3()).multiplyScalar(distance)
  );

```

---

<div class="post-metadata">

**Author:** ![janrembold](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/janrembold/32/26025_2.png) [@janrembold](https://discourse.threejs.org/u/janrembold)\
**Post date:** [May 20, 2022, 10:22am UTC](https://discourse.threejs.org/t/control-for-turning-camera-fixed-axis-and-pivot-point/37705/16 "2022-05-20T10:22:22Z")

</div>

Hey all,

I played around with OrbitControls for a while now and it just seems to be overkill for just spinning a camera around.

My second approach was now to simply place a camera in the center and use the @use-gesture library ([https://use-gesture.netlify.app](https://use-gesture.netlify.app)) to add the incoming delta.x movements (from mouse or touch) to the rotation property of the camera. With some simple adjustments this works very well but looks extremely static, because (of course) there is no damping.

Next step was to calculate the damping all by hand and I just didn’t manage to get it really smooth like all those libraries make it.

Now I thought it would be better to add the “react-spring” library ([https://react-spring.io/](https://react-spring.io/)) and let this tool handle the rotation calculations including the damping factor… but even though this should work somehow I don’t get it to work with THREE ☹

Here is a very reduced demo of the scene: [Camera Rotation with useDrag and useSpring - CodeSandbox](https://codesandbox.io/s/camera-rotation-with-usedrag-and-usespring-l5un5l?file=/src/index.js)

Currently nothing happens there because “spring” seems to output not the rotation prop that the camera would need and I have no idea how to get it working.

Any ideas on that?

---

<div class="post-metadata">

**Author:** ![janrembold](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/janrembold/32/26025_2.png) [@janrembold](https://discourse.threejs.org/u/janrembold)\
**Post date:** [May 20, 2022, 1:53pm UTC](https://discourse.threejs.org/t/control-for-turning-camera-fixed-axis-and-pivot-point/37705/17 "2022-05-20T13:53:56Z")

</div>

OK, I already thought there is only a simple piece missing. It was as simple as wrapping the “PerspectiveCamera” into “animated” from “react-spring”… The rest should only be fine-tuning.

I just updated the sandbox: [Camera Rotation with useDrag and useSpring - CodeSandbox](https://codesandbox.io/s/camera-rotation-with-usedrag-and-usespring-l5un5l?file=/src/index.js)

And all this with only a few lines of code 🙂

Thanks guys for your fantastic feedback!!!