プログラミング

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|FFmpegでやりたい放題するための準備

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

AndroidアプリのGoogle Play Console審査が異常に長い場合の対処法

最近、Andoridアプリのアップデートを行いました。5000DLほどのアプリですがいつもならGoogle Play Console審査は数時間で完了しています。しかし5日ほど経っても審査が終わりませ …

新手の架空請求? GOOGLE CLOUDSINGAPORE JPNから¥31のクレジットカード請求がきた

決算のために会計処理をしているとクレジットカード明細に覚えのない請求がありました。「GOOGLE CLOUDSINGAPORE JPN ¥31」えっ?究極のケチな私はよほどのことがない限り有料のサービ …

2重振り子の数値シミュレーション、解析から結果描画まで[Octave / Matlab / Android iPhoneアプリもあるよ]

久々に数値解析をやってみたくなりました。題材としては多くの人がやっている二重振り子が面白そうです。では言語は何にしようかと迷うところですが、コードを書いて計算して結果を描画するまで可能な「Octave …

no image

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

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

スポンサーリンク