three.js - 网格组示例？（THREE.Object3D() 高级）

Question

我正在尝试理解如何将子网格分组/链接到父级。我希望能够：

• 拖动父级
• 相对于父级旋转子元素
• 使父级的旋转/平移对子元素生效

我唯一的背景是在Second Life中使用LSL来操作对象中链接的基元。我认为我不想合并网格，因为我想保持对每个子对象的控制（悬停，纹理，旋转，缩放等）。

是否有任何好的教程？这可以通过THREE.Object3D()实现，对吗？

谢谢，丹尼尔

- Daniel Smith

Answer 1

拖拽会有些棘手，因为您需要确定屏幕空间中鼠标的x/y位置将在三维世界中的哪里，然后您需要投射一条射线并检查是否与要拖动的对象相交。我认为这将是另一个问题。 设置物体层次结构相当简单。 正如您所暗示的那样，您将使用THREE.Object3D实例将对象嵌套进去，使用其< strong> add()方法。想法是对于具有几何形状的对象，您将使用Mesh，而对于仅需嵌套元素的情况，则使用Object3D实例。

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

更新

正如Nick Desaulniers和escapedcat指出的那样，THREE.Group现在提供了所需的功能。附带的代码示例：

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );

const cubeA = new THREE.Mesh( geometry, material );
cubeA.position.set( 100, 100, 0 );

const cubeB = new THREE.Mesh( geometry, material );
cubeB.position.set( -100, -100, 0 );

//create a group and add the two cubes
//These cubes can now be rotated / scaled etc as a group
const group = new THREE.Group();
group.add( cubeA );
group.add( cubeB );

scene.add( group );

- George Profenza

---

那么，我可以用这种方式添加多个“网格”实例吗？我能否使用我的顶点着色器中定义的“gl_InstanceID”变量引用它们？ - Jack

现在似乎有一个THREE.Group对象可以构建（THREE.WebGLRenderer 71）。 - Nick Desaulniers

https://dev59.com/5mgv5IYBdhLWcg3wMN-0 - escapedcat

Answer 2

还有一种方法，因为网格也可以是父级。

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

或者

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

mesh3 操纵所有网格，mesh1操纵自身和mesh2，mesh2操纵自身

- atom