オリジナルポストカードは”こちら”で好評発売中!

A-Frameを使ってみたい7 テクスチャのアップロード 3D/AR29

参考ビデオ: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をそれぞれダウンロード済み。

 Glitchにフォルダごとアップロード

この手順でやり直す。

  1. 必要なファイルやフォルダのZIPファイルを作成
  2. プロジェクトのassetsセクションにフォルダをアップロード
  3. プロジェクトのTool > Terminal
  4. wgetでurlからzipファイルを取り出す
    $ wget -O file.zip https://url-to-your-zip
  5. カレントディレクトリに展開
    $ unzip file.zip
  6. ZIPファイルを削除(__MACOSXフォルダも削除)
    $ rm file.zip
  7. 最後にアプリを更新して、新しいファイルがエディタに表示されるようにする
    $ refresh
参考:
Uploading a whole folder
Glitchで複数ファイルアップロードできる? – Glitchでプログラミング
WebARが楽しすぎた!A-Frameで3Dモデルを表示させる方法の備忘録
ウェブサイトの公開

「__MACOSX」の意味は? いま敢えて「zip」を見直す

 プロジェクトのassetsセクションにフォルダをアップロード

Upload an Asset からだとzipファイルは選択できず、zipファイルをAssetsセクションにドラッグ。

 プロジェクトのTool > Terminal

何故かまた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でurlからzipファイルを取り出す

$ 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  

 ZIPファイルを削除

file.zipと__MACOSXのフォルダを削除すればいいよね。
むむ。zipファイルはファイルで、__MACOSXはフォルダでした。

 MACOSXフォルダも削除

__MACOSXを rm -r で実行し直す。

 最後にアプリを更新して、新しいファイルがエディタに表示されるようにする

Texturesフォルダ下に、各jpg画像。欲しいのが揃った。

ところで、ブログを書いた直後にUIが変わったようで、Filesという項目ができていたので、フォルダごとアップロードできるか試してみましたが、画像1枚しか選択できないのは変わらないようです。

次回はテクスチャの本題に戻ります。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトは reCAPTCHA によって保護されており、Google のプライバシーポリシー利用規約が適用されます。