web-dev-qa-db-ja.com

three.js-メッシュグループの例? (THREE.Object3D()高度)

子メッシュを親にグループ化/リンクする方法を理解しようとしています。私ができるようにしたい:

  • 親をドラッグ
  • 子要素を親に対して相対的に回転させます
  • 親の回転/翻訳に子供のための正しいことをさせる

これに関する私の唯一の背景は、Second LifeでLSLを使用して、オブジェクト内のリンクされたプリムを操作することです。各子の制御(ホバー、テクスチャ、回転、スケーリングなど)を維持したいので、メッシュをマージしたくないと考えています。

これに関する良いチュートリアルはありますか?これはTHREE.Object3D()で実現されますか?

ありがとう、ダニエル

36
Daniel Smith

画面上のマウスのx/y位置(画面スペース)が3Dワールドのどこにあるかを調べる必要があるため、ドラッグはもう少し難しくなります。その後、光線を投じて確認する必要があります。ドラッグするオブジェクトと交差します。これは別の質問になると思います。

オブジェクト階層の設定は非常に簡単です。ほのめかしたように、THREE.Object3Dインスタンスを使用して、オブジェクトをネストしてadd()メソッドを使用します。アイデアは、ジオメトリを持つオブジェクトと、オブジェクトをネストするだけのObject3DインスタンスにMeshを使用するというものです。 canvas_geometry_hierarchy サンプルから始めることをお勧めします。

興味深い部分は次のとおりです。

group = new THREE.Object3D();//create an empty container
group.add( mesh );//add a mesh with geometry to it
scene.add( group );//when done, add the group to the scene
58
George Profenza

別の方法、メッシュも親になることができるため

meshParent.add(meshChild1);
meshParent.add(meshChild2);
scene.add(meshParent);

または

mesh1.add(mesh2);
mesh3.add(mesh1);
scene.add(mesh3);

mesh3はすべてのメッシュを操作し、mesh1はそれ自体を操作し、mesh2、mesh2は自身を操作します

14
atom