Three.js: 3DシーンでHUDを作成しますか（WebGLRenderer）？

HTMLを使用する

HTMLの場合は+1。 UI用に_設計された_プラットフォーム用に開発しています。 それを利用してください。 :)

実際、HTMLを使用すべきではない理由がわかりません。 +1

はい、3Dシーンに統合する必要がない限り、キャンバスの上にHTMLを使用します。

ありがとう。
mrdoob、はい、3Dシーンに統合したいと思います。 いくつかの2DグラフィックスにWebGLを使用したいと思います。 しかし、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

GUIにはHTMLを使用するだけなので、<canvas>要素の上に<div>などを追加します。

実際のシーンの上にThree.jsを使用してGUIをレンダリングする場合は、2つのキャンバス要素を重ねて使用します。1つはゲーム/シーン/その他用で、もう1つはGUI用です。 一番上の要素がGUI要素間で透過的であることを確認する必要がありますが、Three.jsでそれが可能かどうかはわかりません...

はい、ほとんどの場合、HTMLが最適な方法であり、はるかに簡単です。

ファンシーになり、HUDをWebGLでレンダリングしたい場合（たとえば、アニメーション化された3Dまたはいくつかのシェーダー効果）、次のようなことができます。

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

（少なくとも2Dオーバーレイの場合、FBOを使用せずに、深度の書き込み/読み取り/マスキングで遊ぶ方法はおそらくいくつかあります）

alterq、このリンクをありがとう。 私は現在、「遊ぶ」方法を見つけていません。 しかし、WebGLRendererでコードを分析したところ、次のようなものを使用できることがわかりました。

var sprite = new THREE.Sprite（{map：tex、useScreenCoordinates：true}）;
scene.addChild（スプライト）;

これは機能します。

しかし、私はまだデュアルレンダリングとこれをブレンドする方法に興味があります。

私は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に基づいています。
最初のシーンの2つの部分をレンダリングし、次にHUDシーンの2つの部分を、PerspectiveCameraであるStereoEffectCameraでオーバーレイしてレンダリングします。

十字線とシーン内のいくつかの要素との相互作用を備えたデモがあります。
https://github.com/trinketmage/three.js-vr-hud/

私は現在、HUDシーンの錐台内で「ラベル」機能に取り組んでいます。ヒントや助けをいただければ幸いです。
ありがとう

誰かがまだ遠近法のシーンの上にオルソシーンをレンダリングする方法を探している場合（オブジェクトを上/左/右/下の境界線に揃えたり、ピクセル単位のサイズにすることができます）、そこに例がありました。

@ cecilemuller-あなたのプロジェクトでは問題を開くことができないので、ここにコメントします。 それは機能しますか？ http://jsbin.com/sisutopede/edit?html、js、output（$＃$ let constをvarに置き換えました）青い球しか見えませんが、何も見えないようですUI要素？

@ trinketmage-素晴らしいデモ/プラグインを作成し、問題1の説明に時間を割いていただき、ありがとうございます。現在、問題2を理解しようとしています： //github.com/trinketmage/three.js-vr-hud/issues/ 2-キーボードを使用しているときは問題なく動作します。モバイルデバイス/ Chrome Dev Toolsを使い始めて、ジャンプしている向きをシミュレートした瞬間です...

• ビデオ： https ：
• ライブ： https ：

補足として、コピー＆ペーストで十分ですが、このスレッドのすべての知識があれば、ある時点で独自のコードを記述できるようになるはずです...

@ stefek99青い球の上に色付きの長方形が表示されているはずです。 ChromeとFirefoxでjsbinを試してみました。スクリーンショットは次のとおりです。

はいますが、あなたが使用できるようにいくつかのES6は、コードに特徴があるバベルREPLを、それが動作していない場合はES5に変換すること。

2020年ですが、ハイブリッドまたは奇妙な方法を使用せずに、ThreeJS内に2D HUDオーバーレイを作成するための最良の方法は何ですか？ 理想的には、ThreeJS内のPixiJSのようなものにアクセスできますか？

@sylwesterdigitalヘルプが必要な場合は、three.jsフォーラムを使用できます。

ええ...私はそこに行ったことがあり、私のアカウントは保留になっているので、コメントしたり、返信したり、新しいトピックを作成したりすることはできません。 ThreeJSコミュニティはどこにも行きませんし、誰もが毎月の支払いをするためにf * Reactをコーディングしていますか？

何年にもわたって動き回った後、WebGLでhudを実行する絶対的な方法はないと思います。それは完全にプロジェクトに依存しますが、私の考えは次のとおりです。

• HUDに特定の効果を必要としない場合は、HTMLを選択してください。「合成コスト」がかかりますが、オーバーレイが多すぎない限り（4倍/ 5倍のサイズの画面オーバーレイを使用すると遅くなります） ChromeでMacBook Pro Retinaを2015年半ばに）、htmlでのHUDの例：
• 何らかの理由でそれをglに含める必要がある場合は、各フレームがすべての上にレンダリングされたカメラの前に配置されるグループを直接配置します。 サイズ変更時に特定のz距離でカメラからグループの範囲を計算して、アイテムを上/右/下/左に配置します。 この方法により、パースペクティブを利用する柔軟性が得られ（HUDで3D要素が必要な場合）、パフォーマンスのコストが最も低くなるはずです（間違っている場合は修正してください）。
• 私の意見では、 @ sylwesterdigitalのより「論理的な」方法は、同じシーン内のテクスチャとして、シーンの上に2番目のレンダリング（正書法またはパースペクティブ）を実行することです。 ただし、大きな欠点は、パフォーマンスの面で、画面サイズにピクセル比を掛けた2番目のレンダラーが発生することです。HUDレンダラーが小さい場合は、品質が低下します。
• Three.jsの上にあるPixi.jsは、 @ sylwesterdigitalの悪い解決策です。
• three.jsの上にある古き良きキャンバスも機能するはずです。私のすばらしい同僚の1人@namideは、開発者。Unityでは、HUDを処理する一般的な方法はCanvasRendererです。すべてのトップ。

したがって、結論として、私の意見では、HUDビジュアルコンポーネントは、許容できるパフォーマンスのコストに依存する必要があります。