CODEWITHSUNDEEP
three.jsquaternionsreact-three-fiber
Dries Croons
Dries Croons

Reputation: 19

Three js copying rotation

I'm breaking my head over 3d rotations for a vr game I'm working on.

https://i.sstatic.net/Oo4Vu.jpg

In video 1: I set the helper block equal to the group position and quaternion. If I rotate the group, with my controller, the position of the black helper that I set with just copying the quaternion and position is fine.

However, in video 2, when I offset the helper (black block) with the local position of the first child (the one above it from video 1), the initial position is fine, but when I start rotating the group and try syncing the position and quaternion, there is an offset I seem to be missing.

Any idea what the correct terminology is how I can google this and learn more about this? Or any idea on how to fix this?

Edit: managed to fix this! Came up with this solution: https://i.sstatic.net/GoyQf.jpg

I was able to narrow it down to this: https://i.sstatic.net/kaLm2.jpg

Upvotes: 1

Views: 276

Answers (1)

Mugen87
Mugen87

Reputation: 31026

The topic you are looking for is 3D transformation hierarchy. Meaning the idea to specify transformations (translation, rotation and scale) of 3D objects relative to each-other. Such a system makes it necessary to distinct between different coordinate spaces (like local or world space).

You can add the helper to the object so it will automatically inherit all 3D transformations. In this way, you don't have to bother around with copying transformations at all.

If you don't want to do this for some reasons, you have to extract transformation data in world space. In context of rotation, three.js provides Object3D.getWorldQuaternion() for this task.

Upvotes: 1

Related Questions