WebGL:如何在一些web gl 3d对象上绘制交互式div(如文本输入)并仍然是交互式的?

Rel*_*lla 3 html javascript css user-interface webgl

所以我看看https://github.com/mrdoob/three.js/ samples但是我认为没有办法将html交互式表单(带有css和东西)绘制到一些web gl对象上......所以任何人都可以提供一个关于如何将一些交互式html输入表单绘制到球体或立方体上的示例?

更新:

其实,有视频例如一个不错的样本http://mrdoob.github.com/three.js/examples/canvas_materials_video.html

所以有可能在一些真实的世界html div上尝试它的风格......

Mil*_*ric 5

嗯,你不能只是将一些<input type="text"/>元素放在对象上。这些对象在 Canvas 元素中绘制。您展示的视频示例是一个皮肤,每次调用 render() 函数时它都会绘制到您看到的表面上。所以你基本上必须将元素放置在画布上方:

canvas 元素上的 HTML 文本字段

或者制作一个完全自定义的交互式 3D 空间:

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

或者找到一种方法将输入元素直接绘制到画布上,但我认为这是不可能的......


Ilm*_*nen 5

目前还没有办法在WebGL中绘制HTML元素,或者在2D画布上绘制HTML元素(在Firefox扩展之外).如果您想拥有3D元素,最好的办法是使用CSS 3D变换来转换HTML位并将它们放在WebGL画布前面.

替代方法(读取:方式太多的工作)方式是编写自己的输入小部件并执行自己的事件映射.