# Rotate camera on its own axis on mouse drag

**URL:** <https://discourse.threejs.org/t/rotate-camera-on-its-own-axis-on-mouse-drag/12314>\
**Category:** Questions\
**Tags:** controls\
**Created:** [January 25, 2020, 1:02pm UTC](https://discourse.threejs.org/t/rotate-camera-on-its-own-axis-on-mouse-drag/12314 "2020-01-25T13:02:09Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Azizbek\_Jonibekov](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/azizbek_jonibekov/32/12586_2.png) [@Azizbek\_Jonibekov](https://discourse.threejs.org/u/Azizbek_Jonibekov)\
**Post date:** [January 25, 2020, 1:02pm UTC](https://discourse.threejs.org/t/rotate-camera-on-its-own-axis-on-mouse-drag/12314/1 "2020-01-25T13:02:09Z")

</div>

Hi. I’m going to create showroom alike [showroom.littleworkshop.fr](http://showroom.littleworkshop.fr) . But I don’t know how to create first person controller with cursor drag. I tried to use PointerLock controller but it has 2 main drawbacks:

1. It disables cursor
2. It only moves on mousemove event

Problem with OrbitControls is that it **only moves camera around object.** But I need to **turn camera itself on its own axis** that provides the user first person experience.

My purpose is to create controller so that user can **move camera on mouse drag**.  
I have no idea how to do that. Can anybody help me to achieve this?

---

<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:** [January 25, 2020, 1:14pm UTC](https://discourse.threejs.org/t/rotate-camera-on-its-own-axis-on-mouse-drag/12314/2 "2020-01-25T13:14:24Z")

</div>

> [@Azizbek\_Jonibekov](#):
>
> But I need to **turn camera itself on its own axis** that provides the user first person experience.

If you setup `OrbitControls` like in the following example, you should achieve the intended outcome:

[https://threejs.org/examples/webgl\_panorama\_cube](https://threejs.org/examples/webgl_panorama_cube)

The idea is to produce a small gap between the camera and `OrbitControls.target`. In the example, the `OrbitControls.target` is at the origin but the camera has a position of `(0, 0, 0.01)`.

---

<div class="post-metadata">

**Author:** ![Azizbek\_Jonibekov](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/azizbek_jonibekov/32/12586_2.png) [@Azizbek\_Jonibekov](https://discourse.threejs.org/u/Azizbek_Jonibekov)\
**Post date:** [January 27, 2020, 4:20pm UTC](https://discourse.threejs.org/t/rotate-camera-on-its-own-axis-on-mouse-drag/12314/3 "2020-01-27T16:20:33Z")

</div>

I used controls from example like you said.  
But it doesn’t seems what I expected.  
Camera only rotates around 3d model.  
Can you help me to fix the issue?

Here’s my project repo

> **[Teo0303/3dshowroom](https://github.com/Teo0303/3dshowroom)**
>
> Contribute to Teo0303/3dshowroom development by creating an account on GitHub.

  
[https://teo0303.github.io/3dshowroom/](https://teo0303.github.io/3dshowroom/)

---

<div class="post-metadata">

**Author:** ![dharnil-dev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dharnil-dev/32/40522_2.png) [@dharnil-dev](https://discourse.threejs.org/u/dharnil-dev)\
**Post date:** [October 3, 2023, 7:39am UTC](https://discourse.threejs.org/t/rotate-camera-on-its-own-axis-on-mouse-drag/12314/4 "2023-10-03T07:39:38Z")

</div>

Hi @Azizbek_Jonibekov, did you find an answer to it by any chance?

---

<div class="post-metadata">

**Author:** ![jonybekov](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jonybekov/32/30298_2.png) [@jonybekov](https://discourse.threejs.org/u/jonybekov)\
**Post date:** [October 3, 2023, 3:25pm UTC](https://discourse.threejs.org/t/rotate-camera-on-its-own-axis-on-mouse-drag/12314/5 "2023-10-03T15:25:40Z")

</div>

Hi. Yes.

Here’s a gist: [First person camera experience · GitHub](https://gist.github.com/jonybekov/cc0ab1e679bd9221cace3c3ae98aa18f)