three.jsによる方向制御ボックスの実装

大規模な3次元モデルの内部では、回転と並進操作のためのモデルは、時には頭がめまいを起こすことができ、南東と北西を見つけることができません。だから今日、彼らは方向制御ボックスの機能を達成するために、プロセスは困難ではない、主にいくつかの以前に学んだ数式は、効果は次のとおりです：

モデルを回転させるときは、左上のオリエンテーション・コントロール・ボックスを同期して回転させる必要があります。 オリエンテーション・コントローラーを扱う小さなシーンと、モデルが配置されている大きなシーンの2つのシーンを使用します。大きなシーンでは、カメラの視点をp1、カメラの位置をp2とすると、p2からp1へのベクトルを単位化するだけでよく、いわゆる単位化とは、方向を変えずに長さを1にすることです。

計算式は以下の通り：

v = (p2 - p1) / |p2 - p1

座標を式に代入すると、計算されたvが小さなシーンのカメラ位置となり、視点は常に原点に設定されます。

controls.addEventListener('change', function () {
    var c = camera.position;
    var b = c.clone().sub(controls.target);
    var foo = Math.sqrt(Math.pow(b.x, 0x2) + Math.pow(b.y, 0x2) + Math.pow(b.z, 0x2)) / 0x2;
    var A = new THREE.a(b.x / foo, b.y / foo, b.z / foo);
    smallCamera.position.set(A.x, A.y, A.z);
    smallCamera.bar(smallScene.position);
    smallCamera.obj();
});

changeイベントはthree.jsのOrbitControlsコントロールのイベントで、モデルの回転、パン、ズームイン、ズームアウトをリスンします。ここで1つ注意しなければならないのは、ベクトルの単位化の後、z軸の値が十分でない可能性があり、カメラの位置がボックスの内側にあるため、ここでは2しかありません。

これは大きなシーンを回転させるだけで、小さなシーンはリンケージに従って、ボックス操作の小さなシーンに続いて、大きなシーンも一緒にリンケージします。

計算式は以下の通り：

p2' = p1 + |p2-p1| * p3

また、変更イベントをリッスンし、データを処理します。

smallControls.addEventListener('change', function (foo) {
    var c = camera.position;
    var b = smallCamera.position;
    var obj = controls.target;
    var C = c.clone().sub(obj);
    var Foo = Math.sqrt(Math.pow(C.x, 0x2) + Math.pow(C.y, 0x2) + Math.pow(C.z, 0x2)) / 0x2;
    var A = obj.clone().add(new THREE.a(b.x * Foo, b.y * Foo, b.z * Foo));
    camera.position.set(A.x, A.y, A.z);
    camera.bar();
});