javascript WebGL：如何在一些 web gl 3d 对象上绘制交互式 div（如文本输入）并且仍然是交互式的？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6125407/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
WebGL: How to make an interactive div (like text input) be drawn on some web gl 3d object and still be interactive?
提问by Rella
So I look on to https://github.com/mrdoob/three.js/samples but I see no way on drawing html interactive forms (with css and stuff) onto some web gl objects... So can any one provide a sample on how to draw some interactive html input form onto a sphere or cube?
因此，我查看了https://github.com/mrdoob/three.js/示例，但我认为无法将 html 交互式表单（带有 css 和其他东西）绘制到一些 web gl 对象上......所以任何人都可以提供一个关于如何在球体或立方体上绘制一些交互式 html 输入表单的示例？
Update:
更新：
Actually there is a quite good sample with video example http://mrdoob.github.com/three.js/examples/canvas_materials_video.html
实际上有一个很好的示例视频示例http://mrdoob.github.com/three.js/examples/canvas_materials_video.html
So probagbly it is possible to try it on some real world html div with style...
所以可能有可能在一些真实世界的 html div 上尝试它的风格......
回答by Ilmari Heikkinen
There's no way as of yet to draw HTML elements in WebGL, or onto a 2D canvas for that matter (outside of Firefox extensions). If you want to have 3D elements, your best bet is to use CSS 3D transforms to transform your HTML bits and position them in front of your WebGL canvas.
目前还没有办法在 WebGL 中绘制 HTML 元素，或者在 2D 画布上绘制 HTML 元素（在 Firefox 扩展之外）。如果您想要拥有 3D 元素，最好的办法是使用 CSS 3D 转换来转换您的 HTML 位并将它们放置在您的 WebGL 画布前面。
The alternative (read: way too much work) way is to write your own input widgets and do your own event mapping.
另一种（阅读：工作量太大）的方法是编写自己的输入小部件并进行自己的事件映射。
回答by Milimetric
Well, you can't just put some <input type="text"/>elements on objects. Those objects are drawn in a Canvas element. The video example you showed is a skin and it's drawn onto the surface you see every time the render() function is called. So you basically have to position elements above the canvas:
好吧，你不能只<input type="text"/>在对象上放置一些元素。这些对象是在 Canvas 元素中绘制的。您展示的视频示例是一个皮肤，每次调用 render() 函数时它都会被绘制到您看到的表面上。所以你基本上必须将元素定位在画布上方：
HTML text field over canvas element
Or make a totally custom interactive 3D space:
或者制作一个完全自定义的交互式 3D 空间：
http://mrdoob.github.com/three.js/examples/canvas_interactive_voxelpainter.html
http://mrdoob.github.com/three.js/examples/canvas_interactive_voxelpainter.html
Or find a way to paint input elements onto the Canvas directly, but I don't think that can be done...
或者想办法直接将输入元素绘制到画布上，但我不认为可以做到......
回答by Omiod
This is not WebGL, but here is a nice example/tutorial of an iframe in a 3D space. http://www.html5rocks.com/tutorials/3d/css/
这不是 WebGL，但这里是 3D 空间中 iframe 的一个很好的示例/教程。 http://www.html5rocks.com/tutorials/3d/css/
You could use the same CSS 3D transforms to build a simple "3D" world around it.
您可以使用相同的 CSS 3D 变换围绕它构建一个简单的“3D”世界。
