aframe チュートリアル
aframeを使い始める
サーチ…
備考
このセクションでは、aframeの概要、および開発者がそれを使用する理由を概説します。
それはまた、フレーム内の大きな科目を言及し、関連トピックにリンクする必要があります。 aframeのドキュメンテーションは新しいので、これらの関連トピックの初期バージョンを作成する必要があります。
バージョン
Aフレーム0.x
| バージョン | 発売日 |
|---|---|
| 0.6 | 2017-05-25 |
| 0.5 | 2017-02-10 |
| 0.4 | 2016年12月17日 |
| 0.3 | 2016-08-18 |
レガシーバージョン
| バージョン | 発売日 |
|---|---|
| 0.2 | 2016-03-26 |
| 0.1 | 2015-12-17 |
入門
A-Frameは、何もインストールすることなく、プレーンなHTMLファイルから開発することができます！初心者のサンプルをGlitchにリミックスするためにA-Frameを試す素晴らしい方法です。オンラインですぐにホスティングしてデプロイするコードエディタです。または.htmlファイルを作成し、A-Frameをhead含める：
<html>
<head>
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>
JSビルドを含める
A-FrameをHTMLファイルに含めるには、CDNビルドを指すscriptタグをドロップしscript 。
<head>
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
</head>
npmからインストールする
npmを通してA-Frameをインストールすることもできます：
$ npm install aframe
次に、A-Frameをアプリケーションにバンドルすることができます。たとえば、BrowserifyまたはWebpackの場合は次のようになります。
require('aframe');
npmを使用する場合は、A-Frameのコマンドラインインターフェイスであるangleを使用できます。 angleは単一のコマンドでシーンテンプレートを初期化できます：
npm install -g angle && angle initscene
特徴
単純化されたVR
scriptタグとa-sceneドロップするだけです。 A-Frameは、3Dボイラープレート、VRセットアップ、およびデフォルトコントロールを処理します。何もインストールする必要はありません。
宣言的なHTML
HTMLは読みやすく、理解しやすく、コピー＆ペーストも簡単です。 Webの開発者、VRの愛好家、アーティスト、デザイナー、教育者、メーカー、子供たちは、HTMLの上に基づいて、A-Frameにアクセスできます。
クロスプラットフォームVR
Vive、Rift、Daydream、GearVR、CardboardのVRアプリケーションを構築し、それぞれのコントローラをサポートします。ヘッドセットやコントローラを持っていない？問題ない！ A-Frameは標準のデスクトップやスマートフォンでも動作します。
エンティティコンポーネントアーキテクチャ
A-Frameは強力なthree.jsフレームワークで、宣言的で構成可能で再利用可能なエンティティコンポーネント構造体.jsを提供します。 HTMLはちょうど氷山の一角です。開発者は、JavaScript、DOM API、three.js、WebVR、およびWebGLに無制限にアクセスできます。
パフォーマンス
A-FrameはWebVRのために最適化されています。 A-FrameはDOMを使用しますが、その要素はブラウザレイアウトエンジンには触れません。 3Dオブジェクトの更新はすべて、単一のrequestAnimationFrame呼び出しの下でオーバーヘッドがほとんどなく、メモリ内で行われます。参考までに、ネイティブ（90+ FPS）のように動作するA-Frameで構築されたTilt BrushクローンのA-Painterを参照してください。
ツールアゴニスト
WebはHTMLの概念で構築されているため、A-FrameはReact、Preact、Vue.js、Angular、d3.js、Ember.js、jQueryなどのほとんどのライブラリ、フレームワーク、ツールと互換性があります。
ビジュアルインスペクタ
A-Frameは、ビジュアル3Dインスペクタを内蔵しています。任意のAフレームシーンを開き、 ctrl + alt + iを押して、フードの後ろを覗いてみましょう！
レジストリ
開発者が公開した強力なコンポーネントをHTMLから直接プラグインしてください。ユニティ・アセット・ストアと同様に、Aフレーム・レジストリは簡単な発見のためにこれらのコンポーネントを収集し、管理します。
コンポーネント
ジオメトリ、マテリアル、ライト、アニメーション、モデル、レイキャスター、シャドウ、定位のオーディオ、テキスト、Vive / Touch / Daydream / GearVR / CardboardコントロールなどのA-Frameの主要コンポーネントを使用して、パーティクルシステム、物理学、マルチユーザ、海洋、山、音声認識、モーションキャプチャ、テレポート、スーパーハンド、拡張現実などのコミュニティコンポーネントをさらに活用してください。
ARの開始
Web上にARアプリケーションを作成するには、 AR.jsという名前の新しいライブラリを追加する必要があります。最初にAフレームをロードしてからAR.jsをロードします。
Newtあなたはartoolkit -attributeが追加されたAフレームa-sceneタグを使ってシーンをセットアップする必要があります。 sourceTypeはウェブカメラでなければなりません。スマートフォンのフォントカメラもこれを使用してサポートされています。
a-marker-cameraタグは、画像を表す記録されたスクリーンの内部の画像をマークする。この場合はmarker.pngです。カメラがこのマーカーを検出すると、マーカーがマーカーに表示されます。
以下に、サンプルコードを示します。
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<script src="https://rawgit.com/jeromeetienne/ar.js/master/aframe/build/aframe-ar.js"></script>
<script>
THREEx.ArToolkitContext.baseURL = 'https://rawgit.com/jeromeetienne/ar.js/master/three.js/'
</script>
<body>
<a-scene artoolkit='sourceType: webcam;'>
<a-box position='0 0 0.5' material='opacity: 0.5;'></a-box>
<a-marker-camera preset='marker.png'></a-marker-camera>
</a-scene>
</body>