![見出し画像](https://assets.st-note.com/production/uploads/images/82787939/rectangle_large_type_2_c760be2dbb745b8ed848e710c9e695eb.png?width=1200)
メタバース『DOOR』でNFT美術館を作ろう!
こんにちは、あきまるです。
みなさんは、NFTをメタバースで飾りたいと思ったことはありませんか?
oncyberやboxcel、clusterやDecentralandなどいろいろなメタバースが巷にはあふれています。
しかし、いざメタバースにNFTを飾ろうとしたとき、メタマスク等のウォレットを接続しなければ飾れなかったり、イーサチェーンとSymbolチェーンなど、別々のチェーン上のNFTを同時に飾れない、アプリをダウンロードしなければワールドに訪問できないなど何かと不便があるかと思います。
そこで、今回紹介するのはNTTが開発を手掛けたメタバース『DOOR』です。
こちらでは、ブラウザ上で閲覧することができるブラウザメタバースですが、画像等はURLを読み込むため、メタマスク等のウォレットを介在しないため、自由にアートを展示することができます。
こちらは、実際に私が手掛けたルームとなります。
![](https://assets.st-note.com/img/1656323594288-Pr4z9WICEh.png?width=1200)
こちらのルームは、アーティストMahoさんの作品を飾る美術館です。館内を流れる音楽も彼女の作品です。今回の記事執筆に際しても多大なるご協力をいただきました。
ルーム(ワールド)の制作自体もブラウザ上で行うことができるため、特別なソフトウェアをダウンロードする必要はありません。
ただし、作業は画面が大きい方が操作しやすいので、PC環境をお勧めします。
それでは、実際にルームを作ってみましょう。
今回は、既にこちらで用意したファイルをダウンロードいただき、画像URLを差し替えることでアートを展示する空間を作ります。
1 DOORにログインしよう!
DOORは、メールアドレス認証によりログインすることができます。
①DOORホームページ(https://door.ntt/)へアクセス
②ログインを押す
右上のログインボタンを押してください。
![](https://assets.st-note.com/img/1656320175812-smMLGz54EU.png?width=1200)
③メールアドレスを入力
ログインしたいメールアドレスを入力し、メールを送るを押してください。
![](https://assets.st-note.com/img/1656320267879-LqqCMpUVp7.png?width=1200)
④メール認証
メールを開き、記載されたURLを選択してください。
ブラウザ画面が開き、ログイン認証が行われます。
認証完了画面がでればログイン完了です。
2 美術館を作ろう!
それでは、美術館を作っていきましょう。
2-1 ブラウザソフト『Scene Editor』の起動
美術館を作るためのブラウザソフト『Scene Editor』を起動します。
①マイページへ移動
マイページアイコンをクリックし、マイページへ移動します。
![](https://assets.st-note.com/img/1656320411519-HnaULjXIH9.png?width=1200)
②ルームを作る
ルームを作るを押します。
③オリジナルのルームを作る
画面を最下部までスクロールし、オリジナルのルームを作るを押します。
![](https://assets.st-note.com/img/1656320439558-N9qQZJhA8T.png?width=1200)
④空のルームを選択
新しいシーンを押した後、空のルームを選択を押すと、編集ブラウザソフト『Scene Editor』が起動します。
![](https://assets.st-note.com/img/1656320486000-1T7EpjyoaM.png?width=1200)
![](https://assets.st-note.com/img/1656320501952-zDPerPwQCi.png?width=1200)
ルームは床と壁、天井が配置されたデフォルトセットが表示されます。
![](https://assets.st-note.com/img/1656320540358-NVvK0oY2t2.png?width=1200)
2-2 美術館テンプレートの読込み
それでは、あらかじめ準備した美術館セットを読み込みましょう。
①Museum.spokeファイルのダウンロード
以下のURLからMuseum.spokeをダウンロードしてください。
http://mooncradlemuseum.sakura.ne.jp/home/image/museum.zip
②Museum.spokeのインポート
Scene Editorの左上にあるファイルから、.spokeプロジェクトをインポートを押します。
![](https://assets.st-note.com/img/1656320585855-fi8eJih9mR.png?width=1200)
Spokeプロジェクトの読み込みウィンドウ(上書き注意の警告)が出ますので、OKを押します。
ファイル選択画面が出るので、Museum.spokeファイルを選択してください。
Scene Editorに読み込まれます。
![](https://assets.st-note.com/img/1656320603353-vIz1rjf41A.png?width=1200)
2-3 操作説明
ここで、少しだけScene Editorの画面・操作について説明します。
慣れてしまえば結構感覚的に使えるので、ぜひ触ってみてください。
①画面説明
Scene Editorの画面は、以下のとおりです。
基本的にマウスとキーボード操作となります。
![](https://assets.st-note.com/img/1656320621716-VUu0qBEGK4.png?width=1200)
上部:メニュー・ツールバー
右上:ヒエラルキー(画面内に配置されたオブジェクト一覧)
名称からオブジェクトを選択することが可能
オブジェクトを選択してDeleteボタンを押すと、オブジェクトの消去も可能。
右下:オブジェクトのステータス設定画面
大きさや回転などオブジェクトの設定を行うことができる。
左上:操作画面
オブジェクトの配置、位置移動、削除など基本的な操作を行う画面です。
アバターの位置移動については、キーボードとマウスで行います。
左下:新規オブジェクト選択画面
新たに配置したいオブジェクトを一覧から選び、ドラッグアンドドロップで操作画面内に配置することができます。
②視点(アバター)の移動操作
視点(アバター)の移動は、キーボードとマウスで行います。
マウスの右ボタンを長押ししながら、キーボードのESADを押して移動をします。
E:前進 S:後退 A:左へ移動 D:右へ移動
マウス右ボタン長押し:視点の方向(上下左右)の移動
もし、視点がどこかに飛んでしまった場合はFを押すと元の位置の付近まで戻ります。
③オブジェクト操作
<オブジェクトの選択>
オブジェクトはマウスでクリックすることで選択できます。
![](https://assets.st-note.com/img/1656321167827-WYbfccLf78.png?width=1200)
<位置の移動>
オブジェクトは操作バーの十字アイコンを押すことにより、3次元移動させることが可能です。
![](https://assets.st-note.com/img/1656321201526-S8VJCp3u7H.png?width=1200)
矢印をマウスで選択したままずらすと、矢印の正方向または逆方向へ移動します。
X軸:赤 Y軸:緑 Z軸:青
あまり大きく移動しすぎるとオブジェクトがどこかに吹っ飛んでいくので気を付けてください。
また、青緑赤の小さい正方形がありますが、これはクリックしたまま移動させると平面移動ができます。
オブジェクトは、基本的にグリッドに合わせて移動します。
移動単位も0.1m~いくつも選択することが出来ますが、私の場合0.1mと0.5mを使い分けています。
また、グリッドからずれてしまうことが多々あるので、マグネットボタンをオフにすると微調整を行うことができます。
![](https://assets.st-note.com/img/1656321234806-pq00rs1L3O.png?width=1200)
<オブジェクトの回転>
操作バーで回転アイコンを押すと、オブジェクトを回転させることができます。
![](https://assets.st-note.com/img/1656321258213-rjQY2lWkxB.png?width=1200)
X軸:青 Y軸:緑 Z軸:赤 の各回転方向で回転させます。
![](https://assets.st-note.com/img/1656321286898-rkzJtFNeoi.png?width=1200)
また、EボタンorQボタンを押すと、横回転します。
<ステータス変更>
選択中のオブジェクトは、ステータス画面で配置調整、大きさ調整、テクスチャ選択、リンク挿入などが可能です。
A 配置調整
X、Y、Zそれぞれ数値を変更することで位置を調整することができます。
B 大きさ調整
X、Y、Zそれぞれ数値を変更することで大きさを拡大縮小することができます。
![](https://assets.st-note.com/img/1656321343711-WmEquB8fW3.png?width=1200)
デフォルトではXYZそれぞれ値が連動していますが、リンクボタンをオフにすることで一つのステータスのみ変化させることも可能です。
C テクスチャ選択
壁、床、柱などはテクスチャ(壁紙)を選択するすることができます。
好みのテクスチャに変更してみましょう。
現在は色の変更はできないので、既存素材を活用することとなります。
![](https://assets.st-note.com/img/1656321381029-uWPPRJYM8N.png?width=1200)
![](https://assets.st-note.com/img/1656322565479-DUu9pgshca.png)
D リンクの挿入
ピクチャ枠の場合、リンクを挿入する欄があります。
このリンクを変更することで表示したい画像を変更することができます。
<よく使うキーボード操作>
操作取り消し:Ctrl+Z
オブジェクトのコピー:Ctrl+C
オブジェクトのペースト:Ctrl+V
オブジェクト複数選択:shift+左クリック
2-4 NFTアートを飾ろう
それでは、NFTアートを実際に飾ってみましょう。
現在は、ブランクアートがすべて飾ってありますので、オブジェクトを選択してURLを変更することでアートを表示させることが出来ます。
①URLの取得
<OpenSea・Foundation・COMSA>
取得したい画像を右クリックし、『画像を新しいタブで表示』を選択します。
![](https://assets.st-note.com/img/1656321406821-nRRmm3UBsB.png?width=1200)
表示されたタブのURLをコピーします。
![](https://assets.st-note.com/img/1656321420115-BF4jCRTem5.png?width=1200)
<NFT-Drive>
NFT-Driveは、画像をクリックすると情報が表示されるので、この中のデータアドレスをクリックします。
データが表示されるのでこのURLをコピーします。
※現在、何故か画像が読み込みエラーとなる現象が発生しています。
![](https://assets.st-note.com/img/1656321867689-Rs96985CT4.png?width=1200)
②URLの貼り付け
Scene Editorにて、変更したいピクチャオブジェクトを選択します。
右下のステータス画面に、URL入力欄があるので、既存URLを消して先ほどコピーしたURLを貼り付けます。
読み込まれると、画像が表示されます。
2-5 NFTサイトへのリンクを張ろう
今度は、好きなホームページへ移動するためのリンクを張ってみましょう。
今回は、作品のオークションページへ飛ぶようにします。
①URLの取得
飛びたいサイトのURLをコピーしてきます。
![](https://assets.st-note.com/img/1656322777560-YSZ6Ifh1UJ.png?width=1200)
②URLの貼り付け
Scene Editorにて、リンクを挿入したいオブジェクトを選択します。
右下のステータス画面に、URL入力欄(Link Href)があるので、リンクを繋げたいURL(例えばFNDやCOMSAのページ)を貼り付けます。
リンクが正常に稼働しているかどうかは、公開後に確認することが出来ます。
2-6 完成したルームの保存
ルームが完成したら、保存しましょう。
Scene Editorの左上『ファイル』を押すと、保存ボタンが出るので保存を押します。
![](https://assets.st-note.com/img/1656322537206-a8ovmyl1Hg.png?width=1200)
保存されたファイルは、「マイページ>ルームを作る」にて編集を行うことができます。
また、『名前を付けて保存』した場合は、ルーム編集データの複製が生成されます。
3 ルームを公開しよう!
それでは、完成したルームを公開しましょう。
①『公開する』を押す
Scene Editorの右上にある『公開する』ボタンを押す。ルームの保存が行われた後、ルームの作成画面が表示されます。
![](https://assets.st-note.com/img/1656323344977-d5I2B9owTI.png?width=1200)
保存して公開を押します。
![](https://assets.st-note.com/img/1656322149918-rs5jj2IFOl.png?width=1200)
![](https://assets.st-note.com/img/1656322252211-aZS0tjTVSs.png)
![](https://assets.st-note.com/img/1656322281132-XF19ZjdaQ6.png?width=1200)
②ルームへの入室
ルームの新規作成を押すと、ルームが生成されて入室ができるようになります。
![](https://assets.st-note.com/img/1656322006835-1DW828Oknd.png?width=1200)
![](https://assets.st-note.com/img/1656322027780-2T7N5gCo5H.png?width=1200)
今すぐ入室か、ルームに入室を押してください。
![](https://assets.st-note.com/img/1656322051631-v5HGFAmduR.png)
URLを共有すれば、他の方々にも見せることが可能です。
完成です、お疲れ様でした。
4 おわりに
皆様は、NFT美術館を創り上げることはできましたでしょうか。
私が制作したMahoさんのmahorobart Museumでは、今回紹介した以外にも、銘板を作成したりYouTube動画をリンクするなど、かなり自由度の高いルームの組立が可能となっています。
また、blender等でモデリングしたワールドも導入が可能です。
是非一度触って頂き、カスタマイズしてみて下さい。
この記事が気に入ったらサポートをしてみませんか?