当没有任何光源的时候,最终的颜色将是黑色,不管材质是什么颜色。css
Lambert材质表面会在全部方向上均匀地散射灯光,这就会使颜色看上去比较均匀。想一想一张纸,不管什么颜色,是否是纸的各个部分颜色都比较均匀呢。html
Lambert材质的图例以下所示:canvas
Lambert材质会受环境光的影响,呈现环境光的颜色,与材质自己颜色关系不大。app
环境光就是在场景中无处不在的光,它对物体的影响是均匀的,也就是不管你从物体的那个角度观察,物体的颜色都是同样的,它只有颜色,其位置对场景中的物体并无影响,由于他是均匀的反射到物体的表面的。框架
你能够把环境光放在任何一个位置,它的光线是不会衰减的,是永恒的某个强度的一种光源。dom
平行光又称为方向光(Directional Light),是一组没有衰减的平行的光线,相似太阳光的效果。函数
方向光的模型如图:spa
方向光的构造函数以下所示:code
THREE.DirectionalLight = function ( hex, intensity )htm
其参数以下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Three框架</title> <script src="js/three.js"></script> <style type="text/css"> div#canvas-frame { border: none; cursor: pointer; width: 100%; height: 600px; background-color: #EEEEEE; } </style> <script> var renderer; function initThree() { width = document.getElementById('canvas-frame').clientWidth; height = document.getElementById('canvas-frame').clientHeight; renderer = new THREE.WebGLRenderer({ antialias : true }); renderer.setSize(width, height); document.getElementById('canvas-frame').appendChild(renderer.domElement); renderer.setClearColor(0xFFFFFF, 1.0); } var camera; function initCamera() { camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000); camera.position.x = 600; camera.position.y = 0; camera.position.z = 600; camera.up.x = 0; camera.up.y = 1; camera.up.z = 0; camera.lookAt({ x : 0, y : 0, z : 0 }); } var scene; function initScene() { scene = new THREE.Scene(); } var light; function initLight() { // A start // 第二个参数是光源强度,你能够改变它试一下 light = new THREE.DirectionalLight(0xFF0000,1); // 位置不一样,方向光做用于物体的面也不一样,看到的物体各个面的颜色也不同 light.position.set(0,0,1); scene.add(light); // A end } var cube; function initObject() { var geometry = new THREE.CubeGeometry( 200, 100, 50,4,4); var material = new THREE.MeshLambertMaterial( { color:0xFFFFFF} ); var mesh = new THREE.Mesh( geometry,material); mesh.position.set(0,0,0); scene.add(mesh); } function threeStart() { initThree(); initCamera(); initScene(); initLight(); initObject(); renderer.clear(); renderer.render(scene, camera); } </script> </head> <body onload="threeStart();"> <div id="canvas-frame"></div> </body> </html>