ホスティングパッケージ

メタタグ

8th Wall <meta>タグを使用して、一般的なレンダラーやパッケージをクラウドエディタープロジェクトに素早くロードします。

name属性でrendererとpackage のどちらを読み込むかを指定し、content\` 属性でどのレンダラー/パッケージを読み込むかを指定する：

<meta name="8thwall:renderer" content="renderer:version">
<meta name="8thwall:package" content="@package.package">

レンダラ

<meta name="8thwall:renderer" ...>タグを使って、A-Frame、three.js、またはBabylon.jsをクラウドエディタプロジェクトに読み込むことができます：

<meta name="8thwall:renderer" content="aframe:version">
<meta name="8thwall:renderer" content="threejs:version">
<meta name="8thwall:renderer" content="babylonjs:version">

aframe

A-Frame の特定のバージョンのみが、<meta> タグを介してサポートされています。 これは、8th WallがA-Frameのカスタムバージョンを使用しているためで、ARをよりよくサポートするためにさまざまな改良が加えられている。 これは、8th WallがA-Frameのカスタムバージョンを使用しているためで、ARをよりよくサポートするためにさまざまな改良が加えられている。

• 0.8.2
• 0.9.0
• 0.9.2
• 1.0.3
• 1.0.4
• 1.1.0
• 1.2.0
• 1.3.0
• 1.4.1
• 1.5.0

例

<meta name="8thwall:renderer" content="aframe:1.5.0">

threejs

すべてのバージョンのthree.jsは、<meta>タグを介してサポートされています。

three.js 160+では、<meta>タグの代わりにimport mapsを使う必要がある。 例はこちらを参照。 例はこちらを参照。

例

<meta name="8thwall:renderer" content="threejs:159">

パッケージ

<meta name="8thwall:package" ...>タグを使用して、一般的なパッケージをクラウドエディタプロジェクトに読み込むことができます：

パッケージ	コンテンツ価値
XRExtras	8thwall.xrextras\`。
ランディングページ	8thwall.landing-page\`。
コーチング・オーバーレイ	8thwall.coaching-overlay\`。
ビュー	vuejs.vue\`。
HoloVideoObject	mrcs.holovideoobject\`。
リアクト	@react.react
リアクトDOM	@react.react-dom
リアクト・ルーター DOM	react.react-router-dom\`。
A-Frame Extras	aframe.aframe-extras\`。
Aフレーム物理システム	aframe.aframe-physics-system\`。

例

<meta name="8thwall:package" content="@8thwall.xrextras">

上記の<meta>タグはすべて公式CDN URLを評価する。 彼らは、サポートされている最新バージョンのパッケージを引っ張ってくる。 特定のバージョンを使用したい場合は、代わりに <script> タグを使用してください。

8番目の壁 CDN

8th Wallは、利便性のために特定のバージョンに固定された様々なパッケージをCDN上でホストしています。

ammo

• https://cdn.8thwall.com/web/aframe/ammo.wasm.js
• https://cdn.8thwall.com/web/aframe/ammo.wasm.wasm

aframe-physics-system

• https://cdn.8thwall.com/web/aframe/aframe-physics-system-3.2.0.min.js
• https://cdn.8thwall.com/web/aframe/aframe-physics-system-4.0.1.min.js
• https://cdn.8thwall.com/web/aframe/aframe-physics-system-4.0.1-updated.min.js
• https://cdn.8thwall.com/web/aframe/aframe-physics-system-4.2.2.min.js

aframe-animation-component

• https://cdn.8thwall.com/web/aframe/aframe-animation-component-5.1.2.min.js

アフレーム・クロマキー素材

• https://cdn.8thwall.com/web/aframe/aframe-chromakey-material-1.1.1.min.js

アフレコ・エキストラ

• https://cdn.8thwall.com/web/aframe/aframe-extras-4.2.0.min.js
• https://cdn.8thwall.com/web/aframe/aframe-extras-6.1.0.min.js
• https://cdn.8thwall.com/web/aframe/aframe-extras-6.1.1.min.js
• https://cdn.8thwall.com/web/aframe/aframe-extras-7.2.0.min.js
• https://cdn.8thwall.com/web/aframe/aframe-extras-7.2.0.min.js

aframe-particle-system-component

• https://cdn.8thwall.com/web/aframe/aframe-particle-system-component-1.1.3.min.js
• https://cdn.8thwall.com/web/aframe/aframe-particle-system-component-1.1.4.min.js

aframe-spe-particles-component

• https://cdn.8thwall.com/web/aframe/aframe-spe-particles-component.min.js

デプスキット

• https://cdn.8thwall.com/web/aframe/depthkit-1.0.0.min.js

holovideoobject

• https://cdn.8thwall.com/web/mrcs/holovideoobject-0.2.2.min.js
• https://cdn.8thwall.com/web/mrcs/holovideoobject-1.2.2.min.js
• https://cdn.8thwall.com/web/mrcs/holovideoobject-1.2.3.min.js
• https://cdn.8thwall.com/web/mrcs/holovideoobject-1.2.5.min.js
• https://cdn.8thwall.com/web/mrcs/holovideoobject-1.3.1.min.js
• https://cdn.8thwall.com/web/mrcs/holovideoobject-1.3.2.min.js
• https://cdn.8thwall.com/web/mrcs/holovideoobject-1.3.3.min.js
• https://cdn.8thwall.com/web/mrcs/holovideoobject-1.3.4.min.js
• https://cdn.8thwall.com/web/mrcs/holovideoobject-1.3.6.min.js
• https://cdn.8thwall.com/web/mrcs/holovideoobject-1.3.7.min.js
• https://cdn.8thwall.com/web/mrcs/holovideoobject-1.4.0.min.js
• https://cdn.8thwall.com/web/mrcs/holovideoobject-1.5.0.min.js

特定のエンジンチャンクのロード

エンドユーザーのダウンロードサイズを最小化するために、以下の方法を使用して必要なエンジン機能のみを選択的にロードすることができます。

クラウド・エディター

どのチャンクをプリロードするかは、head.htmlに以下のメタタグを追加することで指定できる。

• 使用可能なチャンク：'slam', 'hand', 'face'.

<meta name="8thwall:preloadChunks" content="slam,hand,face" />

セルフサービス

あるいは、以下のスクリプト・タグを追加して、必要なチャンクを定義することもできる：

• 受け入れられるチャンクは「スラム」「ハンド」「フェース」。

<script>window._XR8Chunks = ['スラム']です。 </script>