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

Question

我是three.js 世界的新手... 我的问题是：我可以将两个不同的形状绑定在一起作为一个形状吗？ 比如将球体和圆柱体绑定在一起？

Answer 1

有点，是的，有多种选择：

1. 通过层次结构您可以使用add() 函数简单地将一个网格添加到另一个网格
2. 通过 GeometryUtil 的 merge() 函数将两个 Geometry 对象的顶点和网格合并为一个
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 - 通过 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：

Chandler Prall 编写了一些方便的函数来连接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

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