Three.js MeshPhongMaterial Wireframe lighting

Question

When I try to view meshphongmaterial with a wireframe onto an arrayBufferGeometry where the vetexColors are set to THREE.vertexColors; The lighting is only working for 1 random face. When I switch to MeshBasicmaterial I get the desired behavior. With wireframe set to false the phong material looks good and is lit up:

 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;

Do I need to recompute the vertex normals after the material? Is there a reason why the lighting would work for solid faces and not wireframe?

Answer 1

It was a lighting issue.

I have a variety of lights, AmbientLight, DirectionalLight to represent the sun, and a SpotLight that follows the camera target around to highlight what the user is looking at.

Non of these were properly lighting the wire-frame. I then followed the MeshPhongMaterial example and saw they used point lights. I assumed the only difference between a point light and a spot light was a direction and target. That is incorrect because the point light ended up working.

Another issue is that the lighting from a point light onto the wire-frame has to be on the front side of the material(regardless of the side property in MeshPhongMaterial) and can not be from the back. My geometry faces down, because of the format of the file loaded is opposite to standards. The point light had to be positioned under the geometry to illuminate the material. I ended up adding a reverse sun type light that illuminates the geometry from underneath using a PointLight.

I still do not comprehend why wireframe is only illuminated by PointLight and why it doesnt illuminate a THREE.DoubleSide from the rear.