three.js에서 객체의 표면에 법선을 렌더링하는 방법

Question

나는 화살표가 법선을 그리는 the example을 threejs.org에서 찾았습니다. 필요한 부분입니다. 그러나 화살표는 복잡한 객체이며 ArrowHelper에 의해 생성됩니다. 소스 코드를보고 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); 

    } 

}; 

나는 사원 수를 사용하여 Vector3에 대한 회전을 설정하는 알고리즘을 immpliment하려고하지만, 난 여전히 {x: 0, y: 0, z: 0}에 보이는 norlams 있습니다.

그리고 내 질문은 :

UPD : 나는 CylinderGeometry를 사용
같은 picuter을 얻기 위해, 공간으로 표면에서 정상 선을 그립니다하기 위해에 벡터를 계산하는 방법.

UPD2 :
해결했습니다. Look at my codepen

Answer 1

메쉬의 정점 법선을보고 싶습니다. 당신과 같이 VertexNormalsHelper 사용할 수 있습니다

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

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

three.js를 r.84