プログラミング

Three.js 重なり合う透過オブジェクトの描画。奥の物が描かれない?

投稿日:2022年7月12日 更新日:

透過のあるテクスチャーを貼ったオブジェクトを複数描画すると、奥のオブジェクトが描かれない状況に陥りました。結論から言うと、私のコーディングミスでした。Three.jsは完璧です。疑って申し訳ありませんでした。

Three.jsの仕事は完璧

透過オブジェクトが複数あった場合、Three.jsは自動で奥のオブジェクトから先に描画してくれるので、「奥の物が描かれない」という状況にはならないようです。また、自分で奥にあるものから先に描画されるよう、描画順序についてコーディングする必要もないようです。

奥の物が描画されなかった原因

Meshに位置情報を与えず(0,0,0のまま)、Geometryに位置情報を与えてしまっていたからのようです。
Geometryには形状の情報だけを与え、Meshにposition.setで位置情報を入れたところ全て適切に描画されるようになりました。
おそらくMeshのpositionに対して視点からの距離をソートして奥から描画しているのではないでしょうか。BoxジオメトリなどがBoxの端ではなく中心を基準に形状が作成される理由が何となく分かります。

-プログラミング

執筆者:

関連記事

Cycle inside OOO; building could produce unreliable results. Xcodeで史上最高に難解なエラーでハマった話

あるiPhoneアプリを約2年ぶりにアップデートしようと思い、XcodeでArchiveを実行したら見たことのないエラーが出ました。 Cycle inside OOO; building could …

Double (Multiple) pendulum simulation by Javascript

Source Code mPendulum.html <!DOCTYPE html> <html lang="en"> <head> <m …

2重(N重)振り子の数値シミュレーション – Javascriptで計算から描画まで

2重振り子を数値シミュレーションをJavascriptでやってみます。Javascriptでやる利点は計算後の結果表示アニメーションまで容易に行える事だと言えます。2重振り子の解法に関する記事はWeb …

Node.jsからGo-langへ移行

ストレスなく思いっきり遊べるゲームを実現したくなりました。現行のNode.jsでは処理性能が限界。PaaSが対応しているものの中で高速化が望めるものがGo言語しかない。全くもって無知だがやるしかない。 …

no image

ショーモナイノ/ ソースコード(クライアントサイド)

サーバサイドのソースコードを公開したところ、結構ビュー数が伸びているようです。なのでクライアントサイドも公開しておきます。何かの役に立てればと思います。 内容はとんでもないジャンクコードとなっています …

スポンサーリンク