FaceNormalsHelper（）は作成したメッシュでは機能しません - THREE.js

Question

Three.jsでメッシュを作成しました。私はメッシュの顔の法線を見たい。ここに私のコードです：

var scene = new THREE.Scene(); 
var camera = new THREE.PerspectiveCamera(100, window.innerWidth/window.innerHeight, 0.1, 1000); 
camera.position.set(5, 5, 10); 

var geo = new THREE.Geometry(); 
geo.vertices = [new THREE.Vector3(10,5,0), new THREE.Vector3(5,7,0), new THREE.Vector3(2,1,0), new THREE.Vector3(8,9,0), new THREE.Vector3(9,10,0)]; 
geo.faces = [ new THREE.Face3(0,1,2), new THREE.Face3(1,0,3), new THREE.Face3(3,0,4)]; 
var mat = new THREE.MeshBasicMaterial({color:0xff0ff0, side: THREE.DoubleSide, vertexColors: THREE.FaceColors}); 

var mesh = new THREE.Mesh(geo, mat); 
scene.add(mesh); 


var edge = new THREE.EdgesHelper(mesh, 0x00ff00); 
scene.add(edge); 

var normal = new THREE.FaceNormalsHelper(mesh, 2, 0x90D9C1, 2); 
scene.add(normal); 

var renderer = new THREE.WebGLRenderer(); 
renderer.setSize(window.innerWidth, window.innerHeight); 
document.body.appendChild(renderer.domElement); 
renderer.render(scene, camera); 

エッジヘルパーは素晴らしい作品です。 FaceNormalsHelper（）は機能しません。私はページ上のどの行も見ることができません。どうしましたか？

Answer 1

カスタムメッシュを作成するので、法線を計算する必要があります。あなたはジオメトリを作成した後にこれを追加すること

試してみてください。

geo.computeFaceNormals();

あなただけの一面を持つhere基本的な例を見ることができます。