一、材质与光源
1.不带任何光源的物体
当没有任何光源的时候,最终的颜色将是黑色,无论材质是什么颜色。
2.兰伯特材质与光源
Lambert材质表面会在所有方向上均匀地散射灯光,这就会使颜色看上去比较均匀。想想一张纸,无论什么颜色,是不是纸的各个部分颜色都比较均匀呢。
Lambert材质的图例如下所示:
Lambert材质会受环境光的影响,呈现环境光的颜色,与材质本身颜色关系不大。
3.环境光对物体的影响
环境光就是在场景中无处不在的光,它对物体的影响是均匀的,也就是无论你从物体的那个角度观察,物体的颜色都是一样的,它只有颜色,其位置对场景中的物体并没有影响,因为他是均匀的反射到物体的表面的。
你可以把环境光放在任何一个位置,它的光线是不会衰减的,是永恒的某个强度的一种光源。
二、方向光(平行光)
平行光又称为方向光(Directional Light),是一组没有衰减的平行的光线,类似太阳光的效果。
方向光的模型如图:
方向光的构造函数如下所示:
THREE.DirectionalLight = function ( hex, intensity )
其参数如下:
- Hex:关系的颜色,用16进制表示
- Intensity:光线的强度,默认为1。光照越强,物体表面就更明亮。它的取值范围是0到1。如果为0,表示光线基本没什么作用,那么物体就会显示为黑色。
<!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>