three.js - 用MeshLambertMaterial和点光源绘制自定义网格

Question

我目前正在学习WebGL和Three.js。因此，出于测试的目的，我尝试创建一个平面几何体、两个立方体几何体和一个点光源：

function initLights () {
    var c = context;

    var pointLight = new THREE.PointLight( 0xffffff, 1, 100 );
    pointLight.position.set( 10, 10, 10 );

    c.scene.add(pointLight);
}

function initObjects () {
    var c = context;

    /**
     * Defining the materials
     */

    var lambertRedMaterial = new THREE.MeshLambertMaterial({
            color  : 0xff0000
            , side : THREE.DoubleSide
        });

    var lambertWhiteMaterial = new THREE.MeshLambertMaterial({
            color     : 0xffffff
            , side    : THREE.DoubleSide
        });

    /**
     * Defining the floor
     */
    var floorGeometry = new THREE.Geometry();

    floorGeometry.vertices.push(new THREE.Vector3(-5.0, 0.0, -5.0));
    floorGeometry.vertices.push(new THREE.Vector3( 5.0, 0.0, -5.0));
    floorGeometry.vertices.push(new THREE.Vector3( 5.0, 0.0,  5.0));
    floorGeometry.vertices.push(new THREE.Vector3(-5.0, 0.0,  5.0));
    floorGeometry.faces.push(new THREE.Face3(2, 1, 0));
    floorGeometry.faces.push(new THREE.Face3(3, 2, 0));


    var floorMesh = new THREE.Mesh(floorGeometry, lambertWhiteMaterial);
    floorMesh.position.set(0.0, 0.0, 0.0);

    /**
     * Defining a cube
     */
    var cubeGeometry1 = new THREE.CubeGeometry(2.0,0.25,1);
    var cube1 = new THREE.Mesh( cubeGeometry1, lambertRedMaterial );
    cube1.position.set(0.0, 1.0, 0.0);

    var cubeGeometry2 = new THREE.CubeGeometry(2.0,0.25,1);
    var cube2 = new THREE.Mesh( cubeGeometry2, lambertRedMaterial );
    cube2.position.set(0.0, 1.35, 0.0);

    c.scene.add(floorMesh);
    c.scene.add(cube1);
    c.scene.add(cube2);
}

在此之前已经定义了相机和场景的上下文。

奇怪的是，方块被正确地显示了，但平面没有显示出来。

当我将平面的y位置设置为1.0时，可以看到它与较低的立方体相交。当我使用MeshBasicMaterial时，它也会被显示出来，但由于灯光原因，我想使用MeshLambertMaterial。

是否有人有想法，我是否忘记了什么，或者问题是什么？

提前致谢！

- Benjamin Groener

---

首先，调用 geometry.computeFaceNormals();。然后调用 scene.add( new THREE.FaceNormalsHelper( floorMesh );。 - WestLangley

太好了！geometry.computeFaceNormals();解决了问题！你能向我解释一下为什么需要调用这个函数吗？不必要在代码中添加scene.add( new THREE.FaceNormalsHelper( floorMesh );。如果我加入它，会绘制出一条黄线。我猜这条线是规范正交向量的表示。 - Benjamin Groener

Answer 1

MeshLambertMaterial需要面法线或顶点法线进行照明计算。

面法线用于“平面着色”，而顶点法线用于“光滑着色”。

您可以通过调用geometry.computeFaceNormals();来计算面法线。对于顶点法线，您可以调用geometry.computeVertexNormals();。

为了获得视觉提示，请使用three.js助手之类的工具，例如：

scene.add( new THREE.FaceNormalsHelper( mesh ) );

此外，如果您是初学者，可以参考这篇回答中的建议。

three.js r.65

- WestLangley

---

你说的 “如果你只是在学习中…” 是什么意思？你会推荐不同的方法用于后续项目吗？ - Benjamin Groener

你在第一句中提到正在学习WebGL和three.js，因此我认为其他回答中的建议会对你有所帮助。 :-) 我已经重新表述了我的帖子。 - WestLangley

是的，我已经阅读了这个问题和答案。谢谢你的建议，它们真的很有帮助！ :-) - Benjamin Groener