当前位置：首页 > news >正文

Three.js 系列专题 6：后处理与特效

news 来源：原创 2025/5/26 2:59:12

内容概述

后处理（Post-Processing）是在渲染完成后对画面进行额外的处理，以实现模糊、辉光、颜色校正等效果。Three.js 通过 EffectComposer 提供后处理支持。本专题还将简要介绍着色器和粒子系统，为更复杂的特效打基础。

学习目标

掌握 EffectComposer 的基本使用。
实现辉光（Bloom）效果。
初步理解着色器和粒子的概念。

完整代码实现

我们将创建一个发光立方体场景，使用 UnrealBloomPass 添加辉光效果。

<!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>
    <script src="https://threejs.org/examples/js/postprocessing/EffectComposer.js"></script>
    <script src="https://threejs.org/examples/js/postprocessing/RenderPass.js"></script>
    <script src="https://threejs.org/examples/js/postprocessing/UnrealBloomPass.js">