UIの手前に3Dオブジェクトを表示したい。原カバンは鞄のお店ではありません。スマートフォン用の表示で見る原カバンは鞄のお店ではありません。Unityを使ったゲーム制作のあれこれを綴っていきます。2018-01-20UIの手前に3Dオブジェクトを表示したい。Unity冬真っ盛りということで、最近は出社途中に缶コーヒーを購入して飲みながら歩いているのですが、つい先日、女子高生の集団からすれ違いざまに「ってか、コーヒー飲んでるしwwww」と声を掛けられました。モテるって辛いですね。おっさんでもコーヒーくらい飲むわ。ここから主題さて、メニュー画面やショップ画面などでUI(uGUI)より上に3Dオブジェクトを表示したいケースってあると思います。Camera」に設定して、UIの前に3Dオブジェクトを置くことで実現できるのですが、例えば下の画像の帽子や杖のように、3DモデルをUIに合わせて画面の端に表示したい場合、その方法ではちょっと難しいです。携帯は機種によって画面のサイズが異なります。UIはAnchorsを設定することで画面サイズが変わっても相対位置が変わらないようにできるのですが、3Dオブジェクトの場合は画面サイズが変わっても表示位置は変わらないので、上の画面の場合、画面サイズの幅を広くするとUIの枠線だけ画面端に表示されて、3Dオブジェクトは枠線からずれて表示されてしまいます。TextureとRawImageを使った方法を紹介したいと思います。TextureでRenderTextureを生成します。2.3Dオブジェクトを表示するためのカメラを作成する次に3Dオブジェクトを表示する専用のカメラを作成、そしてカメラのTargetTexrureの設定に先ほど作成したRenderTextureを指定します。3.カメラの前に表示する3Dオブジェクトを設置する作成した3Dオブジェクト表示用カメラの前に3Dオブジェクトを並べます。こんな感じでそうするとRenderTextureにカメラの撮影した画像が表示されるようになります。4.RenderTextureを表示するためのRawImageを作成する。3Dモデルを表示させたい位置にRawImageを作成し、Textureの項目に作成したRenderTextureを指定します。今回の場合、RawImageをUIの子オブジェクトとして作成すれば、UIの上に3Dモデルが表示されるようになるのですが、このままでは余計なものまで表示されてしまいます。5.Maskを使って必要な箇所だけ表示するMaskをUIの子オブジェクトとして作成し、Maskの子オブジェクトとしてRawImageを定義してあげます。実際に作成してこの方法によりRawImageのAnchorsを指定することで画面サイズが変わっても相対的な位置が変わることはなくなります。アイテムの切り替え等のアニメーションもオブジェクトの位置を横にずらすだけならので実装が簡単になりました。ここまで読んでくれてありがとうございます。01:39UIの手前に3Dオブジェクトを表示したい。5月なのに30度以上の気温になるとか聞いてない。当ブログでは、メールでのお問い合わせ、メールマガジンへの登録などの際に、名前(ハンドルネーム)、メールアドレス等の個人情報をご登録いただく場合がございます。これらの個人情報は質問に対する回答や必要な情報を電子メールなどをでご連絡する場合に利用させていただくものであり、個人情報をご提供いただく際の目的以外では利用いたしません。当サイトでは、個人情報は適切に管理し、以下に該当する場合を除いて第三者に開示することはありません。ご希望の場合には、ご本人であることを確認させていただいた上、速やかに対応させていただきます。アクセス解析ツールについて当サイトでは、Googleによるアクセス解析ツール「Googleアナリティクス」を利用しています。このGoogleアナリティクスはトラフィックデータの収集のためにCookieを使用しています。このトラフィックデータは匿名で収集されており、個人を特定するものではありません。この機能はCookieを無効にすることで収集を拒否することが出来ますので、お使いのブラウザの設定をご確認ください。当サイトからリンクやバナーなどによって他のサイトに移動された場合、移動先サイトで提供される情報、サービス等について一切の責任を負いません。当サイトのコンテンツ・情報につきまして、可能な限り正確な情報を掲載するよう努めておりますが、誤情報が入り込んだり、情報が古くなっていることもございます。当サイトに掲載された内容によって生じた損害等の一切の責任を負いかねますのでご了承ください。●プライバシーポリシーの変更について当サイトは、個人情報に関して適用される日本の法令を遵守するとともに、本ポリシーの内容を適宜見直しその改善に努めます。修正された最新のプライバシーポリシーは常に本ページにて開示されます。スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。