# Method to make camera simulate head move

**URL:** <https://discourse.threejs.org/t/method-to-make-camera-simulate-head-move/60391>\
**Category:** Questions\
**Tags:** camera\
**Created:** [January 17, 2024, 1:44am UTC](https://discourse.threejs.org/t/method-to-make-camera-simulate-head-move/60391 "2024-01-17T01:44:33Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![fy50167](https://avatars.discourse-cdn.com/v4/letter/f/ec9cab/32.png) [@fy50167](https://discourse.threejs.org/u/fy50167)\
**Post date:** [January 17, 2024, 1:44am UTC](https://discourse.threejs.org/t/method-to-make-camera-simulate-head-move/60391/1 "2024-01-17T01:44:33Z")

</div>

Hello,  
I’m a beginner in three.js working with react-three-fiber and I’ve noticed that by default, the orbital controls essentially rotate the camera position around a given a point. What I’d like to achieve instead is controls that emulate real-life head movement, where the camera would be fixed in place and the controls would only change the direction that it’s facing. Is there any way to achieve this? I’ve tried disabling pan and zoom but that didn’t seem to achieve the desired effect.

```javascript
const OrbitCameraControls = () => {
    const {camera, gl} = useThree();
    useEffect(() => {
        const controls = new OrbitControls(camera, gl.domElement);
        controls.enablePan = false;  
        controls.enableZoom = false; 
        return () => {
            controls.dispose();
        }
    }, [camera, gl]);
    return null
}

```

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [January 17, 2024, 2:20am UTC](https://discourse.threejs.org/t/method-to-make-camera-simulate-head-move/60391/2 "2024-01-17T02:20:04Z")

</div>

set the controls.target.copy(camera.position) (or wherever you want the head to be…)

then set controls.minDistance = controls.maxDistance = 0; or maybe .001

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [January 17, 2024, 7:25am UTC](https://discourse.threejs.org/t/method-to-make-camera-simulate-head-move/60391/3 "2024-01-17T07:25:28Z")

</div>

Drei has presentation controls [GitHub - pmndrs/drei: 🥉 useful helpers for react-three-fiber](https://github.com/pmndrs/drei#presentationcontrols)

> **[Bouncy watch - CodeSandbox](https://codesandbox.io/s/qyz5r)**
>
> Custom springy controls using use-gesture and react-spring.

---

<div class="post-metadata">

**Author:** ![fy50167](https://avatars.discourse-cdn.com/v4/letter/f/ec9cab/32.png) [@fy50167](https://discourse.threejs.org/u/fy50167)\
**Post date:** [January 19, 2024, 8:30am UTC](https://discourse.threejs.org/t/method-to-make-camera-simulate-head-move/60391/4 "2024-01-19T08:30:38Z")

</div>

Presentation controls wasn’t quite what I was working for but I was able to use FirstPersonControls from the helpers listed in the drei documentation to achieve the desired effect.