0

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 相乘吗？

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

谢谢！

4

1 回答 1

2

我想我已经解决了！

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

于 2013-09-19T19:52:43.880 回答