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

11,671

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

Solution 2

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.

Solution 3

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.

Share:
11,671

Related videos on Youtube

Rella
Author by

Rella

Hi! sorry - I am C/C++ noobe, and I am reading a book=)

Updated on June 04, 2022

Comments