我Mesh
嵌套了Object3D
。我想要做的是在拖动过程中旋转x和y轴上的Object3D
,然后在释放时将Object3D
旋转重置为0,0,0,将其旋转到内部Mesh
。
我的方法可能完全错误,但它似乎适用于第一次运动,但在此之后就会中断。我认为它可能与Eueler订单有关。
我正在使用的代码是:
function mouseDown(e) {
hold.x = e.pageX;
hold.y = e.pageY;
window.addEventListener('mousemove', mouseMove);
}
function mouseMove(e) {
var diffX = e.pageX - hold.x;
var diffY = e.pageY - hold.y;
object.rotation.x = (diffY * 0.25) * RADIAN;
object.rotation.y = (diffX * 0.25) * RADIAN;
}
function mouseUp() {
window.removeEventListener('mousemove', mouseMove);
cube.rotation.x += object.rotation.x;
cube.rotation.y += object.rotation.y;
object.rotation.x = 0;
object.rotation.y = 0;
}
我还制作了一个jsfiddle来演示确切的问题:http://jsfiddle.net/BJaju/4/
答案 0 :(得分:4)
要将父母的世界转换转移给孩子,您需要致电
child.applyMatrix( parent.matrixWorld );
所以在你的情况下,它将是
function mouseUp() {
window.removeEventListener('mousemove', mouseMove);
cube.applyMatrix( object.matrixWorld );
object.rotation.x = 0;
object.rotation.y = 0;
}
小提琴:http://jsfiddle.net/BJaju/5/
three.js r.59
答案 1 :(得分:0)
我能够找到使用Quaternions的解决方案!
我有两个单独的转换,如:baseQuaternion = (new THREE.Quaternion).setFromEuler(new THREE.Euler(-Math.PI / 2, 0, -Math.PI / 2 , 'XYZ'))
当相乘时,它们会合并并组合效果。 myMesh.quaternion = baseQuaternion.clone().multiply((new THREE.Quaternion).setFromEuler(...
此视频帮助:https://www.udacity.com/course/viewer#!/c-cs291/l-124106599/m-175393413