Three.js - 2つの図形を1つにまとめる？

Question

私はthree.jsの世界に新しいです... 私の質問は：1つの図形として2つの異なる図形を結合することはできますか？ 例えば、球と円柱を一緒に結合するとしますか？

Answer 1

はい、複数のオプションがあり、の種類：階層を経由して

1. あなたは、単に2つのジオメトリ・オブジェクトの頂点とメッシュをマージするGeometryUtilのmerge()機能によってadd()機能
2. を使用して別のメッシュを追加することができますメッシュ間のブール演算をサポートし、エクスポートする基本的な3Dエディタを使用して、
3. に変換します。 16が繰り返される

   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); 
   

   注意こと、従って細分割は、一つメッシュ（まともな外観のために）他に一致におけるレベル

   方法2.1 - を介し：

方法1はかなり単純ですLathe half-sphereシリンダをマージ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); 

私が現時点で対処できない問題の1つは、メッシュの内側にある面から来ています。理想的には、ノーマルを反転させてレンダリングしないようにするが、そのための迅速な解決策は見つけられていない。

3番目はかなりストレートです。ほとんどの3Dパッケージでは、メッシュに対してブール演算が可能です（たとえば、2つのメッシュをADD演算（meshA + meshB）と併合するなど）。 Blender（無料、opensource）に円柱と球を作成してみてください。これにはすでにthree.js輸出者が含まれています。または、3Dエディタまたは選択肢から結合されたメッシュの.objファイルをエクスポートし、convert_obj_threeスクリプトを使用することもできます。

更新

私はより直感的/より簡単かもしれないさらに別の方法を、見つけました。上記のブール演算を覚えていますか？

ちょうどそのためのJS素晴らしいライブラリがあり判明：Constructive Solid Geometryは：

チャンドラーPrallはCSG with three.jsを接続するにはいくつかの便利な機能を書きました。だから、CSGライブラリとthree.js wrapper for itで、あなたは単にこれを行うことができます（。余分な顔で何の問題/法線を反転させるの/ etc）

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