Three.JS学习 6：光源

最新推荐文章于 2023-02-28 11:34:39 发布

编程圈子

最新推荐文章于 2023-02-28 11:34:39 发布

阅读量860

点赞数

分类专栏： # Canvas WebGL ThreeJS

本文链接：https://blog.csdn.net/xundh/article/details/54425835

版权

Canvas WebGL ThreeJS 专栏收录该内容

30 篇文章 5 订阅

订阅专栏

本文学习内容主要来自：
http://www.hewebgl.com/article/getarticle/60

Three.JS中不同各类的光源

名字	描述
THREE.AmbientLight	基本光源，该淘汰的颜色将会叠加到场景现有物体的颜色上
THREE.PointLight	点光源，点光源不能用来创建阴影
THREE.SpotLight	聚光效果，类似台灯、天花板上的吊灯或手电筒，可以投射阴影
THREE.DirectionalLight	无限光/平行光，像太阳光
THREE.HemisphereLight	特殊的光源，可以通过模拟反光面和光线微弱的天空来创建更加自然的室外光线。这个淘汰也不提供阴影功能
THREE.AreaLight	可以指定散发光线的平面，而不是一个点。Three.AreaLight不投射任何阴影
THREE.LensFlare	这不是一种光源，但是通过使用THREE.LensFlare，可以为场景中的光源添加镜头光晕效果

光源基类

THREE.Light(hex)：参数是16进制颜色值，如：

var light=new THREE.Light(0xFF0000);

派生光源

这里写图片描述

环境光

构造函数

var light = new THREE.AmbientLight( 0xff0000 );
scene.add( light );

点光源

构造函数

PointLight( color, intensity, distance )

参数说明

color：光的颜色
intensity：光的强度，默认为1.0，表示100%强度的灯光
distance：光的距离，从光源所在位置，经过distance距离后，光的强度将从Intensity衰减为0.默认情况下，值为0.0，表示光源强度不衰减

示例

var light = new THREE.PointLight(0xFF0000);
light.position.set(0, 0,50);
scene.add(light);

效果
这里写图片描述

聚光灯

效果
这里写图片描述
光线从一个锥体中射出，在被照射的物体上产生聚光的效果。
构造函数

THREE.SpotLight( hex, intensity, distance, angle, exponent )

参数说明

Hex：聚光灯发出的颜色，如0xFFFFFF
Intensity：光源的强度，默认是1.0，如果为0.5，则强度是一半，意思是颜色会淡一些。和上面点光源一样
Distance：光线的强度，从最大值衰减到0，需要的距离。默认为0，表示光不衰减，如果非0，则表示从光源的位置到Distance的距离，光都在线性衰减。到离光源距离Distance时，光源强度为0
Angle：聚光灯着色的角度，用弧度作为单位，这个角度是和光源的方向形成的角度
exponent：光源模型中，衰减的一个参数，越大衰减约快

平行光（方向光）

构造函数

THREE.DirectionalLight = function ( hex, intensity )

参数说明

Hex：颜色
Intensity：光线的强度，默认为1。值为8的时候，物体会显示黑色

示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Three框架</title>
        <script src="js/three.min.js"></script>
        <style type="text/css">
            div#canvas-frame {
                border: none;
                cursor: pointer;
                width: 100%;
                height: 600px;
                background-color: #EEEEEE;
            }

        </style>
        <script>
            var renderer,width,height;
            function initThree() {
                width = document.getElementById('canvas-frame').clientWidth;
                height = document.getElementById('canvas-frame').clientHeight;
                renderer = new THREE.WebGLRenderer({
                    antialias: true
                });
                renderer.setSize(width, height);
                document.getElementById('canvas-frame').appendChild(renderer.domElement);
                renderer.setClearColor(0xFFFFFF, 1.0);
            }

            var camera;
            function initCamera() {
                camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
                camera.position.x = 600;
                camera.position.y = 0;
                camera.position.z = 600;
                camera.up.x = 0;
                camera.up.y = 1;
                camera.up.z = 0;
                camera.lookAt({
                    x: 0,
                    y: 0,
                    z: 0
                });
            }

            var scene;
            function initScene() {
                scene = new THREE.Scene();
            }

            var light;
            function initLight() {
                // A start
                // 第二个参数是光源强度，你可以改变它试一下
                light = new THREE.DirectionalLight(0xFF0000, 1);
                // 位置不同，方向光作用于物体的面也不同，看到的物体各个面的颜色也不一样
                light.position.set(0, 0, 1);
                scene.add(light);
                // A end
            }

            function initObject() {
                var geometry = new THREE.CubeGeometry(200, 100, 50, 4, 4);
                var material = new THREE.MeshLambertMaterial({ color: 0xFFFFFF });
                var mesh = new THREE.Mesh(geometry, material);
                mesh.position.set(0, 0, 0);
                scene.add(mesh);
            }

            function threeStart() {
                initThree();
                initCamera();
                initScene();
                initLight();
                initObject();
                renderer.clear();
                renderer.render(scene, camera);
            }

        </script>
    </head>

    <body onload="threeStart();">
        <div id="canvas-frame"></div>
    </body>
</html>