Three.js 系列专题 3：光照与阴影
内容概述
光照是 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>