材料分類：
MeshBasicMaterial：基礎網孔材料，一個以簡單着色（平面或線框）方式來繪製幾何形狀的材料。
MeshLambertMaterial：蘭伯特網孔材料，一種非發光材料（蘭伯特）的表面
MeshPhongMaterial：網孔材料，用於表面有光澤的材料，計算每個像素。
光線分類
注意：材料收到光線影響，即不同的材料對不同的光線表現出不同的特點，試着該表材料和光線，觀測結果
1. AmbientLight 環境光：這種光的顏色被應用到全局範圍內的所有對象。
2. PointLight 點光源 使用 MeshLambertMaterial 或 Phong網孔材料(MeshPhongMaterial) 來影響對象
3. 平行光源（DirectionalLight）.影響使用 蘭伯特網孔材料(MeshLambertMaterial) 或 Phong網孔材料(MeshPhongMaterial) 的對象。
4. 聚光光源（SpotLight）一種能投射錐形陰影區域的點光源。 使用 MeshLambertMaterial 或 Phong網孔材料(MeshPhongMaterial) 來影響對象。
5. 光（Light）光源的基類。
1.在【three.js第四課】的原本基礎上進行修改，將自定義的材料修改爲如下：
//自定義材料
//map:用於設置紋理貼圖，也可以用16進制的顏色替換：color:0xFFFFFF
//side:用於設置顯示面。屬性可設置爲雙面DoubleSide，前面FontSide，後面BackSide
//MeshBasicMaterial：基礎網孔材料，一個以簡單着色（平面或線框）方式來繪製幾何形狀的材料。
//MeshLambertMaterial：蘭伯特網孔材料，一種非發光材料（蘭伯特）的表面
//MeshPhongMaterial：網孔材料，用於表面有光澤的材料，計算每個像素。
var cubeMaterial = [
//右
new THREE.MeshLambertMaterial({color:0xFFFFFF,side:THREE.DoubleSide}),
//左
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/2.png') ,side:THREE.DoubleSide}),
//上
new THREE.MeshPhongMaterial({map: new THREE.TextureLoader().load('images/3.png') ,side:THREE.DoubleSide}),
//下
new THREE.MeshLambertMaterial({map: new THREE.TextureLoader().load('images/4.png') ,side:THREE.DoubleSide}),
//前
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/5.png') ,side:THREE.DoubleSide}),
//後
new THREE.MeshPhongMaterial({map: new THREE.TextureLoader().load('images/6.png') ,side:THREE.DoubleSide})
];
2.在此處舉例上面所有的光線，更換時將保留一個，其他光線註釋即可，光線使用如下：
//添加光線
//注意：材料收到光線影響，即不同的材料對不同的光線表現出不同的特點，試着該表材料和光線，觀測結果
//1. AmbientLight 環境光：這種光的顏色被應用到全局範圍內的所有對象。
//AmbientLight(光線的顏色，光線的強度)
//var ambientLight = new THREE.AmbientLight(0xFFFFFF,3.0);
//scene.add(ambientLight);//光線加入場景中
//2. PointLight 點光源 使用 MeshLambertMaterial 或 Phong網孔材料(MeshPhongMaterial) 來影響對象
//var pointLight = new THREE.PointLight(0xFFFFFF,3.0);
//scene.add(pointLight);//光線加入場景中
//3. 平行光源（DirectionalLight）.影響使用 蘭伯特網孔材料(MeshLambertMaterial) 或 Phong網孔材料(MeshPhongMaterial) 的對象。
//var directionalLight = new THREE.DirectionalLight(0xFFFFFF,3.0);
//scene.add(directionalLight);//光線加入場景中
//4. 聚光光源（SpotLight）一種能投射錐形陰影區域的點光源。 使用 MeshLambertMaterial 或 Phong網孔材料(MeshPhongMaterial) 來影響對象。
//var spotLight = new THREE.SpotLight(0xFFFFFF,3.0);
//scene.add(spotLight);//光線加入場景中
//5. 光（Light）光源的基類。
var light = new THREE.Light(0xFFFFFF,3.0);
scene.add(light);//光線加入場景中
4.修改不同的光線以及材料，觀察不同光線對材料的影響。
5.源碼：
<!DOCTYPE html>
<html>
<head>
<title>demo1</title>
</head>
<style type="text/css">
body{
margin:0;
}
canvas{
width:100%;
height:100%;
}
</style>
<body>
<script src="jquery.min.js"></script>
<script src="../build/three.js"></script>
<script src="../examples/js/controls/OrbitControls.js"></script>
<script type="text/javascript">
var scene = new THREE.Scene();//創建場景
//創建一個攝像機對象
var camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight, 0.1, 1000);
//創建渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);//渲染到瀏覽器
//加入事件監聽器,窗口自適應
window.addEventListener('resize', function(){
var width = window.innerWidth;
var height = window.innerHeight;
renderer.setSize(width,height);
camera.aspect = width/height;
camera.updateProjectionMatrix();
})
//軌道控制 鏡頭的移動
var controls = new THREE.OrbitControls(camera,renderer.document);
//創建形狀 BoxGeometry
var geometry = new THREE.BoxGeometry(1,1,1);
//自定義材料
//map:用於設置紋理貼圖，也可以用16進制的顏色替換：color:0xFFFFFF
//side:用於設置顯示面。屬性可設置爲雙面DoubleSide，前面FontSide，後面BackSide
//MeshBasicMaterial：基礎網孔材料，一個以簡單着色（平面或線框）方式來繪製幾何形狀的材料。
//MeshLambertMaterial：蘭伯特網孔材料，一種非發光材料（蘭伯特）的表面
//MeshPhongMaterial：網孔材料，用於表面有光澤的材料，計算每個像素。
var cubeMaterial = [
//右
new THREE.MeshLambertMaterial({color:0xFFFFFF,side:THREE.DoubleSide}),
//左
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/2.png') ,side:THREE.DoubleSide}),
//上
new THREE.MeshPhongMaterial({map: new THREE.TextureLoader().load('images/3.png') ,side:THREE.DoubleSide}),
//下
new THREE.MeshLambertMaterial({map: new THREE.TextureLoader().load('images/4.png') ,side:THREE.DoubleSide}),
//前
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/5.png') ,side:THREE.DoubleSide}),
//後
new THREE.MeshPhongMaterial({map: new THREE.TextureLoader().load('images/6.png') ,side:THREE.DoubleSide})
];
//創建材料 wireframe是否使用線條
//var material = new THREE.MeshBasicMaterial({color:0xFFFFFF,wireframe:true});
var material = new THREE.MeshFaceMaterial(cubeMaterial);
//將材料和形狀結合
var cube = new THREE.Mesh(geometry,material);
//物體加入場景中
scene.add(cube);
//添加光線
//注意：材料收到光線影響，即不同的材料對不同的光線表現出不同的特點，試着該表材料和光線，觀測結果
//1. AmbientLight 環境光：這種光的顏色被應用到全局範圍內的所有對象。
//AmbientLight(光線的顏色，光線的強度)
//var ambientLight = new THREE.AmbientLight(0xFFFFFF,3.0);
//scene.add(ambientLight);//光線加入場景中
//2. PointLight 點光源 使用 MeshLambertMaterial 或 Phong網孔材料(MeshPhongMaterial) 來影響對象
//var pointLight = new THREE.PointLight(0xFFFFFF,3.0);
//scene.add(pointLight);//光線加入場景中
//3. 平行光源（DirectionalLight）.影響使用 蘭伯特網孔材料(MeshLambertMaterial) 或 Phong網孔材料(MeshPhongMaterial) 的對象。
//var directionalLight = new THREE.DirectionalLight(0xFFFFFF,3.0);
//scene.add(directionalLight);//光線加入場景中
//4. 聚光光源（SpotLight）一種能投射錐形陰影區域的點光源。 使用 MeshLambertMaterial 或 Phong網孔材料(MeshPhongMaterial) 來影響對象。
//var spotLight = new THREE.SpotLight(0xFFFFFF,3.0);
//scene.add(spotLight);//光線加入場景中
//5. 光（Light）光源的基類。
var light = new THREE.Light(0xFFFFFF,3.0);
scene.add(light);//光線加入場景中
camera.position.z=3;//設置相機的位置
//邏輯
var update=function(){
//物體隨着XY軸旋轉
//cube.rotation.x +=0.01;
//cube.rotation.y += 0.005;
}
//繪畫渲染
var render=function() {
renderer.render(scene,camera);
}
//循環運行update，render
var loop=function() {
requestAnimationFrame(loop);
update();
render();
}
loop();//循環開始
</script>
</body>
</html>