三个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

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

g.clearRect(...)