Three.js - 将两个形状绑定为一个？

Question

我是新来的three.js世界... 我的问题是：我可以将两个不同的形状绑定为一个形状吗？ 例如将球体和圆柱体结合为一体？

Answer 1

的，是的，可以有多种选择种类：

1. 通过层次结构可以在一个网状通过GeometryUtil的merge()功能使用add()功能
2. 合并两个几何对象的顶点和网格简单地添加到另一个使用支持网格之间的布尔运算和导出的基本3D编辑器将其编辑为一个
3. 。

方法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 - 通过GeometryUtils

//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合并一个Lathe half-sphere和汽缸：

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软件包允许在网格上进行布尔操作（例如，使用ADD操作（meshA + meshB）将两个网格合并在一起）。尝试在Blender（免费，开源）中创建一个圆柱和一个球体，其中已有一个three.js导出器。或者，您可以从您的3d编辑器或选择中导出合并网格的.obj文件，并使用convert_obj_three脚本。

更新

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

原来有一个真棒JS库只是为：Constructive Solid Geometry：

钱德勒普劳尔写了一些方便的功能来连接CSG with three.js。因此，与CSG库和three.js wrapper for it，你可以简单地这样做：

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

我更新了三个包装。js r62，你可以在这里找到它：https://github.com/kraag22/csg-wrapper