Three.js - lier deux formes ensemble comme une seule?

Question

Je suis nouveau dans le monde three.js ... Ma question est la suivante: Puis-je lier deux formes différentes ensemble comme une forme? Par exemple relier une sphère et un cylindre ensemble?

Answer 1

Type, oui, il y a des options multiples:

1. via hiérarchie Vous pouvez simplement ajouter une maille à l'autre en utilisant la fonction add()
2. via merge() fonction de GeometryUtil fusionner les sommets et les mailles de deux objets Géométrie en un
3. en utilisant un éditeur 3D de base qui prend en charge les opérations booléennes entre les maillages et l'exportation.

Méthode 1 est assez simple:

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

Notez que 16 est répétée, de sorte que les subdivisions niveau dans une maille correspond à l'autre (pour un look décent)

Méthode 2.1 - via 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); 

Méthode 2.2 fusionner un Lathe half-sphere et un cylindre:

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

Le problème que je ne peux pas résoudre pour le moment vient des faces qui se trouvent à l'intérieur du maillage. Idéalement, les normaux seraient retournés afin qu'ils ne rendent pas, mais n'ont pas trouvé une solution rapide pour cela.

Le 3ème est assez simple. La plupart des packages 3D permettent un fonctionnement booléen sur des maillages (par exemple, fusionner deux maillages avec l'opération ADD (meshA + meshB)). Essayez de créer un cylindre et une sphère dans Blender (gratuit, opensource), qui a déjà un exportateur three.js. Vous pouvez également exporter un fichier .obj des maillages fusionnés à partir de votre éditeur ou choix 3D et utiliser le script convert_obj_three.

Mise à jour

J'ai encore trouvé une autre méthode, ce qui pourrait être plus facile/plus intuitive. Rappelez-vous les opérations booléennes que j'ai mentionnées ci-dessus?

Transforme là-bas est une bibliothèque impressionnante js juste pour ça: Constructive Solid Geometry:

Chandler Prall a écrit quelques fonctions pratiques pour se connecter CSG with three.js. Donc, avec la bibliothèque CSG et la three.js wrapper for it, vous pouvez simplement faire ceci:

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

Ce qui vous donne un bon résultat (pas de problème avec des visages supplémentaires/flipping Normales/etc.):

Answer 2

J'ai mis à jour l'emballage pour TROIS.js r62, vous pouvez le trouver ici: https://github.com/kraag22/csg-wrapper