JS Fiddle: http://jsfiddle.net/Nfw9M/1/
I am currently delving into the world of matrix operations and need assistance with a particular problem related to mouse movement on a 3D object. Inside my THREE.Object3D, there are three cube meshes that can be rotated in various directions. My goal is to determine the normalized vector direction of the mouse movement as it clicks and drags across the object.
To visualize the issue, imagine a scenario where the object is rotated 90 degrees on the X axis. If a user were to drag from left to right across the face of the black cube, the result would differ from dragging on an unrotated object's face.
Based on my research, I believe the steps I need to follow are:
- Obtain the inverse matrix of the object group
- Calculate the difference between vectors of two mouse movements
- Multiply these vectors by the original inverse matrix
- Normalize the result
However, I have hit a roadblock in my progress. I have intersection code that seems to work correctly, but I am unsure about the values returned by object.point.
On mouse movement, my current code snippet looks like this:
function mouseMove(e) {
var hit = intersect(e);
console.log(hit);
if (!hit[0]) return false;
var point = hit[0].point;
if (_last) {
var p = new THREE.Vector3();
p.add(point);
p.sub(_last);
//I'm stuck at this point
}
_last = point;
}
This leads me to ponder whether it is viable to multiply a Vector3 and a Matrix4 together?
The task at hand appears quite intricate, and there are some gaps in my understanding hindering my progression. Any suggestions or guidance would be greatly appreciated!
Thank you for your help!