三。js-将两种形状绑定在一起？

Question

我是The Three.js World的新手...我的问题是：我可以将两种不同的形状绑定为一种形状吗？例如，将球和圆柱体绑定在一起？

Answer 1

是的，有多种选择：

1. 通过层次结构，您只需使用层次结构 add() 功能
2. 通过几何尤特替尔的 merge() 将两个几何对象的顶点和网格合并为一个功能
3. 使用支持网格和导出之间的布尔操作的基本3D编辑器。

方法1非常简单：

var sphere = new THREE.Mesh( new THREE.SphereGeometry(100,16,12),new THREE.MeshLambertMaterial( { color: 0x2D303D, wireframe: true, shading: THREE.FlatShading } ));
                var cylinder = new THREE.Mesh(new THREE.CylinderGeometry(100, 100, 200, 16, 4, false ),new THREE.MeshLambertMaterial( { color: 0x2D303D, wireframe: true, shading: THREE.FlatShading } ));
                cylinder.position.y = -100;
                scene.add(sphere);
                scene.add(cylinder);

请注意，重复16个，因此一个网格中的细分级别与另一个网格匹配（以便于体面的外观）

方法2.1-通过几何图尔

//make a sphere
                var sg = new THREE.SphereGeometry(100,16,12);
                //make cylinder - ideally the segmentation would be similar to predictable results
                var cg = new THREE.CylinderGeometry(100, 100, 200, 16, 4, false );
                //move vertices down for cylinder, so it maches half the sphere - offset pivot
                for(var i = 0 ; i < cg.vertices.length; i++) cg.vertices[i].position.y -= 100;
                //merge meshes
                THREE.GeometryUtils.merge(sg,cg);
                var mesh = new THREE.Mesh( sg,new THREE.MeshLambertMaterial( { color: 0x2D303D, wireframe: true, shading: THREE.FlatShading } ));
                scene.add(mesh);

方法2.2合并 车床半球 和一个圆柱体：

var pts = [];//points array
                var detail = .1;//half-circle detail - how many angle increments will be used to generate points
                var radius = 100;//radius for half_sphere
                var total = Math.PI * .51;
                for(var angle = 0.0; angle < total ; angle+= detail)//loop from 0.0 radians to PI (0 - 180 degrees)
                    pts.push(new THREE.Vector3(0,Math.cos(angle) * radius,Math.sin(angle) * radius));//angle/radius to x,z
                var lathe = new THREE.LatheGeometry( pts, 16 );//create the lathe with 12 radial repetitions of the profile
                //rotate vertices in lathe geometry by 90 degrees
                var rx90 = new THREE.Matrix4();
                rx90.setRotationFromEuler(new THREE.Vector3(-Math.PI * .5,0,0));
                lathe.applyMatrix(rx90);
                //make cylinder - ideally the segmentation would be similar for predictable results
                var cg = new THREE.CylinderGeometry(100, 100, 200, 16, 4, false );
                //move vertices down for cylinder, so it maches half the sphere
                for(var i = 0 ; i < cg.vertices.length; i++) cg.vertices[i].position.y -= 100;
                //merge meshes
                THREE.GeometryUtils.merge(lathe,cg);
                var mesh = new THREE.Mesh( lathe, new THREE.MeshLambertMaterial( { color: 0x2D303D, wireframe: true, shading: THREE.FlatShading } ) );
                mesh.position.y = 150;
                scene.add(mesh);

我目前无法解决的一个问题来自网眼内部的面孔。理想情况下，这些人会变成正常的，因此它们不会渲染，但没有找到快速解决方案。

第三次相当直接。大多数3D软件包都允许在网格上进行布尔操作（例如将两个网眼与添加操作（MESHA + MESHB）合并在一起）。尝试创建一个圆柱体和一个球 搅拌机（免费，OpenSource），它已经有一个 三人 出口商。另外，您可以从3D编辑器或选择中导出合并网格的.OBJ文件并使用 convert_obj_three 脚本。

更新

我发现了另一种方法，这可能更容易/更直观。还记得我上面提到的布尔操作吗？

原来有一个很棒的JS库： 建设性实体几何形状:

钱德勒·普拉尔（Chandler Prall）写了一些方便的功能来连接 CSG带有三级. 。因此，使用CSG库和 Thrix js包装器, ，您可以简单地做到这一点：

var cylinder = THREE.CSG.toCSG(new THREE.CylinderGeometry(100, 100, 200, 16, 4, false ),new THREE.Vector3(0,-100,0));
var sphere   = THREE.CSG.toCSG(new THREE.SphereGeometry(100,16,12));
var geometry = cylinder.union(sphere);
var mesh     = new THREE.Mesh(THREE.CSG.fromCSG( geometry ),new THREE.MeshNormalMaterial());

这给您带来了一个不错的结果（额外的面孔/翻转正：等等没有问题）：

Answer 2

我更新了3.js R62的包装器，您可以在这里找到它： https://github.com/kraag22/csg-wrapper