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