Three.js MeshPhongMaterial 似乎不受非环境光的影响

Question

我有一个函数可以将一对数组绘制成双面。我已经使用 threejs 几个星期了，但从未使用过自定义形状，所以我认为这可能与问题有关。我没有找到任何有用的互联网答案，尽管我尝试了很多，所以我在这里。

我有这两段相关的代码，但 JsFiddle 有全部内容。

var ambient = new THREE.AmbientLight( 0x444444 );
scene.add( ambient );

var spotLight = new THREE.DirectionalLight( 0xffffff );
spotLight.position.set( 0, 1, 1 ).normalize();
scene.add(spotLight);

和

function graph(array1, array2)
{

    var particleCount = array1.length*array2.length,
        particles = new THREE.Geometry(),
        pMaterial = new THREE.MeshPhongMaterial({
            side: THREE.DoubleSide,
            shading: THREE.SmoothShading
        });

    // now create the individual particles
    for (var p = 0; p < particleCount; p++) {


    var row = (p%array1.length),
        col = Math.floor(p/array1.length),
        pX = 2*row - array1.length,
        pY = 2*col - array2.length,
        pZ = (array1[row])*(array2[col]),
        particle = new THREE.Vector3(pX, pZ, pY);

    // add it to the geometry
    particles.vertices.push(particle);
    if (row != 0 && col != 0)
    {
        particles.faces.push( new THREE.Face3( col * array1.length + row, col * array1.length + row - 1, (col - 1) * array1.length + row) );
        particles.faces.push( new THREE.Face3( (col - 1) * array1.length + row, col * array1.length + row - 1, (col - 1) * array1.length + row - 1) );
    }
}

// create the particle system
var particleSystem = new THREE.Mesh(
    particles,
    pMaterial);

// add it to the scene
scene.add(particleSystem);

onRenderFcts.push(function(){
    var angle   = Date.now()/10000 * Math.PI;
    particleSystem.rotation.y   = angle;        
})

}

https://jsfiddle.net/6Lp74xdn/1/

我想我只是运行不知道定向光没有照亮表面的原因。

Answer 1

生成顶点和面后需要调用 computeFaceNormals()。

因此，只需在图形函数的末尾添加 particles.computeFaceNormals();。

Three.js MeshPhongMaterial 似乎不受非环境光的影响

Three.js MeshPhongMaterial doesn't seem to be affected by non-ambient lights

javascript

webgl

three.js