1.基本材质（BasicMaterial）

THREE.MeshLambertMaterial(opt)

渲染后物体的颜色始终为该材质的颜色，而不会由于光照产生明暗、阴影效果。如果没有指定材质的颜色，则颜色是随机的。

2.Lambert 材质（MeshLambertMaterial）

只考虑漫反射而不考虑镜面反射

Idiffuse = Kd * Id * cos(theta)

其中， Idiffuse 是漫反射光强， Kd 是物体表面的漫反射属性， Id 是光强， theta 是光的入射角弧度

color 表现材质对散射光的反射能力，也是最常用来设置材质颜色的属性
ambient 表示对环境光的反射能力，只有当设置了 AmbientLight后，该值才是有效的，
材质对环境光的反射能力与环境光强相乘后得到材质实际表现的颜色。
emissive 是材质的自发光颜色，可以用来表现光源的颜色。

3.Phong 材质（MeshPhongMaterial）

考虑了镜面反射的效果

Ispecular = Ks * Is * (cos(alpha)) ^ n

Ispecular 是镜面反射的光强，Ks 是材质表面镜面反射系数， Is 是光源强度，
alpha 是反射光与视线的夹角，n 是高光指数，越大则高光光斑越小。

specular 值指定镜面反射系数

4.法向材质

将材质的颜色设置为其法向量的方向

new THREE.MeshNormalMaterial()

5.纹理贴图

<script type="text/javascript">
        function init(){
            //渲染器
            var renderer = new THREE.WebGLRenderer({
                canvas:document.getElementById('mainCanvas')
            });
            renderer.setClearColor(0x000000);
            //场景
            var scene = new THREE.Scene();
            //照相机
            var camera = new THREE.OrthographicCamera(-10, 10, 7.5, -7.5, 0.1, 100);
            camera.position.set(-5, 25, 25);
            camera.lookAt(new THREE.Vector3(0, 0, 0));
            scene.add(camera);


            //光照
            var light = new THREE.PointLight(0xffffff, 1, 1000);
            light.position.set(15,25,20);
            scene.add(light);

            //材质
//            var texture = THREE.ImageUtils.loadTexture('img',{},function(){
//                renderer.render(scene,camera);
//            });

            var materials = [];
            for(var i = 0;i<6;++i){
                materials.push(new THREE.MeshBasicMaterial({
                    map: THREE.ImageUtils.loadTexture('img/'+i+'.png',{},function(){
                    renderer.render(scene,camera);
                }),
                    overdraw: true

                }));
            }

            var cube = new THREE.Mesh(new THREE.CubeGeometry(5,5,5),
                new THREE.MeshFaceMaterial(materials));
            scene.add(cube);


            //渲染
            renderer.render(scene,camera);

        }
    </script>

6.棋盘格（重复贴图）

<script type="text/javascript">
        function init(){
            //渲染器
            var renderer = new THREE.WebGLRenderer({
                canvas:document.getElementById('mainCanvas')
            });
            renderer.setClearColor(0x000000);
            //场景
            var scene = new THREE.Scene();
            //照相机
            var camera = new THREE.OrthographicCamera(-10, 10, 7.5, -7.5, 0.1, 100);
            camera.position.set(0, 0, 25);
            camera.lookAt(new THREE.Vector3(0, 0, 0));
            scene.add(camera);


            //光照
            var light = new THREE.PointLight(0xffffff, 1, 1000);
            light.position.set(15,25,20);
            scene.add(light);

            //材质
            var texture = THREE.ImageUtils.loadTexture('img/chess.png',{},function(){
                renderer.render(scene,camera);
            });
            //重复4次为8行8列
            texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
            texture.repeat.set(4,4);

            var material = new THREE.MeshLambertMaterial({
                map: texture
            });


            var plane = new THREE.Mesh(new THREE.PlaneGeometry(12, 12), material);
            scene.add(plane);


            //渲染
            renderer.render(scene,camera);

        }
    </script>