# Drag camera around and move

**URL:** <https://discourse.threejs.org/t/drag-camera-around-and-move/41373>\
**Category:** Questions\
**Tags:** controls, camera\
**Created:** [August 13, 2022, 3:08pm UTC](https://discourse.threejs.org/t/drag-camera-around-and-move/41373 "2022-08-13T15:08:54Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![TronIsHere](https://avatars.discourse-cdn.com/v4/letter/t/c4cdca/32.png) [@TronIsHere](https://discourse.threejs.org/u/TronIsHere)\
**Post date:** [August 13, 2022, 3:08pm UTC](https://discourse.threejs.org/t/drag-camera-around-and-move/41373/1 "2022-08-13T15:08:54Z")

</div>

hey guys I want a first-person camera but it moves by dragging… some thing like this:

> **[A-Frame – Make WebVR](https://aframe.io/examples/showcase/sky/)**
>
> A web framework for building virtual reality experiences. Make WebVR with HTML and Entity-Component. Works on Vive, Rift, desktop, mobile platforms.

as you can see it’s not orbit-control cause it’s not looking at 1 object and you can move around, do we have some formula for camera rotation only by dragging?  
i did manage to get here but i am moving the camera by mouse move which is not I wanted but can’t seem to work out this to drag for camera rotation

```javascript
    const xh = this.input_.current_.mouseXDelta / window.innerWidth;
    const yh = this.input_.current_.mouseYDelta / window.innerHeight;
    console.log(xh)
    this.phi_ += -xh /9;
    this.theta_ = clamp(this.theta_ + -yh /9, -Math.PI / 3, Math.PI / 3);

    const qx = new THREE.Quaternion();
    qx.setFromAxisAngle(new THREE.Vector3(0, 1, 0), this.phi_);
    const qz = new THREE.Quaternion();
    qz.setFromAxisAngle(new THREE.Vector3(1, 0, 0), this.theta_);

    const q = new THREE.Quaternion();
    q.multiply(qx);
    q.multiply(qz);

    this.rotation_.copy(q);

```

this is my mouse information in input\_

```javascript
    this.current_.mouseX = e.pageX - window.innerWidth / 2;
    this.current_.mouseY = e.pageY - window.innerHeight / 2;

    if (this.previous_ === null) {
      this.previous_ = { ...this.current_ };
    }
    this.current_.mouseXDelta = this.current_.mouseX - this.previous_.mouseX;
    this.current_.mouseYDelta = this.current_.mouseY - this.previous_.mouseY;

```

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [August 13, 2022, 3:24pm UTC](https://discourse.threejs.org/t/drag-camera-around-and-move/41373/2 "2022-08-13T15:24:21Z")

</div>

What about this  
[Edit fiddle - JSFiddle - Code Playground](https://jsfiddle.net/seanwasere/kqvnjyw2/)

---

<div class="post-metadata">

**Author:** ![TronIsHere](https://avatars.discourse-cdn.com/v4/letter/t/c4cdca/32.png) [@TronIsHere](https://discourse.threejs.org/u/TronIsHere)\
**Post date:** [August 14, 2022, 12:28pm UTC](https://discourse.threejs.org/t/drag-camera-around-and-move/41373/3 "2022-08-14T12:28:59Z")

</div>

hey @seanwasere thank you for your reply

but in the end, I want to move the camera according to the place user is looking, like an fps camera when you look right and press W you move towards that location… I don’t think I can achieve it with Orbit-controller? can I?

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [August 14, 2022, 12:44pm UTC](https://discourse.threejs.org/t/drag-camera-around-and-move/41373/4 "2022-08-14T12:44:24Z")

</div>

Maybe [PointerLockControls](https://threejs.org/docs/#examples/en/controls/PointerLockControls) is what you want.