在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在问题评论中的链接所证明.
