Wie man Normalen zur Oberfläche des Gegenstandes in three.js rendert

Question

fand ich the example in threejs.org, die Pfeile Normals zeichnet, ist es, was ich benötige. Aber Pfeile ist komplexiertes Objekt und von ArrowHelper erstellt. Ich schaute im Quellcode und fand die Methode 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); 

    } 

}; 

Ich versuchte Algorithmus immpliment zur Einstellung Rotation für Vector3 mit quaternion, aber ich habe immer noch norlams, die auf {x: 0, y: 0, z: 0} aussieht.

Und meine Frage ist: Wie ein Vektor zu berechnen, um eine normale Linie von der Oberfläche in dem Raum zu ziehen, um den gleichen picuter zu erhalten:

UPD:
I CylinderGeometry verwenden.

UPD2:
Ich habe es gelöst. Look at my codepen

Answer 1

Sie möchten die Scheitelpunktnormalen Ihres Gitters anzeigen.

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

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

three.js r.84