メインコンテンツへスキップ

アセットバンドル

8th WallのCloud EditorのAsset bundle機能では、マルチファイルのアセットを使用することができます。 これらのアセットは通常、相対パスを使って内部で互いに参照し合うファイルを含んでいます。 ".glTF"、".hcap"、".msdf"、キューブマップアセットなどが一般的な例としてあげられます。

.hcapファイルの場合、"my-hologram.hcap "のように「main」ファイル経由でアセットを読み込むことになります。 このファイルの内部には、.mp4や.binファイルなど、他の依存リソースへの参照が多数存在します。 これらのファイル名は、.hcapファイルからの相対パスを持つURLとして、メインファイルから参照・ロードされます。

AssetBundleGif

アセットバンドルの作成​

1. ファイルを準備する​

以下のいずれかの方法で、アップロード前にファイルを準備します：

  • ローカルファイルシステムから個々のファイルを複数選択できます
  • ZIPファイルを作成します。
  • アセットに必要なファイルがすべて入っているディレクトリを探します（注意：ディレクトリのアップロードは、すべてのブラウザでサポートされているわけではありません）。

2. 新規アセットバンドル作成​

Option 1​

Cloud Editorで、 ASSETS の右にある "+" をクリックし、"New asset bundle" を選択します。 次に、アセットタイプを選択します。 glTFやHCAPのアセットをアップロードしない場合は、「その他」を選択してください。

NewAssetBundle

Option 2​

または、Cloud Editorの右下にある「ASSETS」ペインに、assetsまたはZIPを直接ドラッグすることもできます。

NewAssetBundleDrag

3. アセットバンドルのプレビュー​

ファイルをアップロードした後、プロジェクトに追加する前にアセットをプレビューすることができます。 左ペインで個々のファイルを選択すると、右ペインでプレビューができます。

NewAssetBundlePreview

4. "main"ファイルを選択する​

アセットの種類によってファイルを参照する必要がある場合は、このファイルを「メインファイル」として設定してください。 アセットタイプがフォルダ（キューブマップなど）を参照する必要がある場合は、「none」を「メインファイル」に設定します。

注意：このステップは、glTF または HCAPアセットには必要ありません。 これらのアセットタイプには、メインファイルが自動的に設定されます。

メインファイルを後から変更することはできません。 間違ったファイルを選択した場合、アセットバンドルを再アップロードする必要があります。

5. アセットバンドル名を設定する​

アセットバンドルに名前を付けます。 プロジェクト内でアセットバンドルにアクセスするためのファイル名です。

6. "Create Bundle"をクリックします​

アセットバンドルのアップロードが完了し、Cloud Editorのプロジェクトに追加されます。

アセットバンドルのプレビュー​

Cloud Editor内で直接アセットのプレビューが可能です。 左のアセットを選択すると、右のプレビューが表示されます。 右側の "Show contents "メニューを展開し、バンドル内のアセットを選択することで、バンドル内の特定のアセットをプレビューすることができます。

AssetBundlePreview

アセットバンドル名を変更する​

アセットの名前を変更するには、アセットの右側にある三点リーダーアイコンをクリックし、 Renameを選択します。 アセットの名前を編集し、Enterキーを押して保存します。 重要：アセット名を変更した場合、プロジェクトを通して、すべての参照が更新されたアセット名を指していることを確認する必要があります。

アセットバンドルの削除​

アセットを削除するには、アセットの右側にある三点リーダーアイコンをクリックし、 Deleteを選択します。

アセットバンドルの参照​

プロジェクト内の html ファイル（例：body.html）からアセットバンドルを参照するには、 src= または gltf-model= パラメータに適切なパスを指定するだけです。

javascriptからアセットバンドルを参照するには、 require()を使用します。

例 - HTML​

<!-- 例1 -->
<a-assets>
  <a-asset-item id="myModel" src="assets/sand-castle.gltf"></a-asset-item>
</a-assets>
<a-entity 
  id="model"
  gltf-model="#myModel"
  class="cantap"
  scale="3 3 3"
  shadow="receive: false">
</a-entity>


<!-- 例2 -->
<holo-cap 
  id="holo" 
  src="./assets/my-hologram.hcap"
  holo-scale="6"
  holo-touch-target="1.65 0.35"
  xrextras-hold-drag
  xrextras-two-finger-rotate 
  xrextras-pinch-scale="scale: 6">
</holo-cap>

例 - javascript​

const modelFile = require('./assets/my-model.gltf')