three.js光源的应用

ゝ一纸荒年。 2022-06-03 03:46 86阅读 0赞

## 学习交流欢迎加群：789723098，博主会将一些demo整理共享 ##

three.js中定义了不同种类的光源，本节主要讲四种基本光源的应用：THREE.AmbientLight、THREE.PointLight、THREE.SpotLight和THREE.DirectionalLight。它们的介绍如下表：

<table style="width:600px;"> 
 <tbody> 
  <tr> 
   <td>THREE.AmbientLight</td> 
   <td>自然光源，该光源的颜色会叠加到场景现有物体的颜色上，不产生阴影</td> 
  </tr> 
  <tr> 
   <td>THREE.PointLight</td> 
   <td>点光源，从空间一点向所有方向射出光线，像太阳。不产生阴影</td> 
  </tr> 
  <tr> 
   <td>THREE.SpotLight</td> 
   <td>聚光灯光源，类似手电筒，台灯。可以产生阴影</td> 
  </tr> 
  <tr> 
   <td>THREE.DirectionalLight</td> 
   <td>平行光源，从这种光源发出的光线可以看作平行的，可创建阴影</td> 
  </tr> 
 </tbody> 
</table>

从上表我们可以知道一些光源可一产生阴影，关于场景中阴影的创建可一参考：[点击打开链接][Link 1]。值得注意的是，这几个光源中的THREE.AmbientLight要配合其他的光使用，才能达到弱化阴影或者给场景添加其他颜色的效果，如果单独使用，场景中的物体不管是什么颜色，都会被这个光源给覆盖。在接下来的Demo会做演示。为了展示这几种光源的效果，编写了一个小Demo，其运行效果如下：

**                           自然光源：                                                                   点光源：     **

![20171217220039190][]![20171217220245879][]

**             **

**           聚光灯光源：                                                                 平行光源：**

**![20171217220347840][]![20171217220418454][]**

程序里加了一个交互工具条，用于实现各种光源的切换：

![20171217220808031][]

代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>threejs - basic - light</title>
        <style>
            body{
                font-family: Monospace;
                background: #f0f0f0;
                margin: 0px;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
    <script type="text/javascript" src="build/three.js"></script>
    <script type="text/javascript" src="js/Detector.js"></script>
    <script type="text/javascript" src="js/libs/dat.gui.min.js"></script>
    <script type="text/javascript">
        //检测webgl的支持情况
        if(!Detector.webgl) {Detector.addGetWebGLMessage();}
        var container;
        var scene, camera, renderer;
        var mesh;
        var light;
        var gui;
        //添加交互工具栏
        var controls = new function() {
            this.光源 = false;
        };
        window.onload = function main(){
            //添加一个div
            container = document.createElement('div');
            document.body.appendChild(container);
            //创建一个新场景
            scene = new THREE.Scene();
            initRenderer(container);
            initCamera();
            ambientLight();
            planMesh();
            sphereMesh();
            initGUI();
            render();
        };
        //渲染器
        function initRenderer(container){
            //渲染
            //antialias:true增加抗锯齿效果
            renderer = new THREE.WebGLRenderer({antialias:true});
            renderer.setClearColor(new THREE.Color(0x3399CC));//设置窗口背景颜色为黑
            renderer.setSize(window.innerWidth, window.innerHeight);//设置窗口尺寸
            renderer.shadowMapEnabled = true;
            //将renderer关联到container，这个过程类似于获取canvas元素
            container.appendChild(renderer.domElement);
        }
        //相机
        function initCamera() {
            camera = new THREE.PerspectiveCamera(25,
                window.innerWidth/window.innerHeight, 1, 1000);
            camera.position.set(150, 180, 100);//设置相机位置
              camera.lookAt(scene.position);//让相机指向场景中心
        }
        //创建一个平面
        function planMesh() {
            var planeGeo = new THREE.PlaneGeometry(100,100,10,10);//创建平面
             var planeMat = new THREE.MeshLambertMaterial({  //创建材料
                color:0xFFFFFF,
                wireframe:false
            });
            mesh = new THREE.Mesh(planeGeo, planeMat);
            mesh.position.set(0, 0, -20);
            mesh.rotation.x = -0.5 * Math.PI;//将平面绕X轴逆时针旋转90度
            mesh.receiveShadow = true;//允许接收阴影
            scene.add(mesh);//将平面添加到场景中
        }
        //创建一个球
        function sphereMesh() {
           var sphereGeo = new THREE.SphereGeometry(16, 40, 60);//创建球体
            var sphereMat = new THREE.MeshLambertMaterial({//创建材料
                color:0x0000FF,
                wireframe:false
            });
            mesh = new THREE.Mesh(sphereGeo, sphereMat);//创建球体网格模型
            mesh.position.set(25, 16, 0);//设置球的坐标
            mesh.castShadow = true;//允许投射阴影
            mesh.receiveShadow = true;//允许接收阴影
            scene.add(mesh);//将球体添加到场景
        }
        //自然光
        function ambientLight() {
            scene.remove(light);
            light = new THREE.AmbientLight( 0x606060 );
            scene.add(light);
        }
        //点光源
        function pointLight() {
            scene.remove(light);
            light = new THREE.PointLight( 0xffffff );
            light.position.set(80, 50, 30);
            scene.add(light);
        }
        //聚光灯光源
        function spotLight() {
            scene.remove(light);
            light = new THREE.SpotLight( 0xffffff );
            light.position.set(100, 40, 30);
            light.castShadow = true;//允许投射阴影
            scene.add(light);
        }
        //平行光源
        function directionalLight() {
            scene.remove(light);
            light = new THREE.DirectionalLight( 0xffffff );
            light.position.set(30, 10, 10);
            light.castShadow = true;
            light.shadowCameraNear = 2;
            light.shadowCameraFar = 200;
            light.shadowCameraLeft = -50;
            light.shadowCameraRight = 50;
            light.shadowCameraTop = 50;
            light.shadowCameraBottom = -50;
            scene.add(light);
        }
        //添加交互工具条
        
    function initGUI() {
        gui = new dat.GUI();
        gui.add(controls, '光源', ["自然光源", "点光源", "聚光灯光源", "平行光源"]).onChange
        (function (e) {
            switch (e) {
                case "自然光源":
                    ambientLight();
                    render();
                    break;
                case "点光源":
                    ambientLight();
                    pointLight();
                    render();
                    break;
                case "聚光灯光源":
                    ambientLight();
                    spotLight();
                    render();
                    break;
                case "平行光源":
                    ambientLight();
                    directionalLight();
                    render();
                    break;
            }
        });
    }
    
    //渲染
        function render() {
            renderer.render(scene, camera);
        }
    </script>
    </body>
    </html>

[Link 1]: http://blog.csdn.net/qq_37338983/article/details/78581464
[20171217220039190]: https://img-blog.csdn.net/20171217220039190
[20171217220245879]: /images/20220603/27543f58eaec403b91613d2c114479ff.png
[20171217220347840]: https://img-blog.csdn.net/20171217220347840
[20171217220418454]: /images/20220603/ef3924ba7c1f4800abb1f5c30d3ce737.png
[20171217220808031]: /images/20220603/225dceea9f4248bab7bb6e62e5761b41.png