javascript - 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 相交值乘以对象的倒数矩阵

• 在鼠标移动时，从鼠标按下时设置的向量中减去 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 空间中的方向，就好像对象根本没有旋转一样。