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

Question

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 some real world html div with style...

Answer 1

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