用户界面 – 将UI元素直接绘制到具有Three.js的WebGL区域

前端之家收集整理的这篇文章主要介绍了用户界面 – 将UI元素直接绘制到具有Three.js的WebGL区域前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在Three.js中,是否可以直接绘制到WebGL区域(例如,用于单元显示或UI元素),您可以使用常规 HTML5画布元素的方式?

如果是这样,你如何获取上下文以及绘制命令是否可用?

如果没有,还有另一种方法可以通过与Three.js进行协作的其他Three.js或WebGL特定的绘图命令来完成此工作?

我的备份计划是使用HTML div作为叠加,但我认为应该有更好的解决方案.

谢谢!

解决方法

您不能以与普通画布相同的方式直接绘制到WebGL画布.然而,还有其他方法,例如

>像往常一样绘制到一个隐藏的2D画布,并将其作为纹理传送给WebGL
>使用纹理映射四边形绘制图像(例如您的健康框的框)
>通过将其顶点放置到VBO中并绘制路径(和形状),并使用适当的多边形类型绘制
>使用位图字体(基本上是纹理四边形)或实际几何图形绘制文本(three.js为此提供了示例和帮助)

使用这些通常意味着设置一个正交摄像机.

然而,所有这些都是相当多的工作,例如.绘图文本与真正的几何可能是昂贵的.如果您可以使用CSS样式的HTML div来做,那么您应该使用它们,因为它很快就可以设置.另外,通过使用透明度来绘制WebGL画布,应该是一个强大的提示,如果浏览器还没有加速所有内容,GPU将加速其绘图.

还要记住,您可以使用CSS3实现相当多的功能.圆角,alpha透明度,甚至3d透视变换,由Anton在问题评论中的链接所证明.

原文链接:https://www.f2er.com/js/152748.html

猜你在找的JavaScript相关文章