three.js内のオブジェクトのサーフェスに法線をレンダーする方法

Question

私は矢印が法線を描くので、3js.orgにthe exampleが見つかりました。矢印は複雑なオブジェクトであり、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