Three.js：将 HTML 页面/DOM 元素渲染到立方体的表面？答案

【问题标题】：Three.js: Render an HTML page / DOM element onto the face of a cube?Three.js：将 HTML 页面/DOM 元素渲染到立方体的表面？
【发布时间】：2012-09-02 10:17:38
【问题描述】：

我正在尝试调整 Three.js 包提供的示例文件 canvas_geometry_cube.html，并更改立方体的每个面以显示 HTML 页面/DOM 元素（最好是 DOM 元素）。我看了一下 ParticleDOMMaterial，但我不知道如何使用它或它的作用。有人可以帮忙吗？

【问题讨论】：

那么你在哪里可以找到任何东西？
我是，我实际上废弃了 Three.js 并使用了 CSS 转换。这对我的用例来说已经足够好了。如果您想知道如何使用它，请在我的个人资料中查看我的个人网站的来源。

标签： javascript webgl three.js

【解决方案1】：

从 Three.js 中最近的一些改进中更新这个老问题并为未来的读者提供帮助

Three.js 现在实际上支持 CSS3D 作为渲染输出，因此您可以使用 CSS 3D 转换来操作 HTML 页面/DOM 元素。

例如，请看这里：http://mrdoob.github.io/three.js/examples/css3d_periodictable.html

【讨论】：

我现在才赶上这个线程（2 年后）现在有没有更容易做到这一点的 Three.js 的包含？在 THREE.Plane 内有一个完全互动的网页？

【解决方案2】：

DOMRenderer 不是一个完整的 3d 渲染器，它只能应用 z-indexes 和缩放，因此通过 DOMRenderer 旋转立方体是不可能的。

您可以使用html2canvas 并将其作为位图纹理应用到立方体上。我还没有真正使用过 html2canvas，但演示非常令人印象深刻。您的里程可能会有所不同。

也许更适合您的项目的是 CSS3 3D 变换。有一个库可以帮助解决此类问题，称为 traqball，https://github.com/dirkweber/traqball.js。

您可以在这里查看演示：http://www.eleqtriq.com/wp-content/static/demos/2010/rotation/index.html

【讨论】：

如果可能的话，我正在寻找一种在立方体上呈现实际 HTML 的方法，而不是位图纹理（即按钮和链接仍然像普通的 html 页面一样工作）。 traqball 可以帮助解决这个问题吗？我看到了一个 three.js 演示，它在一个立方体上交互呈现了谷歌地图，我可以用一个 html 页面来做到这一点吗？
我猜你的意思是：playmapscube.com，这不是真正的 html 谷歌地图，而是他们的 webgl 版本的改编。通过 CSS 转换，您仍然可以与内容进行交互，这是我找到的立方体的改编版本 cssdeck.com/labs/7ihk9ib6/5 尝试在文本字段上书写。
啊，是的，这正是我要找的！那么traqball 是独立于three.js 工作的，还是我将它们一起使用？另外，渲染是否总是像您链接的那个立方体演示一样使元素看起来有点模糊？
我链接的演示没有使用 traqball，它只是带有 CSS 变换的 CSS 动画。如果单击“x”图标，您可以看到代码。 Traqball 用于用鼠标控制立方体。如果您只需要为立方体设置动画，则可以忽略它。您可能应该从本教程开始以了解发生了什么。 desandro.github.com/3dtransforms/docs/cube.html