Three.js光源梳理3——平行光（DirectionalLight）-优快云博客

本文链接：https://blog.youkuaiyun.com/eevee_1/article/details/122837571

这篇博客介绍了Three.js中平行光的概念，强调其作为主光源在场景中的重要性。平行光通过起点和终点确定方向，并通过点乘运算判断模型表面的明暗。在Three.js中，可以通过设置`castShadow`属性开启阴影，并调整光源位置、阴影贴图大小以及相机参数来优化阴影效果。此外，还提到了Unity中平行光的表示方式差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

平行光本质是一个方向向量，在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中，平行光通常是场景中的主光源，也通常是产生阴影、计算亮暗面的主要光源。