4

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

Rella
  • 65,003
  • 109
  • 363
  • 636
  • I'm quite sure this isn't possible. Have you seen it anywhere? or seen it mentioned? The only way you can manipulate the HTML elements that are not just graphics is with CSS3D functions, that i know of. – Declan Cook May 25 '11 at 13:45

3 Answers3

5

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

Community
  • 1
  • 1
Milimetric
  • 13,411
  • 4
  • 44
  • 56
5

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.

Ilmari Heikkinen
  • 2,711
  • 1
  • 19
  • 14
  • https://developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas - there is, but you'll want to use the Blob rather than BlobBuilder. – gbjbaanb Aug 31 '12 at 21:38
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.

Omiod
  • 11,285
  • 11
  • 53
  • 59