プログラミング

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

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

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

Three.jsの仕事は完璧

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

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

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

-プログラミング

執筆者:

関連記事

Android Studio Admob Error “No Ads Config” from Domain “com.google.android.gms.ads

D/MyApp: {“Code”: 3,“Message”: “No ad config.”,“Domain&#82 …

Android studio|FFmpegでやりたい放題するための準備

動画を利用したアプリを作成するにあたりFFmpegを使用できると大変便利です。Web上に多数の情報がありますが、数年前の記事は役に立たなかったり、実用的な情報が少なかったりします。本記事ではAndro …

MacOSアプリ公開:備忘録、ライブラリLink

Web上にMacOSアプリ公開に関する情報は少なくて苦労しています。iPhoneアプリと比較した場合、MacOSアプリはAdmobで稼ぐという手段がなく有料版リリースをするしかないので開発者からは敬遠 …

弾丸と壁/人の接触判定を少し真面目に実装してみる|ゲーム作成

フォートナイトみたいなオンラインバトロワゲームを作っています。優秀なサンプルコードから作成を開始したので早い段階で一応形にはなりました。しかし、サンプルをいじりすぎて接触判定に矛盾が生じてきてしまいま …

サイトの仕様: ナビゲーションを解決する方法。Admobポリシーセンター広告制限

一年ほど前、突如としてAndroidアプリのAdmob広告に配信制限がかかりました。理由は「サイトの仕様: ナビゲーション」。これが厄介で、一体何を修正すべきなのかが全く分かりません。Web検索をかけ …

スポンサーリンク