Three.js 光与影代码分析及原理阐述

谁在黄金彼岸
0 阅读4分钟

Three.js 光与影代码分析及原理阐述

一、代码功能总结

该 Vue 3 组件结合 Three.js，构建了一个具备光与影效果的 3D 场景，具体功能如下：

  1. 基础布局：运用 Element UI 进行页面布局，包含头部标题区与主内容区，主内容区放置用于渲染 3D 场景的<canvas>元素。
  2. 场景初始化：创建 Three.js 的核心要素，如场景（Scene）、透视相机（PerspectiveCamera）、WebGL 渲染器（WebGLRenderer）和轨道控制器（OrbitControls），并通过以下代码开启渲染器的阴影支持功能：
renderer.shadowMap.enabled = true;
  1. 几何对象添加：在场景中添加一个平面和一个立方体，平面设置为可接收阴影，立方体设置为可投射阴影，用于展示光影效果。相关设置代码如下：
// 平面设置为接收阴影

plane.receiveShadow = true;


// 立方体设置为投射阴影

cube.castShadow = true;
  1. 光源配置：
  • 平行光（DirectionalLight）：模拟远距离光源，从特定方向照射场景，可投射阴影，通过以下代码实现：
const directionalLight = new THREE.DirectionalLight(0xffffff, 10);


directionalLight.castShadow = true;


scene.add(directionalLight);
  • 点光源（PointLight）：从单点向四周发射光线，其位置会随动画循环发生旋转变化，同样具备投射阴影的能力。
  1. 阴影效果呈现：通过配置渲染器、光源和物体，实现阴影的投射与接收，并添加光源辅助器，方便直观观察光源的方向和范围。
  2. 动画循环：持续更新点光源的位置，并不断渲染场景，使点光源围绕物体旋转，产生动态的光影效果。
  3. 响应式处理：监听窗口大小变化事件，及时调整相机和渲染器的参数，保证场景在不同窗口尺寸下正常显示。
  4. 资源管理：在组件卸载时，释放所有相关的 Three.js 资源，包括动画帧、轨道控制器、渲染器、场景对象等，防止内存泄漏。

二、Three.js 中光源和阴影的关系

在 Three.js 的 3D 场景渲染中，光源和阴影紧密相连，相互依存：

  1. 光源是阴影产生的基础：阴影的存在依赖于光源，没有光源，场景将一片黑暗，也无从谈起阴影。不同类型的光源会生成不同形态的阴影：
  • 平行光：产生平行投影阴影，常用于模拟太阳等远距离光源照射下的阴影效果，阴影方向一致，不受物体与光源距离影响。
  • 点光源：产生放射状阴影，从光源点向四周发散，阴影的形状和大小会随物体与光源距离的变化而改变 。
  • 聚光灯：产生锥形投影阴影，类似于手电筒的光照效果，阴影集中在一个锥形区域内。
  • 矩形光：由于 Three.js 的限制，矩形光不支持阴影效果。
  1. 阴影是光源被遮挡的体现：当场景中的物体阻挡了光源发出的光线时，在物体后方就会形成阴影区域，这个区域是光线无法直接照射到的地方，从而呈现出阴影效果。

三、实现阴影效果的必要因素

在 Three.js 中要成功呈现阴影效果，需满足以下条件：

  1. 开启渲染器阴影支持：通过设置以下代码，告知渲染器启用阴影映射功能，这是显示阴影的首要步骤。
renderer.shadowMap.enabled = true;
  1. 光源设置：
  • 选择支持阴影的光源类型：如平行光、点光源、聚光灯。
  • 启用光源的阴影投射：对选定的光源，设置以下代码，使光源具备投射阴影的能力。
light.castShadow = true;
  1. 物体设置：
  • 设置投射阴影的物体：对于需要投射阴影的物体，如示例中的立方体，设置以下代码。
cube.castShadow = true;
  • 设置接收阴影的物体：对于要接收阴影的物体，如示例中的平面，设置以下代码。
plan.receiveShadow = true;
  1. 优化阴影贴图分辨率（可选）：通过以下代码设置合适的阴影贴图分辨率，可提高阴影的清晰度和质量，但较高的分辨率会增加计算开销。
light.shadow.mapSize.set(2048, 2048);
  1. 调整阴影相机设置（复杂场景适用）：在复杂场景中，需对光源的阴影相机（light.shadow.camera）进行参数调整，如设置视锥体范围等，确保阴影能够正确覆盖需要显示的区域。

四、示例关键代码解析

// 渲染器设置，开启阴影映射功能

renderer.shadowMap.enabled = true;


// 平行光设置，创建平行光并开启阴影投射

const directionalLight = new THREE.DirectionalLight(0xffffff, 10);


directionalLight.castShadow = true;


scene.add(directionalLight);


// 立方体设置，使其具备投射阴影的能力

cube.castShadow = true;


// 平面设置，使其能够接收阴影

plane.receiveShadow = true;

以上关键代码分别从渲染器、光源、投射阴影物体和接收阴影物体四个方面进行配置。

（注：文档部分内容可能由 AI 生成）

avatar
文章
阅读
粉丝