この記事で使うもの
- Spatialのアカウント(メタバース空間Spatialへ、作ったものを配置します)
- Sketcfabのアカウント(素材となる3Dモデルをダウンロードします)
- Blender(この記事では、ver 3.6.0を使っています)
イチから3Dモデルを作るのは…
ある日のこと。「Spatialにマガジンラックを置きたい…」と、猛烈に思うようになりました。
コチラの記事「メタバース空間をGoogleストリートビューの好きな場所へ配置するやり方」でも紹介した、無料で使えるメタバース空間「Spatial」に、「ドーナツ部長の雑誌」を飾るマガジンラックを置きたいと考えたのです。
…といっても、イチから3Dモデルを作って、テクスチャやマテリアルを設定して…では、ちょっと先が見えないので。3D素材をダウンロードして、雑誌部分の画像を差し替える程度の修正で用意できないかな…という考えが浮かんできました。
今回、素材として選んだマガジンラックは、コチラのデータです。
![スクリーンショット 2023-07-06 110202.jpg](https://i0.wp.com/qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416622/54234af7-34c2-e75a-de31-0ad62db9f3a9.jpeg?w=920&ssl=1)
「Sketcfab」という無料で利用可能な3Dモデルのプラットフォームから、ダウンロードしました。
Sketcfabとは?
基本無料で使える3Dモデルを集めたプラットフォーム
Web上で誰でも簡単に、3Dモデルを公開したり、共有したりできるサービスです。
ブラウザ上で閲覧、ダウンロードもできるので特別なソフトをインストールすることなく使えるというのが嬉しいですね。
![スクリーンショット 2023-07-06 123127.jpg](https://i0.wp.com/qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416622/0b779b80-b9cd-d272-4b53-4636dd9a59bc.jpeg?w=920&ssl=1)
室内の装飾から、「どこで使うの?」みたいなアセットまで、様々なジャンルの3Dモデルが揃っているので、ぜひ一度見てみることをオススメします。
各素材の権利は必ず確認すること
素材の権利(商用利用OKなのか)、クレジット表記の必要性などは、必ずご確認ください。
![スクリーンショット 2023-07-06 110945 - コピー (2).jpg](https://i0.wp.com/qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416622/801263a6-fcc6-e4e2-96d6-c6b45172fa16.jpeg?w=920&ssl=1)
権利やクレジット表記は「ライセンス情報(Licensing infomation)」から確認ができます。
上記の場合では、
- CC Attribution(=Creative Commons Attribution)
→ クリエイティブ・コモンズ(作成者が二次利用を許可しています) - Author must be credited. Commercial use is allowed.
→ 作成者のクレジットを明記。商用利用はOK。
と、ありますので「クレジットを明記」すれば、二次利用も商用利用もOKということになります。
明記するクレジットは「opy Credits」から取得可能です。
ダウンロード
まずは、さきほどの3Dモデルのページ「Download 3D Model」を選択して、
![スクリーンショット 2023-07-06 110831.jpg](https://i0.wp.com/qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416622/f706e2ae-f220-97af-43fd-c9841be5f779.jpeg?w=920&ssl=1)
今回は「Blender」をつかうので、「GLBデータ」をダウンロードします。
![スクリーンショット 2023-07-06 110945.jpg](https://i0.wp.com/qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416622/180aaa20-9447-9933-cf17-b9fb74873455.jpeg?w=920&ssl=1)
ダウンロードが完了したら、いよいよBlenderでの作業です。
Blenderを立ち上げる
Blenderを立ち上げると、立方体オブジェクトがデフォルトで表示されます。
少しジャマなので… 「Delete」ボタンなどで、消去してしまいましょう。
![スクリーンショット 2023-07-06 112347.jpg](https://i0.wp.com/qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416622/5563f726-8646-229f-a989-636cb403591f.jpeg?w=920&ssl=1)
File > import > glTF2.0(ジーエルティーエフ)
ウィンドウが表示されるので、さきほどダウンロードしてきた3Dモデルを選択し、「Import glTF2.0」を押します。
すると、このようにマガジンラックの3Dデータが読み込まれました。
![スクリーンショット 2023-07-06 112904.jpg](https://i0.wp.com/qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416622/aa4e2e27-dc53-ac58-37da-bc3fb947fbda.jpeg?w=920&ssl=1)
仕組みを見てみる
この3Dモデルの本の部分は、どうやって作られているのでしょうか?
ちょっとデータを触って確認してみます。(Blenderの使い方は、ここでは省略させて頂きます)
棚は、ベースカラー(黒)で塗られている状態で、特にテクスチャやマテリアルは設定されていません。ベースカラーとライトアップによって、質感のある本棚にしているようですね。
![スクリーンショット 2023-07-06 113254.jpg](https://i0.wp.com/qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416622/35743a01-6f80-3d90-c75c-8556befbeacd.jpeg?w=920&ssl=1)
雑誌部分をクリックすると、雑誌の表紙は「マテリアル」で画像を読み込んでいることが分かりました。見開きの表紙の画像を読み込んで、雑誌の表面に当てているようです。
![スクリーンショット 2023-07-06 113435.jpg](https://i0.wp.com/qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416622/a9984faf-5267-6949-4135-07424043e889.jpeg?w=920&ssl=1)
つまり…差し替えられる画像さえ用意できれば、マテリアルの読み込み設定から変更できそう…!ということになります。
ここでは、事前に制作した雑誌の表紙画像(おもて表紙/背表紙/うら表紙がセットになった画像を制作し、準備致します。
マテリアルの差し替え
さぁ、いよいよ終盤。ここでは、ついに雑誌の表紙を差し替えていきます。
今回は、下記の表紙へと変更します。
![material.png](https://i0.wp.com/qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416622/c39c3406-a185-6992-3f4e-e9e32b184367.png?w=920&ssl=1)
まず、画面上の「Shading」を押して、下記の画面を表示してください。
![スクリーンショット 2023-07-06 113730.jpg](https://i0.wp.com/qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416622/b850bc9b-edac-6752-5462-08329441773c.jpeg?w=920&ssl=1)
続いて、表紙を差し替えたい雑誌オブジェクトをクリックします。
![スクリーンショット 2023-07-06 114132.jpg](https://i0.wp.com/qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416622/e5a39f2e-31bf-ae0a-106e-b91638aa7fb0.jpeg?w=920&ssl=1)
「フォルダ」のマークを押して、読み込む画像を探して、アップロードします。
※フォルダのマークが無い方は、「フォルダ」が表示される位置にあるアイコンをクリックして、フォルダアイコンを出現させます。
![スクリーンショット 2023-07-06 114304.jpg](https://i0.wp.com/qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416622/84421c6e-df96-2d29-c118-84e4fa3ca739.jpeg?w=920&ssl=1)
今回は6冊が並んでいますので、6冊分の画像を全て変更していきます。
6冊全部変更したものが、コチラです。
![スクリーンショット 2023-07-06 115222.jpg](https://i0.wp.com/qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416622/04ca8d13-835b-b0c4-7bdf-66bdef698c5e.jpeg?w=920&ssl=1)
部長の雑誌が並ぶマガジンラックが出来上がりました!あとは、このデータを書き出してみます。
※ここで作成したBlenderのデータも一緒に保存をしておきましょう。
File > Export > glTF2.0(ジーエルティーエフ) で「.glb」形式で書き出します。
glbファイルをSpatialへ
Spatialへログインし、アップロードボタンから、さきほど作った「glb」ファイルをアップロードしてみます。(ここでは、Spatialの詳しい操作方法は、省略させて頂きます)
![スクリーンショット 2023-07-06 115553.jpg](https://i0.wp.com/qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416622/668a387b-adad-c57f-eed1-a491a98768cc.jpeg?w=920&ssl=1)
…できました!
無事にアップロードが終了すると、さっき作成した部長の雑誌が並ぶ本棚が配置されました。
意外と…簡単にできたように思いませんか?マテリアルの修正や変更は、意外とシンプルで使いやすいのかもしれませんね。