Three.js 计算鼠标在组上移动的归一化方向答案

【问题标题】：Three.js Calculate Normalized Direction of Mouse Movement Over a GroupThree.js 计算鼠标在组上移动的归一化方向
【发布时间】：2013-09-18 21:23:54
【问题描述】：

JS 小提琴：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 相乘吗？

我认为我正在尝试做的事情相当复杂，而且我的知识存在一些空白，无法完成任务。非常感谢任何指导。

谢谢！

【问题讨论】：

标签： javascript 3d three.js

【解决方案1】：

我想我已经解决了！

JS 小提琴：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 相交值乘以对象的倒数矩阵

在 mousemove 时，从 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 空间中的方向，就好像它根本没有旋转一样。

【讨论】：