# How move camera position rotation to target

**URL:** <https://forum.needle.tools/t/how-move-camera-position-rotation-to-target/2213>\
**Category:** 🌵 Needle Engine\
**Tags:** question\
**Created:** [January 28, 2025, 10:34am UTC](https://forum.needle.tools/t/how-move-camera-position-rotation-to-target/2213 "2025-01-28T10:34:17Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![oot4chi](https://forum.needle.tools/user_avatar/forum.needle.tools/oot4chi/32/3817_2.png) [@oot4chi](https://forum.needle.tools/u/oot4chi)\
**Post date:** [January 28, 2025, 10:34am UTC](https://forum.needle.tools/t/how-move-camera-position-rotation-to-target/2213/1 "2025-01-28T10:34:17Z")

</div>

How move transfrom position and rotation to target ?

---

<div class="post-metadata">

**Author:** ![needle-assistant](https://forum.needle.tools/user_avatar/forum.needle.tools/needle-assistant/32/3415_2.png) [@needle-assistant](https://forum.needle.tools/u/needle-assistant)\
**Post date:** [January 28, 2025, 10:34am UTC](https://forum.needle.tools/t/how-move-camera-position-rotation-to-target/2213/2 "2025-01-28T10:34:22Z")

</div>

To move the camera’s position and rotation to a target in Needle Engine, you can follow these steps in pseudocode:

1. Define your target object and camera.
2. Get the target’s position and rotation.
3. Interpolate the camera’s position and rotation towards the target’s position and rotation over time.

Here’s an example implementation:

```javascript
import { Camera, Vector3, Quaternion } from "@needle-tools/engine";

function moveCameraToTarget(camera, target, lerpFactor) {
    // Step 1: Get the target position and rotation
    const targetPosition = target.position.clone();
    const targetRotation = target.quaternion.clone();

    // Step 2: Interpolate camera position and rotation
    camera.position.lerp(targetPosition, lerpFactor);
    camera.quaternion.slerp(targetRotation, lerpFactor);
}

// Usage example
const camera = new Camera();
const target = { position: new Vector3(x, y, z), quaternion: new Quaternion(w, x, y, z) }; // substitute with your actual target
const lerpFactor = 0.1; // Adjust this value for smoother or quicker movement
moveCameraToTarget(camera, target, lerpFactor);

```

In this code:

- The `lerp` function is used for linear interpolation for position.
- The `slerp` function is used for spherical linear interpolation for rotation, providing a smooth transition.

Feel free to adjust the `lerpFactor` to achieve the desired speed of the movement and rotation.

If you have any specific requirements or versions for the project, please provide those details!

_1 replies left_ - **[Get a PRO license](https://needle.tools/pricing)** for more AI replies.  
_thread\_u44KQ21ZwzzFmTxmO3IICGnX_  
_Reply to this message to continue the conversation_

---

<div class="post-metadata">

**Author:** ![oot4chi](https://forum.needle.tools/user_avatar/forum.needle.tools/oot4chi/32/3817_2.png) [@oot4chi](https://forum.needle.tools/u/oot4chi)\
**Post date:** [January 28, 2025, 5:08pm UTC](https://forum.needle.tools/t/how-move-camera-position-rotation-to-target/2213/3 "2025-01-28T17:08:29Z")

</div>

I’m working on integrating camera positions and rotations between Unity and Three.js. However, I’ve noticed that the Quaternion values seem to be different when I transfer them directly from Unity to Three.js.

Here are the details:

- In Unity, I’m extracting the Quaternion using `transform.rotation`.
- In Three.js, I’m assigning the Quaternion to an object using `object.quaternion.copy()`.

The issue is that when the Quaternion from Unity is applied to an object in Three.js, the object’s rotation does not match what I see in Unity.

My question is:

1. Are Quaternion values in Unity and Three.js inherently different?
2. If so, how can I properly convert Unity Quaternions to match the Three.js coordinate system?

Additional context:

- Unity uses a **left-handed Y-up** coordinate system.
- Three.js uses a **right-handed Y-up** coordinate system.

Any guidance or best practices would be appreciated.

---

<div class="post-metadata">

**Author:** ![needle-assistant](https://forum.needle.tools/user_avatar/forum.needle.tools/needle-assistant/32/3415_2.png) [@needle-assistant](https://forum.needle.tools/u/needle-assistant)\
**Post date:** [January 28, 2025, 5:08pm UTC](https://forum.needle.tools/t/how-move-camera-position-rotation-to-target/2213/4 "2025-01-28T17:08:32Z")

</div>

Hello oot4chi!

You are correct that there are differences in how Unity and Three.js handle Quaternions due to the coordinate system they utilize.

1. **Quaternion Representation Difference** :

2. **Proper Conversion** :  
To convert Quaternions from Unity to Three.js, you need to adjust the axes accordingly. Here’s how you can do it:

```javascript
import { Quaternion } from "@needle-tools/engine";

// Function to convert Unity Quaternion to Three.js Quaternion
function convertUnityQuaternion(unityQuat) {
    // Convert (x, y, z, w) from Unity to Three.js
    const threeJsQuat = new Quaternion(
        -unityQuat.x, // Invert x for right-handed system
        unityQuat.y, // Keep y the same
        -unityQuat.z, // Invert z for right-handed system
        unityQuat.w // Keep w the same
    );
    return threeJsQuat;
}

// Usage example
const unityQuaternion = { x: 0, y: 0, z: 0, w: 1 }; // Replace with actual Unity quaternion
const threeJsQuaternion = convertUnityQuaternion(unityQuaternion);
object.quaternion.copy(threeJsQuaternion);

```

This conversion accounts for the axis differences by inverting the x and z components. Now, when you apply the converted Quaternion to a Three.js object, it should match the rotation you see in Unity.

Let me know if you need further assistance or specific examples!

_1 replies left_ - **[Get a PRO license](https://needle.tools/pricing)** for more AI replies.  
_thread\_u44KQ21ZwzzFmTxmO3IICGnX_  
_Reply to this message to continue the conversation_

---

<div class="post-metadata">

**Author:** ![Marcel\_Wiessler1](https://forum.needle.tools/user_avatar/forum.needle.tools/marcel_wiessler1/32/21_2.png) [@Marcel\_Wiessler1](https://forum.needle.tools/u/Marcel_Wiessler1)\
**Post date:** [January 28, 2025, 5:11pm UTC](https://forum.needle.tools/t/how-move-camera-position-rotation-to-target/2213/5 "2025-01-28T17:11:47Z")

</div>

Hi, how are you extracting/assigning or storing rotations in your scripts? When the scene is exported all rotations are converted to the three.js coordinate system (like the bot said).

Can you share more of your code and what you’re doing / trying to do?

---

<div class="post-metadata">

**Author:** ![oot4chi](https://forum.needle.tools/user_avatar/forum.needle.tools/oot4chi/32/3817_2.png) [@oot4chi](https://forum.needle.tools/u/oot4chi)\
**Post date:** [January 28, 2025, 6:10pm UTC](https://forum.needle.tools/t/how-move-camera-position-rotation-to-target/2213/6 "2025-01-28T18:10:56Z")

</div>

```auto
import { Behaviour, serializable } from "@needle-tools/engine";
import { Object3D } from "three";

export class MainManager extends Behaviour {
  
    @serializable(Object3D)
    public myCamera?: Object3D;//Main Camera

    @serializable(Object3D)
    public cameraTarget?: Object3D;

    setCam()
    {
        console.log("setCamPos");
        this.myCamera!.position.copy(this.cameraTarget!.position);
        this.myCamera!.quaternion.copy(this.cameraTarget!.quaternion);
    }
}

```

---

<div class="post-metadata">

**Author:** ![Marcel\_Wiessler1](https://forum.needle.tools/user_avatar/forum.needle.tools/marcel_wiessler1/32/21_2.png) [@Marcel\_Wiessler1](https://forum.needle.tools/u/Marcel_Wiessler1)\
**Post date:** [January 29, 2025, 8:51am UTC](https://forum.needle.tools/t/how-move-camera-position-rotation-to-target/2213/7 "2025-01-29T08:51:55Z")

</div>

That should work as you wrote it. The only thing to keep in mind is that in three.js `position` and `quaternion` are local space.

So if your cameraTarget is e.g. parented to a different object that’s maybe rotated or scaled it wouldnt work.

You can use `worldPosition` and `worldQuaternion` for that which we added with Needle Engine. Maybe that’s the issue you’re facing here?

---

<div class="post-metadata">

**Author:** ![oot4chi](https://forum.needle.tools/user_avatar/forum.needle.tools/oot4chi/32/3817_2.png) [@oot4chi](https://forum.needle.tools/u/oot4chi)\
**Post date:** [January 29, 2025, 5:27pm UTC](https://forum.needle.tools/t/how-move-camera-position-rotation-to-target/2213/8 "2025-01-29T17:27:37Z")

</div>

`worldPosition` `worldQuaternion` still not correct (but only camera transform) why ?

---

<div class="post-metadata">

**Author:** ![Marcel\_Wiessler1](https://forum.needle.tools/user_avatar/forum.needle.tools/marcel_wiessler1/32/21_2.png) [@Marcel\_Wiessler1](https://forum.needle.tools/u/Marcel_Wiessler1)\
**Post date:** [January 29, 2025, 6:55pm UTC](https://forum.needle.tools/t/how-move-camera-position-rotation-to-target/2213/9 "2025-01-29T18:55:22Z")

</div>

Are you using OrbitControls? Then you also need to set the OrbitControls’ target too.

See this post: [Issue with Camera Reset Functionality After Using Pan - #5 by marcel](https://forum.needle.tools/t/issue-with-camera-reset-functionality-after-using-pan/2212/5)

---

<div class="post-metadata">

**Author:** ![hybridherbst](https://forum.needle.tools/user_avatar/forum.needle.tools/hybridherbst/32/3416_2.png) [@hybridherbst](https://forum.needle.tools/u/hybridherbst)\
**Post date:** [February 3, 2025, 10:55am UTC](https://forum.needle.tools/t/how-move-camera-position-rotation-to-target/2213/10 "2025-02-03T10:55:47Z")

</div>

Did you get it to work / is this resolved?

---

<div class="post-metadata">

**Author:** ![oot4chi](https://forum.needle.tools/user_avatar/forum.needle.tools/oot4chi/32/3817_2.png) [@oot4chi](https://forum.needle.tools/u/oot4chi)\
**Post date:** [February 11, 2025, 1:57pm UTC](https://forum.needle.tools/t/how-move-camera-position-rotation-to-target/2213/11 "2025-02-11T13:57:29Z")

</div>

I will test it again but only bug with the camera (not OrbitControls )

---

<div class="post-metadata">

**Author:** ![Marcel\_Wiessler1](https://forum.needle.tools/user_avatar/forum.needle.tools/marcel_wiessler1/32/21_2.png) [@Marcel\_Wiessler1](https://forum.needle.tools/u/Marcel_Wiessler1)\
**Post date:** [February 11, 2025, 5:41pm UTC](https://forum.needle.tools/t/how-move-camera-position-rotation-to-target/2213/12 "2025-02-11T17:41:53Z")

</div>

Hi, could you clarify what bug you mean? Please provide a minimal bugreport so we can look into it