Convert coordinates of a child object to world coordinates

2
votes

I'm quite new to three.js and lacking some basic understanding of the coordinate systems obviously.

I have an Object3D "group" that has some children (planes). I use "group" to rotate the group of planes, which works fine. Now camera can move and parent object can rotate. One can click on the planes to select them. What I want now is to let the selected plane fly into the camera.

If I just move the plane to the camera position it flys in any direction but mostly not to the camera. Certainly because "group" seems to be the "world" for the child objects. If I move a plane along the z-axis the plane move along the z-axis of the parent.

I don't understand which coordinates I need to take (or transform) to move the plane bound to "group" in front of the camera.

Basically I demoed with three.js what famo.us did, just spent some two hours on it or so. I faked the wanted effect with an additional plane that is not grouped and which I can just move to camera without transformations. The demo is available here:

http://hwg.rattat.net/famo.html.

Would be nice if somebody could tell me how to get this working. I could still live with the fake, when I would be able to place the additional plane exactly over the selected plane.

Thanks in advance, Christian

1
three.js
Consider this alternate approach: do not rotate the group; keep its transform the identity. Instead, move/rotate the camera. Visually it will look the same, and mathematically it is easier. – WestLangley

1 Answers

4
votes

The question of converting local coordinates to world coordinates has been addressed at THREE.js: Calculate world space position of a point on an object . There might also be helping information at how to: get the global/world position of a child object .