WebGL: Как сделать так, чтобы интерактивный div (например, ввод текста) рисовался на каком-то трехмерном объекте web gl и был интерактивным?

Question

Итак, я смотрю на https://github.com/mrdoob/three.js/ образцов, но не вижу способа рисовать html-интерактивные формы (с CSS и прочим) на некоторых объектах web gl ... Так что любой может предоставить пример того, как рисовать какая-нибудь интерактивная форма ввода html на сферу или куб?

Обновление:

На самом деле есть неплохой пример с примером видео http://mrdoob.github.com/three.js/examples/canvas_materials_video.html

Так что, вероятно, это можно попробовать в каком-то реальном HTML-формате div со стилем ...

Answer 1

Пока еще нет возможности рисовать HTML-элементы в WebGL или на 2D-холсте (за исключением расширений Firefox). Если вы хотите иметь 3D-элементы, лучше всего использовать CSS-3D-преобразования для преобразования HTML-битов и размещения их перед холстом WebGL.

Альтернативный (читай: слишком много работы) способ - написать свои собственные входные виджеты и выполнить собственное отображение событий.

Answer 2

Ну, вы не можете просто поместить несколько <input type="text"/> элементов на объекты.Эти объекты нарисованы в элементе Canvas.Пример видео, который вы показали, - это скин, и он рисуется на поверхности, которую вы видите каждый раз, когда вызывается функция render ().Таким образом, вам нужно расположить элементы над холстом:

Текстовое поле HTML над элементом холста

Или создать полностью настраиваемое интерактивное трехмерное пространство:

http://mrdoob.github.com/three.js/examples/canvas_interactive_voxelpainter.html

Или найдите способ рисовать входные элементы непосредственно на холсте, но я не думаю, что это можно сделать ...

Answer 3

Это не WebGL, но вот хороший пример / учебник по iframe в трехмерном пространстве.http://www.html5rocks.com/tutorials/3d/css/

Вы можете использовать те же 3D-преобразования CSS, чтобы создать простой "3D" мир вокруг него.