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作为照明原因.

如果我忘了什么,或者问题是什么,有没有人有想法？

提前谢谢了.

Answer 1

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

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

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

对于视觉提示，请使用 Three.js 帮助器，例如：

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

另外，如果你刚刚学习，这个答案中的建议可能对你有帮助。

三.js r.65