Three.js 系列专题 3：光照与阴影

原创

于 2025-04-07 00:00:00 发布

· 2.3k 阅读

100

7 ·

版权

文章标签：

#javascript #开发语言 #ecmascript

内容概述

光照是 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>