Three.js光与影代码分析及原理阐述
Three.js 光与影代码分析及原理阐述
一、代码功能总结
该 Vue 3 组件结合 Three.js，构建了一个具备光与影效果的 3D 场景，具体功能如下：
1. 基础布局：运用 Element UI 进行页面布局，包含头部标题区与主内容区，主内容区放置用于渲染 3D 场景的<canvas>元素。
2. 场景初始化：创建 Three.js 的核心要素，如场景（Scene）、透视相机（PerspectiveCamera）、WebGL 渲染器（WebGLRenderer）和轨道控制器（OrbitControls），并通过以下代码开启渲染器的阴影支持功能：
renderer.shadowMap.enabled = true;
3. 几何对象添加：在场景中添加一个平面和一个立方体，平面设置为可接收阴影，立方体设置为可投射阴影，用于展示光影效果。相关设置代码如下：
// 平面设置为接收阴影
plane.receiveShadow = true;
// 立方体设置为投射阴影
cube.castShadow = true;
4. 光源配置：
- 平行光（
DirectionalLight）：模拟远距离光源，从特定方向照射场景，可投射阴影，通过以下代码实现：
const directionalLight = new THREE.DirectionalLight(0xffffff, 10);
directionalLight.castShadow = true;
scene.add(directionalLight);
- 点光源（
PointLight）：从单点向四周发射光线，其位置会随动画循环发生旋转变化，同样具备投射阴影的能力。