首页分享图形化开发（五）031

图形化开发（五）031

来源：花匠小妙招时间：2024-11-28 23:15

图形化开发（五）031-Three.js之光照——创建光照、AmbientLight 环境全局光、DirectionalLight平行光-太阳光、添加阴影效果

通过之前的内容，我们已经了解一个模型的创建整个过程。接下来，我们将学习如果实现在场景中添加光效和阴影效果。首先我们先介绍一下光照的创建：

创建光照

在上一节，因为案例需求，我们创建过一次光照效果，所有的光照效果也都是通过这种方式创建出来。

var light = new THREE.DirectionalLight(0xffffff); //添加了一个白色的平行光 1

并且还在场景中添加了一个全局光照：

scene.add(new THREE.AmbientLight(0x222222)); 1

不同种类的光照，通过实例化，可以接受两个传值，分别是光照颜色和光照强度。

var light = new THREE.DirectionalLight(0xffffff, 1.0); //添加了一个白色的平行光 1

第二个值光照强度默认值是1.0，我们可以根据项目需求调整光照强度。

我们也可以动态修改光的颜色和光照强度：

var light = new THREE.DirectionalLight(0xffffff); //添加了一个白色的平行光 light.color.set(0x000000); //将光照的颜色修改为黑色 light.intensity = 2.0; // 光照的强度改为默认的两倍 1234 AmbientLight 环境全局光

环境光会照亮场景中所有的物体，在计算物体的颜色的时候，都会叠加上环境光的颜色。

var light = new THREE.AmbientLight( 0x404040 ); // 创建一个灰色的环境光 scene.add( light ); 12

由于环境光作用于所有的物体，所有的材质，所以环境光是没有方向的，也无法产生阴影效果。

DirectionalLight平行光

平行光是以特定的方向发射的光。它产生的光都是平行的状态，主要用于模拟太阳光线。
创建平行光也接受两个值，颜色和光线强度：

var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 ); //创建一个颜色为纯白色并且强度为默认的一半的平行光 scene.add( directionalLight ); 12

平行光除了可以动态修改光的颜色和强度外，还可以通过设置它的位置和目标位置来确定平行光的照射方向（两点确定一条直线的概念）：

var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 ); directionalLight.color.set(0x000000); //将光照颜色修改为黑色 directionalLight.intensity = 1.0; //将光照强度修改为默认 directionalLight.position.set(10, 10, 10); //设置平行光的位置 directionalLight.target.set(0, 0, 0); //设置当前的平行光的朝向位置 scene.add( directionalLight ); 1234567 添加阴影效果

平行光是可以产生投影效果的，下面我们来设置一下平行光如何产生阴影效果：
首先，需要设置渲染器可以渲染阴影效果：

renderer.shadowMap.enabled = true; // 渲染器 1

实例化灯光时，需要设置灯光渲染阴影：

directionalLight = new THREE.DirectionalLight("#ffffff"); directionalLight.castShadow = true; // 设置平行光投射投影 scene.add(directionalLight); 1234

最后，我们还需要设置模型哪些需要可以产生阴影和哪些模型可以接收阴影：

sphere.castShadow = true; //开启阴影 scene.add(sphere); cube.castShadow = true; //开启阴影 scene.add(cube); plane.receiveShadow = true; //可以接收阴影 scene.add(plane); 12345678

上面我们设置了球体和立方体可以产生阴影，底部的平面可以接收球和立方体产生的阴影，便可以产生下面的图片效果：

在这里插入图片描述

由于设置阴影是一项十分耗性能的工作，所以我们需要尽量设置合适的阴影渲染范围和密度。平行光阴影的实现原理是通过正交相机OrthographicCamera（将在下一节讲解相机）来通过检测当前模型，也就是directionalLight.shadow.camera就是一个正交相机，只要在这个正交相机可视范围内的可以投影的物体才可以被设置投影。并且我们可以通过设置一些相机的属性属性来实现产生阴影的范围：

directionalLight.shadow.camera.near = 20; //产生阴影的最近距离 directionalLight.shadow.camera.far = 100; //产生阴影的最远距离 directionalLight.shadow.camera.left = -50; //产生阴影距离位置的最左边位置 directionalLight.shadow.camera.right = 50; //最右边 directionalLight.shadow.camera.top = 50; //最上边 directionalLight.shadow.camera.bottom = -50; //最下面 //这两个值决定生成阴影密度默认512 directionalLight.shadow.mapSize.height = 1024; directionalLight.shadow.mapSize.width = 1024; 12345678910