WebGL:如何使交互式div(如文本输入)绘制在一些web gl三维对象上，并且仍然是交互式的

Question

所以我期待https://github.com/mrdoob/three.js/示例，但我看不出在一些web gl对象上绘制html交互式表单（使用css和其他东西）的方法。。。那么，有人能提供一个如何在球体或立方体上绘制交互式html输入表单的示例吗？

更新：

实际上，有一个很好的视频示例http://mrdoob.github.com/three.js/examples/canvas_materials_video.html

因此，很可能可以在一些真实世界的htmldiv上尝试它。。。

Answer 1

好吧，不能只在对象上放一些<input type="text"/>元素。这些对象是在Canvas元素中绘制的。您展示的视频示例是一个皮肤，每次调用render（）函数时，它都会被绘制到您看到的曲面上。因此，您基本上必须将元素定位在画布上方：

画布元素上的HTML文本字段

或者制作一个完全自定义的交互式3D空间：

http://mrdoob.github.com/three.js/examples/canvas_interactive_voxelpainter.html

或者找到一种直接在画布上绘制输入元素的方法，但我认为这是不可能的。。。

Answer 2

目前还没有办法在WebGL中绘制HTML元素，也没有办法在2D画布上绘制HTML元素（Firefox扩展之外）。如果你想拥有3D元素，最好的选择是使用CSS 3D转换来转换HTML位，并将其放置在WebGL画布的前面。

另一种方法（阅读：工作量太大）是编写自己的输入小部件并进行自己的事件映射。

Answer 3

这不是WebGL，但这里是三维空间中iframe的一个很好的示例/教程。http://www.html5rocks.com/tutorials/3d/css/

您可以使用相同的CSS 3D转换来围绕它构建一个简单的"3D"世界。