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只有一个面一个基本的例子。