threejs后期特效处理效果教程

在上一个教程中，我向您展示了如何将三维模型导入到Three.js。在本教程中，我们将向您展示如何在几分钟内将后处理效果添加到您的3.js场景中！准备好了吗？让我们检查一下

和前面的教程一样。我们需要将3个文件导入到我们的页面。首先是Three.js核心文件。接下来是Orbitcontrol.js以启用对相机的鼠标控制。最后一个是GLTFLoader.js，用于将三维模型加载到场景中。

然后我将重用上一个教程中的Code来加载在Sketchfab上找到的三维模型。基本上，我们在模型周围设置了一个有4个点光源的白色背景场景。

这是渲染结果

现在我们的场景准备好了。下一步我们将研究后处理。但首先让我们谈谈这个概念。

目前我们使用threejs渲染器渲染每个帧并在画布上显示。但是假设我们想在场景中添加景深效果，我们需要计算模糊量并重新渲染场景。这就是我们之所以称之为后处理的原因，因为这些处理/渲染发生在主场景渲染之后。

如果添加多个效果，则可以多次进行后处理渲染。我们称每个渲染为Pass。

首先让我们导入three.js后处理插件

现在，我们不使用webgl渲染器，而是使用EffectComposer。我们可以根据渲染器创建一个作曲家。

然后我们将开始向作曲家添加pass。第一个也是必需的通行证是renderPass。这是为其他过程渲染主场景。

然后我们将创建一个effectPass并尝试添加HDR或Bloom效果。我们还需要将rendertoScreen设置为true才能启用它

现在我们必须从composer而不是原始渲染器渲染场景。

就这样！这是结果视频

您可以在此处下载项目SourceCode，在此处下载三维模型

有了这些知识，现在您可以添加惊人的后期处理效果，如体积光和抗锯齿

这就是本教程的全部内容。如果你想看到更多的网页设计想法和开发教程，不要忘记订阅我们保持关注！

很好的教程。你会有一些问题，比如跨域问题，您可以尝试添加loader.setCrossOrigin（’anonymous’）；

这是一个很好的教程。