内容概述
光照是 3D 场景真实感的关键。Three.js 提供了多种光源类型，每种光源有不同的效果和用途。本专题还将介绍如何启用和优化阴影效果，提升场景的深度感。
学习目标
- 理解不同光源类型及其应用场景。
- 掌握在 Three.js 中添加光源并启用阴影。
- 学会调整阴影效果以平衡真实感和性能。
完整代码实现
我们将创建一个简单场景：一个平面作为地板，一个立方体作为物体，带有方向光和阴影效果。
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Three.js - 光照与阴影</title><style>body { margin: 0; overflow: hidden; }canvas { display: block; }</style>
</head>
<body><!-- 引入 Three.js --><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>