プログラミング

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

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

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

Three.jsの仕事は完璧

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

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

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

-プログラミング

執筆者:

関連記事

Found an unexpected Mach-O header code: 0x72613c21 への対処 Xcode, Admob, xcframework

日々変わっていくAdmobの仕様への対応にとても苦労しています。そんな中、アプリをApple Store Connectへ提出するためXcodeにてArchiveを作成してValidateしようとした …

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

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

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

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

Microsoft AzureでNode.jsゲームをデプロイ – web.configを忘れるな

Node.js+Three.jsでフォートナイトのような建築FPSゲームを自作しております。Paasサービスは手軽で太っ腹なHerokuを利用していますがサーバーがアメリカにあるため通信ラグに悩まされ …

FFmpeg.wasmの使い方。クロスオリジンアイソレーション(COOP,COEP)って何ですの?

今さらですがJavascriptでFFmpegが使えるようになっているらしいとの情報を得て早速試してみました。FFmpeg.wasmというらしいです。公開された当初は容易に使用できたらしいですが、現在 …

スポンサーリンク