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

我目前正在学习webGL和three.js。因此，对于测试的原因，我试图创建一个平面几何和两个立方体的几何形状和点光源：three.js - 使用MeshLambertMaterial和点光源绘制自定义网格

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出于照明原因。

有没有人有一个想法，如果我忘记了什么，或者会出现什么问题？

非常感谢提前。

来源

2014-02-13 Benjamin Groener

作为开始，调用'geometry.computeFaceNormals（）;'。然后调用'scene.add（new THREE.FaceNormalsHelper（floorMesh）;' – WestLangley

是的，太棒了！geometry.computeFaceNormals（）;做了诡计！你能解释一下吗，为什么我需要调用它？ scene.add新的THREE.FaceNormalsHelper（floorMesh）;不是必须的，如果我把它放到我的代码中，它会画出一条黄线，我猜这条线是归一化正交向量的表示形式 –

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

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

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

的视觉信号，使用three.js所帮手，比如这一个：

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

此外，如果你刚开始学习，在this answer的建议可能对你有帮助。

three.js所r.65

来源

2014-02-13 20:07:18 WestLangley

非常感谢！现在有效！ –

什么你的意思是说，“如果你只是在学习......”你会推荐一个不同的方式，为以后的项目吗？ –

你说你的第一句话，你正在学习WebGL和three.js，所以我认为这些建议另一个答案对你有帮助:-)我改写了我的帖子 – WestLangley

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

回答

相关问题