javascript - 三.js MeshPhongMaterial线框光照

Question

当我尝试在 arrayBufferGeometry 上使用线框查看 meshphongmaterial 时，其中 vetexColors 设置为 THREE.vertexColors；照明仅适用于 1 个随机面。当我切换到 MeshBasicmaterial 时，我得到了所需的行为。将线框设置为 false 后，phong Material 看起来不错并且被点亮:

 geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
    geometry.addAttribute('color', new THREE.BufferAttribute(colors, 3));
    geometry.computeFaceNormals();
    geometry.computeVertexNormals();

    console.log(geometry);
    var material = new THREE.MeshBasicMaterial({
        side: THREE.DoubleSide,
        wireframe: true,
        transparent: false,
        vertexColors: THREE.VertexColors, // CHANGED
        shininess: 100,
        //     color: 0xff0000,
        shading: THREE.SmoothShading
    });

    console.log(material);

    var terrainMesh = new THREE.Mesh(geometry, material);
    terrainMesh.name = 'GRD';
    terrainMesh.receiveShadow = true;
    terrainMesh.castShadow = true;
    console.log(terrainMesh);
    return terrainMesh;

我需要在 Material 之后重新计算顶点法线吗？光照适用于实体面而不适用于线框是否有原因？

Answer 1

这是一个照明问题。

我有各种灯光，环境光、代表太阳的定向光，以及跟随相机目标周围以突出显示用户正在查看的内容的聚光灯。

这些都没有正确照亮线框。然后我按照MeshPhongMaterial example看到他们使用点光源。我认为点光源和聚光灯之间的唯一区别是方向和目标。这是不正确的，因为点光源最终工作了。

另一个问题是，从点光源到线框的照明必须位于 Material 的正面(无论 MeshPhongMaterial 中的侧面属性如何)，而不能来自背面。我的几何体朝下，因为加载的文件格式与标准相反。点光源必须位于几何体下方才能照亮 Material 。我最终添加了一个反向太阳型光，使用点光源从下方照亮几何体。

我仍然不明白为什么线框仅由 PointLight 照亮，以及为什么它不从后面照亮 THREE.DoubleSide。