• 【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.源码:

    <!DOCTYPE html>
    <html>
    <head>
        <title>demo1</title>
    </head>
    <style type="text/css">
       body{
            margin:0;
       }
       canvas{
            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>
  • 相关阅读:
    Tomcat windows服务器配置多个Tomcat
    Sharepoint开发实用技巧(1)
    戏说MOSS关于EventHander编程
    协作应用程序标记语言 CAML 点滴(一)
    MOSS开发手记(3)
    协作应用程序标记语言 CAML点滴(二)
    MOSS项目开发(1) 项目计划,重点及文档
    MOSS项目开发(4) 开发文档的规范
    MOSS开发手记(2)
    Asp.Net页面执行流程分析
  • 原文地址:https://www.cnblogs.com/smedas/p/12456251.html
Copyright © 2020-2023  润新知