तीन.जेएस - दो आकार एक साथ बांधें?

Question

मैं तीन.जेएस दुनिया में नया हूं ... मेरा सवाल है: क्या मैं एक आकार के रूप में दो अलग-अलग आकृतियों को एक साथ बांध सकता हूं? उदाहरण के लिए बाध्यकारी क्षेत्र और सिलेंडर एक के रूप में एक साथ?

Answer 1

की, हाँ, एक से अधिक विकल्प हैं प्रकार:

पदानुक्रम के माध्यम से
1. आप बस add() समारोह
2. का उपयोग कर GeometryUtil के merge() समारोह के माध्यम से कोने और दो ज्यामिति वस्तुओं के meshes मर्ज करने के लिए एक से दूसरे जाल में जोड़ सकते हैं एक
3. एक मूल 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); 

एक समस्या जो मैं इस समय संबोधित नहीं कर सकता वह जाल के अंदर के चेहरे से आता है। आदर्श रूप से उनको मानदंडों को फ़्लिप किया जाएगा ताकि वे प्रस्तुत न करें, लेकिन इसके लिए त्वरित समाधान नहीं मिला है।

तीसरा काफी सीधे आगे है। अधिकांश 3 डी पैकेज मेलेस पर बूलियन ऑपरेशन की अनुमति देते हैं (उदाहरण के लिए एडीडी ऑपरेशन (मेषए + मेषबी) के साथ दो मेष विलय करना)। Blender (फ्री, ओपनसोर्स) में एक सिलेंडर और गोलाकार बनाने का प्रयास करें, जिसमें पहले से ही three.js निर्यातक है। वैकल्पिक रूप से आप अपने 3 डी संपादक या पसंद से मर्ज किए गए मेष की .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()); 

जो तुम एक अच्छा परिणाम देता है (अतिरिक्त चेहरे/flipping normals/आदि के साथ कोई समस्या नहीं।):

Answer 2

मैंने तीन के लिए रैपर अपडेट किया।जेएस आर 62, आप इसे यहां पा सकते हैं: https://github.com/kraag22/csg-wrapper