Three.JS提升学习4:几何体对象组合

时间:2022-05-06 04:22:16

对象组合

sphere = createMesh(new THREE.SphereGeometry(5, 10, 10));
cube = createMesh(new THREE.BoxGeometry(6, 6, 6));

group = new THREE.Object3D();
group.add(sphere);
group.add(cube);

scene.add(group);

这样就可以对group进行position或rotation等操作。
其中new THREE.Object3D()也可以使用new THREE.Group()代替。

当对象进行旋转时,会绕着组的中心旋转。 可以旋转一个辅助箭头来看到这个效果。

       var arrow = new THREE.ArrowHelper(new THREE.Vector3(0,1,0),group.position,10,0x0000ff);
scene.add(arrow);

多个网格合并成一个网格

少量物体的时候可以使用分组来处理网格,对象非常多的时候,性能会成为瓶颈,因为每个对象还是独立的,需要分别进行处理和渲染。
使用THREE.Geometry.merge()函数,可以将多个几何体合并起来创建一个联合体。

示例:

                // add a large number of cubes
if (controls.combined) {
var geometry = new THREE.Geometry();
for (var i = 0; i < controls.numberOfObjects; i++) {
var cubeMesh = addcube();
cubeMesh.updateMatrix();
geometry.merge(cubeMesh.geometry, cubeMesh.matrix);
}
scene.add(new THREE.Mesh(geometry, cubeMaterial));

} else {
for (var i = 0; i < controls.numberOfObjects; i++) {
scene.add(controls.addCube());
}
}

当对象Merge后,我们没办法再对每个对象单独控制。

示例效果:
Three.JS提升学习4:几何体对象组合