0

JS フィドル: http://jsfiddle.net/Nfw9M/1/

私は行列演算の複雑さを学んでおり、探している結果にはあまり進んでいないので、この質問についてはご容赦ください。

私が持っているのは、THREE.Object3D内部に 3 つのキューブ メッシュがあるものです。オブジェクト グループは任意の方向に任意に回転できますが、オブジェクトをクリックしてドラッグするときのマウスの動きの正規化されたベクトル方向を見つける必要があります。

説明するために、いくつかの画像を作成しました。このイメージでは、オブジェクトは X 軸で 90 度回転しています。ユーザーは黒い立方体の面を左から右にドラッグします。

ここに画像の説明を入力

これで私がしなければならないことは、オブジェクトがまったく回転されなかった場合にその動きがどうなるかを理解することです. この場合、ユーザーはグループの一番上の面を左から右にドラッグします。

ここに画像の説明を入力

私の研究から、私がする必要があるのは次のことだと思います：

  • グループの逆行列を取得する
  • 2 つのマウスの動きの間のベクトルの差を見つけます。
  • これらのベクトルを元の逆数に対して乗算します
  • ノーマライズ？

残念ながら、私は立ち往生しています。次の交差点コードがあります。

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 に答える