三个 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();

三个 js 自定义几何体 - 光照不工作

Three js custom geometry - lighting does not work

javascript

3d

three.js