FaceNormalsHelper() 不适用于我创建的网格 - THREE.js答案

【问题标题】：FaceNormalsHelper() does not work with the mesh i created - THREE.jsFaceNormalsHelper() 不适用于我创建的网格 - THREE.js
【发布时间】：2016-09-15 00:33:32
【问题描述】：

我用 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);

Edges 助手效果很好。但是 FaceNormalsHelper() 不起作用。我在页面上看不到任何线条。怎么了？

【问题讨论】：

标签： three.js

【解决方案1】：

由于您要创建自定义网格，因此需要计算法线。

在创建几何图形后尝试添加：

geo.computeFaceNormals();

您可以看到here 一个只有一张脸的基本示例。

【讨论】：

我也在答案中添加了一个简单的例子。
我在设置顶点之前写了 geo.computeFaceNormals。是的，我是半个笨蛋。谢谢。