Javascript three.js-使用MeshLambertMaterial和点光源绘制自定义网格
我目前正在学习webGL和three.js。因此,出于测试原因,我尝试创建一个平面几何体、两个立方体几何体和一个点光源:Javascript three.js-使用MeshLambertMaterial和点光源绘制自定义网格,javascript,three.js,Javascript,Three.js,我目前正在学习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); } fun
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
如果我忘了什么,有没有人知道会是什么问题
非常感谢。MeshLambertMaterial需要面法线或顶点法线进行照明计算 面法线用于“平面着色”,顶点法线用于“平滑着色” 可以通过调用
geometry.computeFaceNormals()计算面法线代码>。对于顶点法线,可以调用geometry.computeVertexNormals()代码>
对于视觉提示,请使用三个.js帮助程序,例如:
scene.add( new THREE.FaceNormalsHelper( mesh ) );
此外,如果您只是在学习,中的建议可能会对您有所帮助
three.js r.65首先调用geometry.computeFaceNormals()代码>。然后调用scene.add(新建三个.FaceNormalsHelper(floorMesh);
是的,太好了!几何体.computeFaceNormals();成功了!你能解释一下我为什么需要调用这个吗?scene.add(新建三个.FaceNormalsHelper(floorMesh);不是必需的。如果我把它放到代码中,它会画一条黄线。我猜这条线是标准正交向量的表示。你说“如果你只是在学习…”是什么意思你会为以后的项目推荐一种不同的方式吗?你在第一句话中说你正在学习WebGL和three.js,所以我认为另一个答案中的建议会对你有所帮助。:-)我重新措辞了我的帖子。是的,我已经阅读了这个问题和答案。谢谢你的提示,它们真的很有帮助!:-)