Three js copying rotation

Question

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

Mugen87 · Accepted Answer · 2020-12-28 15:25:06Z

1

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.

edited Dec 28, 2020 at 15:25

answered Dec 28, 2020 at 15:19

Mugen87

31.2k4 gold badges34 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dries Croons Over a year ago

Thanks for the reply! I thought about attaching the object, however that's not possible with react-three-fiber, since it moves the mesh outside of it's scope. I came up with the following [imgur.com/ueSlnGK](solution). Managed to even narrow it down to the final [imgur.com/pLkSNQe](solution).

Collectives™ on Stack Overflow

Three js copying rotation

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related