在运行时使用 Three.js 将文本/图像添加到 Canvas 中呈现的 3D 立方体/模型

Posted 2023-03-23

【中文标题】在运行时使用 Three.js 将文本/图像添加到 Canvas 中呈现的 3D 立方体/模型

【英文标题】：Add Text/Image to the 3D cube/model rendered in Canvas using Three.js at runtime

【发布时间】：2021-12-25 11:11:40

【问题描述】：

我希望允许用户将文本/图像添加到使用画布在 UI 上呈现的 3D 模型（他们想要的任何位置）。他们可以移动文本对象并更新其尺寸。它的交互性很小，因此用户可以对其进行自定义。

只是想了解我们是否可以使用 three.js 来实现，或者该功能将成为仅从搅拌机创建的模型图像的一部分。我尝试了它并且能够渲染图像并且可以访问它的所有网格对象。但我不知道如何开始在运行时将文本/图像添加到模型或three.js。

例如我们可以为其添加自定义文本/图像。并将其移动到任何地方： https://dsign4you.com/3d/

【参考方案1】：

在 THREE.js 中有许多不同的方式来处理文本。这里解释了其中的一堆：

https://threejs.org/docs/?q=textgeometry#manual/en/introduction/Creating-text

列表中的选项 3 是将其构建到 3D 模型中，但还有其他几种方法可以做到这一点。

【讨论】：

嗨，是的，我们得到了 textGeometry。我们想了解的是，如何在运行时将文本添加到渲染的 3d 模型中？就像渲染模型（立方体等），然后我们允许用户添加一些文本并将其显示在渲染模型上，我们可以将该文本移动到浏览器中渲染 3d 模式的任何位置。它就像一个交互式 3d 模型，用户可以在其中向渲染模型添加文本/图像。例如dsign4you.com/3d

您可能会发现这很有帮助 - 它展示了如何将画布（可能包括文本）应用为纹理：threejs.org/examples/webgl_materials_texture_canvas 这可能也很有用 - 它涵盖了画布内容所在的特定情况文本。 discourse.threejs.org/t/…