How move camera position rotation to target

🌵 Needle Engine
1

How move transfrom position and rotation to target ?

2

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:

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 for more AI replies.
thread_u44KQ21ZwzzFmTxmO3IICGnX
Reply to this message to continue the conversation

3

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.

4

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:

    • Unity uses a left-handed coordinate system, meaning that in Unity, the Y-axis usually points up, and Z is the forward direction.
    • Three.js uses a right-handed coordinate system, where the Y-axis also points up but the Z-axis is considered the forward direction.
    • This difference can affect how Quaternions are interpreted when transferred directly.

  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:

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 for more AI replies.
thread_u44KQ21ZwzzFmTxmO3IICGnX
Reply to this message to continue the conversation

5

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?

6 
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);
    }
}
7

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?

8

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

9

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

10

Did you get it to work / is this resolved?

11

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

12

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