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

Posted 2023-02-27

【中文标题】three.js - 网格组示例？ （THREE.Object3D() 高级）

【英文标题】：three.js - mesh group example? (THREE.Object3D() advanced)

【发布时间】：2011-12-20 14:40:13

【问题描述】：

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

拖动父级 相对于父元素旋转子元素 让父母轮换/翻译为孩子做正确的事

我唯一的背景是在第二人生中使用 LSL 来操作对象中的链接 prims。我在想我不想合并网格，因为我想保持对每个孩子的控制（悬停、纹理、旋转、缩放等）。

有什么好的教程吗？这是通过 THREE.Object3D() 实现的，是吗？

谢谢，丹尼尔

【参考方案1】：

拖动会有点棘手，因为您需要计算出鼠标在屏幕（屏幕空间）上的 x/y 位置在 3D 世界中的位置，然后您需要投射光线并检查它是否与要拖动的对象相交。我想这将是一个不同的问题。

设置对象层次结构相当简单。 正如您所暗示的，您将使用 THREE.Object3D 实例将对象嵌套到使用它的 add() 方法中。这个想法是，您将为具有几何形状的对象和 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 );

【讨论】：

那么，我可以这样添加多个“mesh”实例吗？我可以使用顶点着色器中定义的“gl_InstanceID”变量来引用它们吗？

看起来现在有一个可以构造的 THREE.Group 对象（THREE.WebGLRenderer 71）。

***.com/questions/10776495/…

【参考方案2】：

另一种方式，因为网格也可以是父级

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

或

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

mesh3 操纵所有网格，mesh1 操纵自己，mesh2，mesh2 操纵自己