2017-06-01 7 views
0

j'ai chargé un polyèdre OBJ et Ive utilisé EdgesGeometry() pour extraire ses bords:Comment rendre les arêtes comme des cylindres?

var edges = new THREE.LineSegments(new THREE.EdgesGeometry(child.geometry), new THREE.LineBasicMaterial({color: 0x000000})); 

mais je voudrais rendre chaque bord en forme de cylindre avec un rayon configurable. Quelque chose comme ceci:

Dodecahedron with edges rendered as cylinders.

+0

** 1) ** Bienvenue sur StackOverflow! Veuillez prendre un moment pour lire [Comment poser une bonne question] (https://stackoverflow.com/help/how-to-ask), et envisager d'ajouter un [exemple minimal, complet et vérifiable] (https: // stackoverflow.com/help/mcve) à votre message. ** 2) ** Qu'avez-vous essayé jusqu'à présent? Ce que vous voulez, c'est comprendre ce que renvoie 'EdgesGeometry' et le convertir en une collection de cylindres et de sphères. Si vous pouvez nous dire quel problème spécifique vous rencontrez en faisant cela, nous serons en mesure de mieux vous aider. – TheJim01

+0

Solution possible: https://stackoverflow.com/questions/15316127/three-js-line-vector-to-cylinder – Radio

Répondre

0

Teasing picture ;)

Un solutuion personnalisable, que vous pouvez commencer à partir de:

var edgesGeom = new THREE.EdgesGeometry(dodecahedronGeom); //EdgesGeometry is a BufferGeometry 

var thickness = 0.25; // radius of a cylinder 

for (var i = 0; i < edgesGeom.attributes.position.count - 1; i+=2){ 

    // when you know that it's BufferGeometry, you can find vertices in this way 
    var startPoint = new THREE.Vector3(
    edgesGeom.attributes.position.array[i * 3 + 0], 
    edgesGeom.attributes.position.array[i * 3 + 1], 
    edgesGeom.attributes.position.array[i * 3 + 2] 
); 
    var endPoint = new THREE.Vector3(
    edgesGeom.attributes.position.array[i * 3 + 3], 
    edgesGeom.attributes.position.array[i * 3 + 4], 
    edgesGeom.attributes.position.array[i * 3 + 5] 
); 

    var cylLength = new THREE.Vector3().subVectors(endPoint, startPoint).length(); // find the length of a cylinder 
    var cylGeom = new THREE.CylinderBufferGeometry(thickness, thickness, cylLength, 16); 
    cylGeom.translate(0, cylLength/2, 0); 
    cylGeom.rotateX(Math.PI/2); 
    var cyl = new THREE.Mesh(cylGeom, new THREE.MeshLambertMaterial({color: "blue"})); 
    cyl.position.copy(startPoint); 
    cyl.lookAt(endPoint); // and do the trick with orienation 
    scene.add(cyl); 
} 

jsfiddle exemple