Three.js计算组上鼠标移动的标准化方向

Question

JS Fiddle ：http://jsfiddle.net/Nfw9M/1/

请问我这个问题，因为我正在学习矩阵运算的复杂性，并且在我正在寻找的结果中没有取得很大进展。

我所拥有的是THREE.Object3D里面有3个立方体网格物体。对象组可以在任何方向任意旋转，但我需要找到鼠标移动的标准化矢量方向，只需单击并拖动对象。

为了说明，我创建了一些图像。在此图像中，对象在X轴上旋转90度。用户将在黑色立方体的表面上从左向右拖动。

我需要做的是弄清楚如果物体完全没有旋转那么运动会是什么。在这种情况下，用户将在组的最顶层左侧向左拖动。

从我的研究中，我认为我需要做的是：

• 获取小组的逆矩阵
• 找出两次鼠标移动之间矢量的差异。
• 将这些向量与原始逆数相乘
• 规范化？

不幸的是，我被困住了。我有以下交叉码：

function intersect(e) {
    _vector.set((e.pageX / window.innerWidth) * 2 - 1, -(e.pageY / window.innerHeight) * 2 + 1, 0.5);
    _ray.set(_camera.position, _vector.sub(_camera.position).normalize());
    return _ray.intersectObjects(_cube.children);
}

这种方式正常，但我不明白返回的object.point的值与之相关。

我的鼠标移动代码是：

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);

        //this is where I am stuck
    }

    _last = point;
}

我甚至可以将Vector3和Matrix4相乘吗？

我认为我要做的事情相当复杂，而且我的知识存在一些差距，使我无法完成任务。我真的很感激任何指导。

谢谢！

Answer 1

我想我已经解决了！

JS Fiddle ：http://jsfiddle.net/Nfw9M/2/

我在交叉码中缺少unprojectVector。

function intersect(e) {
    _vector.set((e.pageX / window.innerWidth) * 2 - 1, -(e.pageY / window.innerHeight) * 2 + 1, 0.5);
    _projector.unprojectVector(_vector, _camera);
    _ray.set(_camera.position, _vector.sub(_camera.position).normalize());
    return _ray.intersectObjects(_cube.children);
}

步骤是：

• 获取对象矩阵的反转
• 将Vector3交叉转换为Vector4
• 将Vector4相交值乘以对象的倒数 基质

• 在鼠标移动时，从mousedown中的一组中减去Vector4。

  _inverse.getInverse(_cube.matrix);
  _v4.set(point.x, point.y, point.z, 1);
  _v4.applyMatrix4(_inverse);
  
  var v4 = new THREE.Vector4(_last.x, _last.y, _last.z, 1); //could avoid new here
  v4.sub(_v4);
  

随着时间的推移观察v4处的变化，可以看到鼠标在物体上移动的x，y或z空间方向，就像它根本没有旋转一样。