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合并车床半球和圆柱:

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(free,opensource)中创建一个圆柱体和一个球体,它已经有一个three.js导出器.或者,您可以从3d编辑器或选项中导出合并网格的.obj文件,并使用convert_obj_three脚本.

更新

我找到了另一种方法,可能更容易/更直观.还记得我上面提到的布尔运算吗？

事实证明,有一个非常棒的js库:构造性的几何体:

Chandler Prall写了一些方便的函数来连接CSG和three.js.因此,使用CSG库和它的three.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

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