# Pivot camera around object on drag (ThreeJS)

**URL:** <https://discourse.threejs.org/t/pivot-camera-around-object-on-drag-threejs/21150>\
**Category:** Questions\
**Tags:** orbit-controls, camera\
**Created:** [December 1, 2020, 1:37pm UTC](https://discourse.threejs.org/t/pivot-camera-around-object-on-drag-threejs/21150 "2020-12-01T13:37:08Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sveny](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sveny/32/14643_2.png) [@Sveny](https://discourse.threejs.org/u/Sveny)\
**Post date:** [December 1, 2020, 1:37pm UTC](https://discourse.threejs.org/t/pivot-camera-around-object-on-drag-threejs/21150/1 "2020-12-01T13:37:08Z")

</div>

In my three.js scene I have an object with the `{x: 0, y:0 z:-150}` . My camera has a position of `{x:0, y:0, z:75);` . What I want is that the user can drag the camera around the object, so that the user keeps looking at the object.

![rotation](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/b/b9dea223ee7c92e477513363bc365a79337a1e30.png)

The camera needs to follow the given circle stroke on a drag to the left or to the right.

I tried to use `OrbitControls` and a `pivotPoint` to get this result:

```javascript
    const controls = new OrbitControls( camera, renderer.domElement );
    controls.update();
             
    object.position.set(0, 0, -150);
    pivotPoint = new THREE.Object3D();
    object.add(pivotPoint);

    camera.position.set(0, 0, 75);
    camera.lookAt(object.position);

```

The problem I have now is that the camera rotates around itself and not around the object.

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [December 1, 2020, 2:06pm UTC](https://discourse.threejs.org/t/pivot-camera-around-object-on-drag-threejs/21150/2 "2020-12-01T14:06:40Z")

</div>

Try using [Object3D.getWorldPosition](https://threejs.org/docs/#api/en/core/Object3D.getWorldPosition) vector instead of `.position` - since you seem to be doing some pivot-transformation magic.

Also, just take a look at this [little boilerplate](https://codepen.io/mjurczyk/pen/vYKEqoj) - it has barely anything besides a cube and OrbitControls. Make sure you’re handling controls in a similar fashion - ie. set controls.lookAt only once (change only when changing target object, or whenever object changes its position.)

If it still won’t work - could you recreate your issue on jsfiddle or codepen?

---

<div class="post-metadata">

**Author:** ![Fluqz](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fluqz/32/6279_2.png) [@Fluqz](https://discourse.threejs.org/u/Fluqz)\
**Post date:** [December 1, 2020, 2:15pm UTC](https://discourse.threejs.org/t/pivot-camera-around-object-on-drag-threejs/21150/3 "2020-12-01T14:15:43Z")

</div>

I think you have to do `pivotPoint.add(object)` instead of `object.add(pivotPoint)` or am I wrong?

Also use `controls.update()` after the above code

You could also try to use `controls.target.set(object.position)` instead of `camera.lookAt(...)`. Not sure if this makes a difference

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [December 1, 2020, 2:43pm UTC](https://discourse.threejs.org/t/pivot-camera-around-object-on-drag-threejs/21150/4 "2020-12-01T14:43:08Z")

</div>

Already answered here:

> <https://stackoverflow.com/questions/65091314/pivot-camera-around-object-on-drag>