WebGL: How to make an interactive div (like text input) be drawn on some web gl 3d object and still be interactive?

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?

Update:

Actually there is a quite good sample with video example http://mrdoob.github.com/three.js/examples/canvas_materials_video.html

So probagbly it is possible to try it on 开发者_JAVA技巧some real world html div with style...

---

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:

HTML text field over canvas element

Or make a totally custom interactive 3D space:

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...

---

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.

The alternative (read: way too much work) way is to write your own input widgets and do your own event mapping.

---

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/

You could use the same CSS 3D transforms to build a simple "3D" world around it.