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

JS小提琴：

在这个问题上请耐心听我说，因为我正在学习矩阵运算的复杂性，而且还没有达到我想要的结果

我有一个

3.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);
}

这可以正常工作，但我不明白返回的

对象.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;
}

我能把向量3和矩阵4相乘吗

我认为我要做的是相当复杂的，而且我在知识上有一些差距，使我无法完成任务。我非常感谢您的指导

---

谢谢

我想我已经解决了

JS小提琴：

我在intersect代码中缺少

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

步骤如下：

• 获取对象矩阵的逆矩阵
• 将矢量3相交转换为矢量4
• 将矢量4相交值乘以对象的倒数 母体
• 在mousemove上，从mousedown设置的矢量中减去矢量4

  _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空间方向，就好像它根本没有旋转一样