Three.js: 在3d场景（WebGLRenderer）上创建HUD？

使用HTML

为HTML +1。 您正在为_designed_ UI平台开发； 利用它。 :)

其实我不明白为什么你不应该使用HTML！ +1

是的，除非需要将其集成到3d场景中，否则我将在画布顶部使用HTML。

谢谢。
Mrdob，是的，我想集成到3D场景中。 我想将WebGL用于某些2D图形。 但是我没有看到使用THREE.js进行工作的示例。

当您说“整合到3D场景中”时，是指您不希望将UI作为3D顶部的覆盖层，是吗？

Loupax，我已经稍微更改了标题：)我的意思是最上端，但渲染了WebGL。 我的意思是这样的：

http://www.smokycogs.com/blog/o3d-tutorial-4-the-beginnings-of-a-hud/
http://code.google.com/p/o3d/source/browse/trunk/samples_webgl/o3d-webgl-samples/hud-2d-overlay.html?spec=svn218&r=218

我会简单地将HTML用于GUI，因此只需在<canvas>元素顶部使用<div>等...

如果要在实际场景顶部使用Three.js渲染GUI，则可以在彼此顶部使用两个画布元素，一个用于游戏/场景/其他，而顶部则用于gui。 您需要确保GUI元素之间的顶部是透明的，但是我不知道Three.js是否可以实现...

是的，在大多数情况下，HTML是必经之路，它要简单得多。

如果您确实想花哨并用WebGL渲染HUD（例如，用于动画3D或某些着色器效果），则可以执行以下操作：

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

（至少在2D覆盖下，可能有某种方法可以在没有FBO的情况下仅进行深度写入/读取/遮罩操作）

alteredq，谢谢您的链接。 我目前还没有找到“玩”的方法。 但是我分析了WebGLRenderer上的代码，发现我可以使用类似的东西：

var sprite = new THREE.Sprite（{map：tex，useScreenCoordinates：true}）;
scene.addChild（sprite）;

这可行。

但是我仍然对双重渲染和混合的方式感兴趣。

我当时正在从事WebVR项目，但DOM解决方案不是一个选择。 我最终使用纯Three.js完成了HUD。 我创建了一个单独的场景，并将其渲染到原始场景的顶部。

您可以在此处看到实时示例：
http://codepen.io/jaamo/pen/MaOGZV

以及有关此解决方案的博客文章：
http://www.evermade.fi/pure-three-js-hud/

我实际上正在为WebVR开发HUD工具。
它基于您可以在three.js示例中找到的StereoEffect.js。
它在第一个场景的两个部分上进行渲染，然后在叠加了StereoEffectCamera的，都为PerspectiveCamera的情况下呈现HUD场景的两个部分。

有一个带有十字准线并与场景中某些元素进行交互的演示。
https://github.com/trinketmage/three.js-vr-hud/

我目前正在平视显示器场景的视锥范围内使用“标签”功能，我将不胜感激任何提示或帮助。
谢谢

如果有人仍在寻找如何在透视图的顶部渲染Ortho场景的方法（以便您可以将对象对齐到顶部/左侧/右侧/底部边框或以像素为单位的大小），那么我这里有一个示例。

@cecilemuller-您的项目不允许我打开问题，因此我在这里发表评论。 它行得通吗？ http://jsbin.com/sisutopede/edit?html，js，output （我将let const替换var ）我只能看到一个蓝色的球体，但似乎看不到UI元素？

@trinketmage-感谢您创建出色的演示/插件并花时间解释问题1 ，现在我正尝试解决问题2 ： https :

• 视频： https ：
• 直播： https :

在一个旁注中-足够的复制和粘贴-在某种程度上，鉴于该线程的所有知识，我应该能够编写自己的代码...

@ stefek99应该在蓝色球体顶部显示彩色矩形； 刚刚在chrome和firefox中尝试了jsbin，这是一个屏幕截图：

尽管是的，但是代码中有一些es6功能，因此，如果未运行，则可以使用Babel REPL转换为es5。

到2020年，在ThreeJS内不使用混合或怪异方法创建2D HUD覆盖的最佳方法是什么？ 理想情况下，可以在ThreeJS中访问类似PixiJS的东西？

@sylwesterdigital如果需要帮助，可以使用three.js论坛。

是的...我去过那里，而且我的帐户处于暂停状态，因此我无法发表评论，回复或创建新主题。 ThreeJS社区无处不在，每个人都在编码f * React以支付月费吗？

经过多年的摸索，我猜想WebGL中没有绝对的hud方法，它完全取决于项目，但是我的想法是：

• 如果您不需要HUD上的特定效果，请使用HTML，这会产生“合成成本”，但是只要您没有太多的覆盖（如果我使用4倍/ 5倍的屏幕覆盖，它就会变得很滞后）在Chrome上使用Mac Book Pro Retina（2015年中期）在Chrome中显示），例如html中的HUD示例： demo waymaze 。
• 如果出于某种原因需要将其置于gl范围内，我可以直接将其放置在一个组中，即将每个帧放置在渲染在所有内容之上的摄影机前面； 在调整大小时，以特定的z距离计算来自摄像机的组的范围，以将项目放置在顶部/右侧/底部/左侧； 这种方式可以灵活地使用透视图（如果您需要HUD中的3D元素），我想这应该是最低的性能成本（如果我错了，请纠正我）。
• 在我看来， @ sylwesterdigital更“合乎逻辑”的方式是在场景顶部进行第二次渲染（正交或透视），作为同一场景内的纹理。 但是巨大的缺点是，这是一种性能较差的方法，会导致屏幕尺寸乘以像素比率乘以第二个渲染器，或者如果HUD渲染器较小，则质量会下降。
• 在Three.js之上的Pixi.js是一个不好的解决方案@sylwesterdigital ，因为我想您会有2个WebGL实例，而且我认为它很重？
• 在Three.js之上的一块好的旧画布也应该可以工作，我一个令人惊讶的同事@namide教了我一个巨大的开发人员课程：“他们将如何针对视频游戏对其进行优化？”，在Unity中，处理HUD的常见方法是使用CanvasRenderer最重要的。

因此，总的来说，我认为HUD视觉组件应取决于您可以负担的性能成本。