Threejs之灯光阴影

你华还是你华

已于 2024-09-10 23:53:45 修改

阅读量346

点赞数 3

分类专栏： ThreeJS 文章标签：数码相机 threejs 3d webgl 前端

于 2024-09-10 23:49:36 首次发布

本文链接：https://blog.csdn.net/weixin_44103733/article/details/142111311

版权

ThreeJS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文目录

前言
一、演示代码准备
- 1.1 代码
- 1.2 效果
二、产生阴影的条件
三、平行光阴影
- 3.1 代码
- 3.2 效果
四、点光源阴影
五、整体代码

前言

Three.js中的灯光阴影是一个重要的功能，它使得场景中的光照效果更加逼真和立体。阴影是由于光线被物体阻挡而在其他物体上形成的暗区。在Three.js中，通过模拟光线与物体的交互，可以生成逼真的阴影效果，从而增强场景的真实感。

一、演示代码准备

1.1 代码

我们首先在场景添加受光源影响地面材质及物体材质，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <script type="module">
        // 倒入轨道控制器
        import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
        import * as THREE from "three";
        // 创建场景
        const scene = new THREE.Scene();

        // 创建相机
        const camera = new THREE.PerspectiveCamera( // 透视相机
            45, // 视角 角度数
            window.innerWidth / window.innerHeight, // 宽高比 占据屏幕
            0.1, // 近平面（相机最近能看到物体）
            1000, // 远平面（相机最远能看到物体）
        );
        camera.position.set(0, 2, 11);
        // camera.lookAt(0, 0, 0);

        // 创建渲染器
        const renderer = new THREE.WebGLRenderer({
            antialias: true, // 抗锯齿
        });
        // 设置渲染器宽高
        renderer.setSize(window.innerWidth, window.innerHeight)
        // renderer（渲染器）的dom元素添加到我们的HTML文档中
        document.body.appendChild(renderer.domElement)

        // 物体
        const plane = new THREE.Mesh(
            new THREE.PlaneGeometry(10, 10),
            new THREE.MeshStandardMaterial()
        )
        plane.rotation.x = -Math.PI / 2

        const geometry = new THREE.TorusGeometry( 1, 0.5, 20, 25 );
		const material = new THREE.MeshStandardMaterial();
		const torus = new THREE.Mesh( geometry, material );
        torus.position.set(0,2,0)
        torus.rotation.y = Math.PI / 2

		scene.add(plane, torus );
        // 从上方照射的白色平行光，强度为 1
        const directionalLight = new THREE.DirectionalLight( 0xff0000, 1);
        directionalLight.position.set(0,5,0)
        scene.add( directionalLight );

        // 控制器
        const control = new OrbitControls(camera, renderer.domElement)
        // 开启阻尼惯性，默认值为0.05
        control.enableDamping = true

        // 渲染循环动画
        function animate() {
            // 在这里我们创建了一个使渲染器能够在每次屏幕刷新时对场景进行绘制的循环（在大多数屏幕上，刷新率一般是60次/秒）
            requestAnimationFrame(animate);
            // 更新控制器。如果没在动画里加上，那必须在摄像机的变换发生任何手动改变后调用
            control.update();
            renderer.render(scene, camera);
        };

        // 执行动画
        animate();
    </script>
</body>
</html>

1.2 效果

请添加图片描述
可以看到我们有了一个地面和一个甜甜圈以及从y从上往下投射的平行光，但是我们没有阴影，这个跟现实世界中还是有差距的，接着我们将试着还原物体的阴影。

二、产生阴影的条件

光源支持阴影：在Three.js中，不是所有的光源都能产生阴影。目前，点光源（PointLight）、平行光（DirectionalLight）和聚光灯（SpotLight）可以产生阴影。光源开启阴影投射light.castShadow = true。
物体支持阴影：物体需要设置castShadow属性为true才能产生阴影，同时需要接收阴影的物体则设置receiveShadow属性为true。
渲染器开启阴影：在Three.js的渲染器（Renderer）中，需要开启阴影渲染功能，即设置renderer.shadowMap.enabled = true;。

三、平行光阴影

3.1 代码

接着我们基于以上代码，增加如下代码：

        renderer.shadowMap.enabled = true;
        torus.castShadow = true;
        plane.receiveShadow = true;
        directionalLight.castShadow = true;

3.2 效果

请添加图片描述
可以看到物体此时已经有了从上往下的投射阴影了。

我们也可以试着将光源改变位置如下代码：

directionalLight.position.set(5,5,0);

在这里插入图片描述

我们可以看到物体的阴影非常的锯齿感，我们可以设置阴影贴图的宽度和高度，也就是所谓的分辨率，进而提高物体阴影的真实感，如下代码：

        directionalLight.shadow.mapSize.width = 2048;
        directionalLight.shadow.mapSize.height = 2048;

效果如下：
在这里插入图片描述
可以看到对比上一张图，边缘感更加的真实，如果你觉得不够还可以提高分辨率。

四、点光源阴影

4.1 代码

接着我们尝试下点光源阴影，添加如下代码：

        const light = new THREE.PointLight( 0xff0000, 500, 200 );
        light.position.set(4,4,0);
        scene.add( light );
        const pointLightHelper = new THREE.PointLightHelper( light, 1 );
        light.shadow.mapSize.width = 2048;
        light.shadow.mapSize.height = 2048;
        scene.add( pointLightHelper );
        light.castShadow = true;

4.2 效果

在这里插入图片描述

可以看到点光源照射出来的阴影是发散的，更加接近我们的灯泡照射的阴影效果。

4.3 添加动画

我们尝试给光源添加绕y旋转动画，添加如下代码：

        let angle = 0;
        // 渲染循环动画
        function animate() {
            // 在这里我们创建了一个使渲染器能够在每次屏幕刷新时对场景进行绘制的循环（在大多数屏幕上，刷新率一般是60次/秒）
            requestAnimationFrame(animate);
            angle += 0.01;
            light.position.x = 5 * Math.cos(angle);
            light.position.z = 5 * Math.sin(angle);
            // 更新控制器。如果没在动画里加上，那必须在摄像机的变换发生任何手动改变后调用
            control.update();
            renderer.render(scene, camera);
        };

        // 执行动画
        animate();

效果如下：
请添加图片描述
可以看到点光源就绕着y旋转的同时阴影也在实时变化。
更多灯光阴影文档请点这里。

五、整体代码

最后给出本节整体代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <script type="module">
        // 倒入轨道控制器
        import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
        import * as THREE from "three";
        // 创建场景
        const scene = new THREE.Scene();

        // 创建相机
        const camera = new THREE.PerspectiveCamera( // 透视相机
            45, // 视角 角度数
            window.innerWidth / window.innerHeight, // 宽高比 占据屏幕
            0.1, // 近平面（相机最近能看到物体）
            1000, // 远平面（相机最远能看到物体）
        );
        camera.position.set(0, 2, 20);
        // camera.lookAt(0, 0, 0);

        // 创建渲染器
        const renderer = new THREE.WebGLRenderer({
            antialias: true, // 抗锯齿
        });
        // 设置渲染器宽高
        renderer.setSize(window.innerWidth, window.innerHeight)
        // renderer（渲染器）的dom元素添加到我们的HTML文档中
        document.body.appendChild(renderer.domElement)

        // 物体
        const plane = new THREE.Mesh(
            new THREE.PlaneGeometry(10, 10),
            new THREE.MeshStandardMaterial()
        )
        plane.rotation.x = -Math.PI / 2

        const geometry = new THREE.TorusGeometry( 1, 0.5, 20, 25 );
		const material = new THREE.MeshStandardMaterial();
		const torus = new THREE.Mesh( geometry, material );
        torus.position.set(0,2,0)
        torus.rotation.y = Math.PI / 2

		scene.add(plane, torus );
        // 从上方照射的白色平行光，强度为 1
        const directionalLight = new THREE.DirectionalLight( 0xff0000, 1);
        directionalLight.position.set(5,5,0);
        directionalLight.shadow.mapSize.width = 2048;
        directionalLight.shadow.mapSize.height = 2048;
        scene.add( directionalLight );
        const helper = new THREE.DirectionalLightHelper( directionalLight, 5 );
        scene.add( helper );

        const light = new THREE.PointLight( 0xff0000, 500, 200 );
        light.position.set(4,4,0);
        scene.add( light );
        const pointLightHelper = new THREE.PointLightHelper( light, 1 );
        light.shadow.mapSize.width = 2048;
        light.shadow.mapSize.height = 2048;
        scene.add( pointLightHelper );

        renderer.shadowMap.enabled = true;
        torus.castShadow = true;
        plane.receiveShadow = true;
        directionalLight.castShadow = true;
        light.castShadow = true;
        // 控制器
        const control = new OrbitControls(camera, renderer.domElement)
        // 开启阻尼惯性，默认值为0.05
        control.enableDamping = true

        let angle = 0;
        // 渲染循环动画
        function animate() {
            // 在这里我们创建了一个使渲染器能够在每次屏幕刷新时对场景进行绘制的循环（在大多数屏幕上，刷新率一般是60次/秒）
            requestAnimationFrame(animate);
            angle += 0.01;
            light.position.x = 5 * Math.cos(angle);
            light.position.z = 5 * Math.sin(angle);
            // 更新控制器。如果没在动画里加上，那必须在摄像机的变换发生任何手动改变后调用
            control.update();
            renderer.render(scene, camera);
        };

        // 执行动画
        animate();
    </script>
</body>

</html>

在学习的路上，如果你觉得本文对你有所帮助的话，那就请关注点赞评论三连吧，谢谢，你的肯定是我写博的另一个支持。

你华还是你华

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
Threejs之灯光阴影

我们首先在场景添加受光源影响地面材质及物体材质，代码如下：1.2 效果可以看到我们有了一个地面和一个甜甜圈以及从从上往下投射的平行光，但是我们没有阴影，这个跟现实世界中还是有差距的，接着我们将试着还原物体的阴影。接着我们基于以上代码，增加如下代码：3.2 效果可以看到物体此时已经有了从上往下的投射阴影了。我们也可以试着将光源改变位置如下代码：我们可以看到物体的阴影非常的锯齿感，我们可以设置阴影贴图的宽度和高度，也就是所谓的分辨率，进而提高物体阴影的真实感，如下代码：效果如下：可以看到
复制链接

扫一扫