three.jsシーンのオブジェクトの位置を動的に取得する

Question

私はthreejsを初めて使用しています。

TransformControls.jsを使用して、すべてのXYZ軸でシーンを移動できるオブジェクトがあるシーンがあります。

マウスを使用してシーン内のオブジェクトを移動/移動すると、軸のいずれか（X、Y、Zなど）をクリックしてドラッグすると、シーン内のその特定のオブジェクトの更新されたX、Y、Z位置の座標を取得したいと思います。

私はmesh.position.set(0, 0, 0);を使用してシーンをレンダリングする前にオブジェクトの位置を設定しますが、シーン内のオブジェクトの動的な位置を取得する方法を見つけることはできません。

最終的に、変換操作後に更新された位置座標を保存し、ユーザーがページに戻ったりページを更新したときに、更新された位置のオブジェクトでシーンを再レンダリングします。

すべてのポインタは非常に役に立ちます。

は

Answer 1

THREE.TransformControlsを使用するには、いくつかの手順が必要です、ありがとうございました。

1. あなたTHREE.TransformControlsが
2. は、あなたがコントロールを取り付け

var xformControl = new THREE.TransformControls(camera, renderer.domElement); 
 
scene.add(xformControls); 
 
// assuming you add "myObj" to your scene... 
 
xformControl.attach(myObj); 
 
// and then later... 
 
xformControl.detatch();

を操作したいオブジェクトにアタッチ

は、あなたのシーンにそれを追加オブジェクトを作成しますオブジェクトに "gizmo"という操作を挿入しますcene。ギズモのさまざまな部分をドラッグすると、さまざまな種類の変換が実行されます。ギズモでパートを変形したら、mesh.positionに新しい位置を反映させる必要があります。明確にするため

追加情報：あなたはそれを移動するために「ギズモ」を使用するまで

オブジェクトの位置が更新されません。例： "ギズモは"（10、10、10）

で作成され

1. あなたのオブジェクトは（10、10、10）
2. xformControl.attach(yourObject)
3. のシーンであるあなたのオブジェクトはのままで（10、10、10）
4. 使用+ Y方向にオブジェクトを変換するために、 "ギズモ"
5. あなたのオブジェクトは現在更新された位置
6. console.log(yourObject.position.y > 10); // true
012を持っています