How to Find global position of objects in a rotating scene THREE.JS

Question

I am working on a 3D mesh manipulator using this : http://leapmotion.com. So far, I have been able manipulate the points just fine, by 'grabbing' and moving them, however I now want to be able to rotate the mesh and work on the opposite face. What I have done is add an extra object that is called 'rotatable' as Shown below:

scene=new THREE.Scene();
camera = new THREE.PerspectiveCamera(70,window.innerWidth/window.innerHeight,1,8000)
renderer=new THREE.WebGLRenderer( { clearColor: 0x000000, clearAlpha: 1, maxLights:5 } )


//This is the 'Mesh Scene'
rotatable = new THREE.Object3D()
scene.add(rotatable)


//Mesh we are altering
var material = new THREE.MeshNormalMaterial()
material.side=2

var geom = new THREE.SphereGeometry(200,10,10); 
var sphere = new THREE.Mesh(geom, material)

rotatable.add(sphere)

I am then trying to change the vertices of this sphere, but to do so I need to do a 'collision test' in order to see if the vertex is being 'grabbed' This involves check the vertex position and see if it coincides with one of your finger position (psuedoCode below)

if(finger.x == vertex.x && finger.y == vertex.y && finger.z == vertex.z){
    vertex.grabbed = true 
}

This works fine when the rotatable's rotation is zero, however when it starts to rotate, the collision test will still be testing for the unrotated vertex position (which makes sense). My question is how to find the position of the vertex in its 'scene / global' position. The only way I can think of doing this so far is to calculate the rotation of the 'rotatable' and use this vector to calculate the new vertex position.

I know nothing about math, so this may not be the way to go, and even if it is I will have to struggle through it so hard that I won't ever know if I'm just doing the math incorrectly, or this isn't the way I should go about calculating it. Obviously I'm willing to go through this work, but just want to make sure this is the way to do it, rather then an other simpler method.

If there are any other questions about the code, please let me know, and Thanks in advance for your time!

Isaac

Answer 1

To get the world position of a vertex specified in local coordinates, apply the object's world transform to the vertex like so:

vertex.applyMatrix4( object.matrixWorld );

(I am not familiar with leapmotion, so hopefully it does not impact this answer.)

Tip: maxLights is no longer required. And it is best to avoid material.side = 2. Use material.side = THREE.DoubleSide instead.

You can find the constants here: https://github.com/mrdoob/three.js/blob/master/src/Three.js

three.js r.55