javascript - 如何在 Three.js 中创建散景（或以任何方式以编程方式创建散景）

Question

我在想这个：

我想在散景上放置一些文字，如下所示：

问题是（a）这有多难/如果以前做过，所以我不必重新创建轮子，以及（b）如何在 JavaScript 中实现它，也许在Three.js中。

我无法在 Three.js 或 WebGL 中找到任何景深 (DoF) 或散景的示例，或者只是 3D 照明散景的 3D 文本，这让我怀疑它是否太难或不可能。它不需要高度优化的性能，因为我只想生成散景图像以保存到 JPG 文件。想知道如何去做，如果你能指出我正确的方向。

标签： javascriptthree.jsphotography

Answer 1

我无法在 Three.js 或 WebGL 中找到任何景深 (DoF) 或散景的示例，或者只是 3D 照明散景的 3D 文本，这让我怀疑它是否太难或不可能。

three.js在官方存储库中提供了两个自由度示例。我推荐第二个，因为它是更高级的着色器。您还会注意到该示例聚焦于鼠标悬停的对象。

无论如何，实现自由度是一项后处理任务。所以想法是将场景和相应的深度信息渲染到渲染目标中，然后使用额外的通道来获得实际的 DOF 效果。

https://threejs.org/examples/webgl_postprocessing_dof https://threejs.org/examples/webgl_postprocessing_dof2

three.js R105