Home » スタッフBlog » A-Frame

A-Frame

category : スタッフBlog 2017.12.4 

技術部の山下です。
今回はWebVRフレームワークのA-Frameに触れてみましたのでご紹介します。

https://aframe.io/

サンプル作成の流れのイメージは以下となります。

1. なにもない状態

2. シーンを配置

3. シーンにライトを配置

4. シーンにカメラを配置

5. シーンにオブジェクトを配置

6. カメラから見たイメージ

サンプルのHTML

サンプルの解説
タグによりシーンとデフォルトのライトとカメラを配置
と円柱と板を配置
箱に回転、円柱に移動のアニメーションを設定

サンプルの結果

工夫次第で面白い表現が可能なのではないかと思います。

タグ

サイト内検索

Copyright(c) 2017 IT-TERA All Rights Reserved.