1

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

Cabbibo
  • 1,321
  • 3
  • 15
  • 30

1 Answers1

3

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

WestLangley
  • 92,014
  • 9
  • 230
  • 236
  • Wow 3 answers when I was only looking for 1! Thank you very much. Does the BackSide accomplish all the same goals as side = 2? Also I think you would love the Leap though, its implications for THREE.JS are QUITE astounding :) – Cabbibo Feb 02 '13 at 18:51
  • 1
    Oops. Typo. I meant THREE.DoubleSide. Updated answer. Also, avoid using numeral constants like '2'. – WestLangley Feb 02 '13 at 19:22
  • One More question, Perhaps this should be a new whole new stack overflow question, If it should be please let me know. The applyMatrix4 works EXACTLY how I want it ti (Thanks for saving me about 5 days of agony :) ) but whenever it is called, it also rotates the sphere itself (by redefining the position according to the rotation it adds to the rotation possibly)? sphere.geometry.vertices[i].applyMatrix4( rotatable.matrixWorld ); when called, adds to the rotation of the rotatable possibly? – Cabbibo Feb 02 '13 at 21:46
  • 1
    It is not exactly clear to me what you are doing, but try applying the matrix to a copy of the vertex. You can use `Vector3.copy()` or `Vector3.clone()`. – WestLangley Feb 02 '13 at 21:51
  • I'm sorry about how unclear it is, Its difficult because theres no way to show you the problem unless you have a leap :) I'll work on implementing that, but do you also have any suggestions for more reading on matricies (ideally in the THREE world) because I want to understand more about them, but its hard to find good reads about how they work with three... Thanks again for all your help! – Cabbibo Feb 02 '13 at 21:58
  • 1
    Best bets: see http://stackoverflow.com/questions/11966779/should-i-start-learning-webgl-or-use-three-js/11970687#11970687 for references, and study the three.js source code. – WestLangley Feb 02 '13 at 22:07