参考ビデオ:Image Textures And Materials (A-Frame Tutorial – WebVR) から
自身のUdemyのA-Frameコースのコンテンツの一部を、YouTubeチャンネルに公開されている方の”Learn A-Frame (WebVR)”プレイリストを見ながら進めていますが、この回は、Glitchの仕様なのでビデオにはありません。
テクスチャを3Dオブジェクトに追加し、マテリアルプロパティを使って調整していく。
(画像内の円の記述はボックスの間違いです)
<body>
<a-scene>
<!-- 水色のボックス -->
<a-box color="#87CEFA"
width="4" height="4" depth="4"
position="-2 1.5 -9">
</a-box>
<!-- 茶色のボックス -->
<a-box color="#A0522D"
width="4" height="4" depth="4"
position="2 1.5 -9">
</a-box>
</a-scene>
</body>
テクスチャは、前回の「テクスチャの準備」の回で、MetalとBrickの、AlbedoとNormalをそれぞれダウンロード済み。
この手順でやり直す。
- 必要なファイルやフォルダのZIPファイルを作成
- プロジェクトのassetsセクションにフォルダをアップロード
- プロジェクトのTool > Terminal
- wgetでurlからzipファイルを取り出す
$ wget -O file.zip https://url-to-your-zip - カレントディレクトリに展開
$ unzip file.zip - ZIPファイルを削除(__MACOSXフォルダも削除)
$ rm file.zip - 最後にアプリを更新して、新しいファイルがエディタに表示されるようにする
$ refresh
参考: Uploading a whole folder Glitchで複数ファイルアップロードできる? – Glitchでプログラミング WebARが楽しすぎた!A-Frameで3Dモデルを表示させる方法の備忘録 ウェブサイトの公開 「__MACOSX」の意味は? いま敢えて「zip」を見直す
Upload an Asset からだとzipファイルは選択できず、zipファイルをAssetsセクションにドラッグ。
何故かまたSafariでGlitchのターミナルを編集できないので、Chromeに変更。今のところ、デベロッパーツールには新しい赤字の警告は出ていない。
下記のように打つと、それぞれの結果が。Assetsセクションにドラッグ&ドロップしたzipファイルは含まれていない。
$ pwd
/app
$ ls
index.html LICENSE README.md script.js style.css TODO.md
- pwd 現在のディレクトリを確認
- wget ネットワーク上のファイルを取得
- unzip ファイルの解凍
- ls 中身を見る
- ls -la 詳細表示
- rm ファイルの削除
- rm -r ディレクトリ削除
- refresh リロード
$ wget -O file.zip https://url-to-your-zipの、https://url-to-your-zipのアドレスを、assetsセクションにアップロードしたTextures.zipファイルのurlに置き換えて実行。
これはネット上の何処かからカレントディレクトリにファイルを持ってくることなのかな。
実行後に、lsで中身を確認すると、以下のように新しくfile.zipが出来ていました。
$ ls
file.zip index.html LICENSE README.md script.js style.css TODO.md
$ unzip file.zip でzipファイルを展開。
Texturesフォルダの展開は無事にできたものの、また__MACOSXも出てきてしまった。
__MACOSXを出ないようにする方法もあるようだけど、今回は削除の方向で。
$ ls
file.zip index.html LICENSE __MACOSX README.md script.js style.css Textures TODO.md
file.zipと__MACOSXのフォルダを削除すればいいよね。
むむ。zipファイルはファイルで、__MACOSXはフォルダでした。
__MACOSXを rm -r で実行し直す。
Texturesフォルダ下に、各jpg画像。欲しいのが揃った。
ところで、ブログを書いた直後にUIが変わったようで、Filesという項目ができていたので、フォルダごとアップロードできるか試してみましたが、画像1枚しか選択できないのは変わらないようです。
次回はテクスチャの本題に戻ります。