プログラミング

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

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

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

Three.jsの仕事は完璧

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

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

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

-プログラミング

執筆者:

関連記事

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

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

Javascriptでまばたき検知 face-api.js landmarks

顔認識の技術の発展により、今日ではまばたきの検知まで容易に行えるようです。例えばPython、OpenCV、dlibを使用したものではhttps://www.pyimagesearch.com/201 …

Python pyworld インストールできない時の対処法

Windows10でpyworldをインストールしようとしたら、途中で止まってしまった。なんかWarningがでてました。 WARNING: Ignoring invalid distribution …

Android App: How to share video in external storage to MediaStore?

Code Android Studio Electric Eel | 2022.1.1 Patch 2[Java]String path = xxx; //path of the video in t …

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

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

スポンサーリンク