Three.js光源梳理3——平行光（DirectionalLight）

kirin77 · 发表于 2022-2-9 11:54

平行光本质是一个方向向量，在shader中计算时直接与模型顶点的法线方向进行dot点乘操作。

如果L（平行光）的向量与N（顶点法线方向）一样（N Dot L=1），那么表示模型的这个点正对着光源，应该最亮，相反，如果两个向量呈相反方向（N Dot L=-1），那么则表示这个点背对光源，应该最暗。

image.png

基础的兰伯特计算模型的明暗就是NdotL。

与Unity中的平行光不一样的是，Unity中平行光仅使用方向不使用位置来表示平行光方向；而Three.js中是设定一个起点和一个终点（默认为0,0,0），来确定平行光的方向。因此Three.js中通常在创建完成后设定一下光照的位置，如下：
const dirLight = new THREE.DirectionalLight(0xFFFFFF, 1); dirLight.position.set(5, 5, 5); scene.add( dirLight );
平行光是可以产生阴影的，需要将castShadow打开，如下
//开启该光源阴影 dirLight.castShadow = true; //获取该光源产生的shadow，并设置参数 //具体shadow的参数设置后续再讲解 dirLight.shadow.mapSize.width = 2048; dirLight.shadow.mapSize.height = 2048; dirLight.shadow.camera.left = -10; dirLight.shadow.camera.right = 10; dirLight.shadow.camera.top = -10; dirLight.shadow.camera.bottom = 10; dirLight.shadow.camera.near = 4; dirLight.shadow.camera.far = 16; dirLight.shadow.radius = 0.1; dirLight.shadow.bias = 0.0000000001;
也可以设置光源照射的对象target，光的照射终点会跟随着物体移动（默认为上述的0,0,0）。

无论在Unity中还是Three.js中，平行光通常是场景中的主光源，也通常是产生阴影、计算亮暗面的主要光源。

		自动登录	找回密码
密码			立即注册

Three.js光源梳理3——平行光（DirectionalLight）

本帖子中包含更多资源