Three.js - 두 도형을 하나로 묶으시겠습니까?

Question

나는 three.js 세계에 새로운 ... 내 질문은 : 하나의 모양으로 두 개의 서로 다른 모양을 함께 바인딩 할 수 있습니까? 예를 들어 구형과 원통형을 하나로 결합 할 수 있습니까?

Answer 1

예, 여러 옵션이 있습니다,의 종류 : 계층 구조를 통해

1. 당신은 단순히 두 개의 기하학 오브젝트의 정점과 메시를 병합 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 꽤 정직 GeometryUtils Lathe half-sphere 및 실린더 병합

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

내가 현재 해결할 수없는 문제 중 하나는 메쉬 내부의 얼굴 때문입니다. 이상적으로는 노멀을 뒤집어 렌더링하지 않으려 고하지만,이를위한 빠른 해결책을 찾지 못했을 것입니다.

3 번째는 상당히 직설적입니다. 대부분의 3D 패키지는 메쉬에서 부울 연산을 허용합니다 (예 : 두 개의 메쉬를 ADD 연산 (meshA + meshB)과 병합). (무료, opensource)에 실린더와 구를 만들어보십시오.이 실린더에는 이미 three.js 내보내기가 있습니다. 또는 3d 편집기 나 선택 항목에서 병합 된 메쉬의 .obj 파일을 내보내고 convert_obj_three 스크립트를 사용할 수 있습니다.

업데이트

좀 더 직관적/쉬울 수 있습니다 또 다른 방법을 찾았습니다. 위에 언급 한 부울 연산을 기억하십니까?

는 멋진 JS 라이브러리는 단지에 대한이 밝혀 : Constructive Solid Geometry :

챈들러 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

세 개의 래퍼가 업데이트되었습니다.js r62, 여기에서 찾을 수 있습니다 : https://github.com/kraag22/csg-wrapper