在THREE.JS中使用PhongMaterial遇到问题

时间:2018-11-05 17:09:07

标签: javascript three.js

当我尝试在飞机机翼上创建PhongMaterial材质时,一个材质很好,而另一个材质似乎总是以相同的方式着色,而与太阳的位置无关,只是反射强度发生了变化。

这些是有问题的材料

    new THREE.MeshPhongMaterial({
      vertexColors: THREE.FaceColors,
      shininess: 30,
      color:0xA9A9A9,
      side: THREE.BackSide,
      //emissive: 0xA0A0A0,
      //emissiveIntensity:0.8
    }),
    new THREE.MeshPhongMaterial({
      vertexColors: THREE.FaceColors,
      side: THREE.FrontSide,
      color: 0x00ffff,
      shininess: 30,
      emissive: 0x00ffff,
      emissiveIntensity: 0.9
    }),

With a sun on each side

您可以看到右侧机翼正常点亮,而左侧机翼则没有点亮。

enter image description here

即使太阳几乎位于左翼上方,它仍然无法正确反射。右翼仍按预期运行

两个机翼都使用BackSide,具有相同的材料,并且以相同的方式构建 我为此使用THREE.Geometry,每个三角形都是手工制作的。我确保数学能够正常运行。 我已经叫.computeVertexNormals()。

我什至不知道为什么会这样,如果有人可以帮助我会很感激。

1 个答案:

答案 0 :(得分:0)

我终于找到了造成此错误的原因。机翼的底面和顶面太靠近。不知道为什么右翼没有任何问题,但现在它们都已修复。仍然感谢您的帮助