三个js自定义几何体——光照不起作用

Question

我有以下在 Three.js 中绘制菱形的代码：

var material = new THREE.MeshPhongMaterial({color: 0x55B663, side:THREE.DoubleSide});
  var geometry = new THREE.Geometry();
  geometry.vertices.push(new THREE.Vector3(0, 1, 0));
  geometry.vertices.push(new THREE.Vector3(0, -1, 0));
  geometry.vertices.push(new THREE.Vector3(-1, 0, -1));
  geometry.vertices.push(new THREE.Vector3(1, 0, -1));
  geometry.vertices.push(new THREE.Vector3(1, 0, 1));
  geometry.vertices.push(new THREE.Vector3(-1, 0, 1));
  geometry.faces.push(new THREE.Face3(0, 4, 5));
  geometry.faces.push(new THREE.Face3(0, 3, 4));
  geometry.faces.push(new THREE.Face3(0, 2, 5));
  geometry.faces.push(new THREE.Face3(0, 2, 3));
  geometry.faces.push(new THREE.Face3(1, 4, 5));
  geometry.faces.push(new THREE.Face3(1, 3, 4));
  geometry.faces.push(new THREE.Face3(1, 2, 5));
  geometry.faces.push(new THREE.Face3(1, 2, 3));

这就是我设置照明的方式：

  var light = new THREE.PointLight(0xffffff);
  light.position.set(100,200,100);
  scene.add(light);
  light  = new THREE.DirectionalLight(0xffffff, 1.0);
  light.position.set(0, 0, 0);
  scene.add(light);
  light  = new THREE.AmbientLight(0x404040);
  scene.add(light);

但是在渲染场景时 - 仅应用环境光：

但是，只要我将自定义几何图形更改为标准立方体 - 一切正常：

var geometry = new THREE.BoxGeometry(1, 1, 1);

我迷路了。为什么照明不适用于我的自定义几何图形？

Answer 1

这是因为您没有为自定义人物指定法线。您还需要这样做：

geometry.computeFaceNormals();
geometry.computeVertexNormals();