【three.js第五课】光线的添加和感光材料

材料分类：

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.源码：