Comment rendre des normales à la surface de l'objet dans trois.js

Question

J'ai trouvé the example dans threejs.org, qui dessine des flèches normales, c'est ce dont j'ai besoin. Mais les flèches sont des objets complexes et créées par ArrowHelper. J'ai regardé dans le code source et trouvé la méthode setDirection.

function setDirection(dir) { 

    // dir is assumed to be normalized 

    if (dir.y > 0.99999) { 

     this.quaternion.set(0, 0, 0, 1); 

    } else if (dir.y < - 0.99999) { 

     this.quaternion.set(1, 0, 0, 0); 

    } else { 

     axis.set(dir.z, 0, - dir.x).normalize(); 

     radians = Math.acos(dir.y); 

     this.quaternion.setFromAxisAngle(axis, radians); 

    } 

}; 

J'ai essayé de immpliment algorithme pour la mise en rotation pour Vector3 avec l'aide quaternion, mais je dois encore norlams qui regarde {x: 0, y: 0, z: 0}.

Et ma question est: Comment calculer un vecteur afin de tracer une ligne normale de la surface dans l'espace, afin d'obtenir le même picuter:

UPD:
J'utilise CylinderGeometry.

UPD2:
Je l'ai résolu. Look at my codepen

Answer 1

Vous souhaitez afficher les normales de vertex de votre maillage. Vous pouvez utiliser VertexNormalsHelper comme ceci:

var vnh = new THREE.VertexNormalsHelper(mesh, 1, 0xff0000); 
scene.add(vnh); 

https://threejs.org/docs/index.html#Reference/Helpers/VertexNormalsHelper

Three.js R.84