Suche senden
Hochladen
A frameハンズオン 20170129
•
0 gefällt mir
•
2,446 views
Y
Youichi Sugii
Folgen
aframe hands-on @ tokyo on Jan 29, 2017.
Weniger lesen
Mehr lesen
Ingenieurwesen
Melden
Teilen
Melden
Teilen
1 von 48
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
A-Frameで始めるWebXRとハンドトラッキング (HoloLens2/Oculus Quest対応)
A-Frameで始めるWebXRとハンドトラッキング (HoloLens2/Oculus Quest対応)
Takashi Yoshinaga
HTMLを書くだけで誰でも簡単!A-FrameではじめるWeb AR/VR
HTMLを書くだけで誰でも簡単!A-FrameではじめるWeb AR/VR
Takashi Yoshinaga
xR Developerなら知っておきたいカメラの基礎知識
xR Developerなら知っておきたいカメラの基礎知識
Satoshi Maemoto
はじめようARCore:自己位置推定・平面検出・FaceTracking
はじめようARCore:自己位置推定・平面検出・FaceTracking
Takashi Yoshinaga
AR-Frame x AR.js入門
AR-Frame x AR.js入門
Takashi Yoshinaga
Aframe詰め合わせ
Aframe詰め合わせ
Youichi Sugii
ノンプログラミングで始める AR 開発入門
ノンプログラミングで始める AR 開発入門
Takashi Yoshinaga
ARマーカーを利用したHoloLens同士の位置合わせ
ARマーカーを利用したHoloLens同士の位置合わせ
Takahiro Miyaura
Weitere ähnliche Inhalte
Was ist angesagt?
オープンソースで構築するWebメタバース ~Mozilla Hubsで学ぶUX開発から運用コスト最小化まで #CEDEC2022
オープンソースで構築するWebメタバース ~Mozilla Hubsで学ぶUX開発から運用コスト最小化まで #CEDEC2022
GREE VR Studio Lab
LiDARとSensor Fusion
LiDARとSensor Fusion
Satoshi Tanaka
モバイル×VRにおける3Dサウンド実践
モバイル×VRにおける3Dサウンド実践
GREE/Art
AI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
AI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
Takashi Yoshinaga
HoloLens2とMeta QuestではじめるWebXR
HoloLens2とMeta QuestではじめるWebXR
Takashi Yoshinaga
Mixed Reality Toolkit V3について
Mixed Reality Toolkit V3について
Takahiro Miyaura
AI x WebXR: フェイストラッキングを用いた擬似3D表現を解説!
AI x WebXR: フェイストラッキングを用いた擬似3D表現を解説!
Takashi Yoshinaga
DRIVE CHARTを支えるAI技術
DRIVE CHARTを支えるAI技術
Yusuke Uchida
A-frameハンズオンのQA集
A-frameハンズオンのQA集
Youichi Sugii
Oculus Quest 1&2 開発のはじめの一歩 with A-Frame WebVR
Oculus Quest 1&2 開発のはじめの一歩 with A-Frame WebVR
Takashi Yoshinaga
俺のサイジング
俺のサイジング
Toru Makabe
UnityとVuforiaで始めるAR開発
UnityとVuforiaで始めるAR開発
Takashi Yoshinaga
A-Frameで始めるOculus Quest対応WebVR
A-Frameで始めるOculus Quest対応WebVR
Takashi Yoshinaga
Hololens2 MRTK2.7(OpenXR) でのビルド環境構築(環境設定からビルドまで)
Hololens2 MRTK2.7(OpenXR) でのビルド環境構築(環境設定からビルドまで)
聡 大久保
5分でわかる Unity点群
5分でわかる Unity点群
UnityTechnologiesJapan002
『SHOWROOM』の大規模化に伴う技術課題のソリューション ~演者・視聴者の熱量を支える負荷対策、HTML5対応など~
『SHOWROOM』の大規模化に伴う技術課題のソリューション ~演者・視聴者の熱量を支える負荷対策、HTML5対応など~
DeNA
Dockerからcontainerdへの移行
Dockerからcontainerdへの移行
Akihiro Suda
GeoPackageを使ってみた(おざき様)
GeoPackageを使ってみた(おざき様)
OSgeo Japan
MRTK3を調べてみた
MRTK3を調べてみた
Takahiro Miyaura
【Unite Tokyo 2019】MeshSyncを有効活用したセルルックプリレンダーのワークフロー
【Unite Tokyo 2019】MeshSyncを有効活用したセルルックプリレンダーのワークフロー
UnityTechnologiesJapan002
Was ist angesagt?
(20)
オープンソースで構築するWebメタバース ~Mozilla Hubsで学ぶUX開発から運用コスト最小化まで #CEDEC2022
オープンソースで構築するWebメタバース ~Mozilla Hubsで学ぶUX開発から運用コスト最小化まで #CEDEC2022
LiDARとSensor Fusion
LiDARとSensor Fusion
モバイル×VRにおける3Dサウンド実践
モバイル×VRにおける3Dサウンド実践
AI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
AI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
HoloLens2とMeta QuestではじめるWebXR
HoloLens2とMeta QuestではじめるWebXR
Mixed Reality Toolkit V3について
Mixed Reality Toolkit V3について
AI x WebXR: フェイストラッキングを用いた擬似3D表現を解説!
AI x WebXR: フェイストラッキングを用いた擬似3D表現を解説!
DRIVE CHARTを支えるAI技術
DRIVE CHARTを支えるAI技術
A-frameハンズオンのQA集
A-frameハンズオンのQA集
Oculus Quest 1&2 開発のはじめの一歩 with A-Frame WebVR
Oculus Quest 1&2 開発のはじめの一歩 with A-Frame WebVR
俺のサイジング
俺のサイジング
UnityとVuforiaで始めるAR開発
UnityとVuforiaで始めるAR開発
A-Frameで始めるOculus Quest対応WebVR
A-Frameで始めるOculus Quest対応WebVR
Hololens2 MRTK2.7(OpenXR) でのビルド環境構築(環境設定からビルドまで)
Hololens2 MRTK2.7(OpenXR) でのビルド環境構築(環境設定からビルドまで)
5分でわかる Unity点群
5分でわかる Unity点群
『SHOWROOM』の大規模化に伴う技術課題のソリューション ~演者・視聴者の熱量を支える負荷対策、HTML5対応など~
『SHOWROOM』の大規模化に伴う技術課題のソリューション ~演者・視聴者の熱量を支える負荷対策、HTML5対応など~
Dockerからcontainerdへの移行
Dockerからcontainerdへの移行
GeoPackageを使ってみた(おざき様)
GeoPackageを使ってみた(おざき様)
MRTK3を調べてみた
MRTK3を調べてみた
【Unite Tokyo 2019】MeshSyncを有効活用したセルルックプリレンダーのワークフロー
【Unite Tokyo 2019】MeshSyncを有効活用したセルルックプリレンダーのワークフロー
Andere mochten auch
HUKUM
HUKUM
Nesha Mutiara
Wwm resume
Wwm resume
Bud Marshall
OER presentation
OER presentation
tfromma
соотношение понятий норма и деятельность
соотношение понятий норма и деятельность
Виктория Горбунова
YMT 2016
YMT 2016
subina0702
дорожная карта реализации проекта
дорожная карта реализации проекта
Виктория Горбунова
инд план обновленный наумкина
инд план обновленный наумкина
Виктория Горбунова
Hibrido dinámico local
Hibrido dinámico local
Mariel Talamantes
Critical thinking as modus operandi alice ghimisian
Critical thinking as modus operandi alice ghimisian
Andrew Katz
MARKET RESEARCH PPT
MARKET RESEARCH PPT
Dinesh Kumar
Управление развитием образования на основе данных
Управление развитием образования на основе данных
Виктория Горбунова
15205193 pss7-ans
15205193 pss7-ans
Carrie Wong
Управление развитием образования на основе данных
Управление развитием образования на основе данных
Виктория Горбунова
кейс образовательное право наумкина-1
кейс образовательное право наумкина-1
Виктория Горбунова
EDUCOMP
EDUCOMP
Dinesh Kumar
Desarrollo de peridismo digital en mexico
Desarrollo de peridismo digital en mexico
Mariel Talamantes
гришина диагностическая карта
гришина диагностическая карта
Татьяна Гришина
кейс оценка качества
кейс оценка качества
Татьяна Гришина
08_SINGULARS_PRESENTACIÓ_MOOC_EDUCACIÓ_EMOCIONAL_AULA
08_SINGULARS_PRESENTACIÓ_MOOC_EDUCACIÓ_EMOCIONAL_AULA
CarlaCasti
отчет по практике 1 часть
отчет по практике 1 часть
Виктория Горбунова
Andere mochten auch
(20)
HUKUM
HUKUM
Wwm resume
Wwm resume
OER presentation
OER presentation
соотношение понятий норма и деятельность
соотношение понятий норма и деятельность
YMT 2016
YMT 2016
дорожная карта реализации проекта
дорожная карта реализации проекта
инд план обновленный наумкина
инд план обновленный наумкина
Hibrido dinámico local
Hibrido dinámico local
Critical thinking as modus operandi alice ghimisian
Critical thinking as modus operandi alice ghimisian
MARKET RESEARCH PPT
MARKET RESEARCH PPT
Управление развитием образования на основе данных
Управление развитием образования на основе данных
15205193 pss7-ans
15205193 pss7-ans
Управление развитием образования на основе данных
Управление развитием образования на основе данных
кейс образовательное право наумкина-1
кейс образовательное право наумкина-1
EDUCOMP
EDUCOMP
Desarrollo de peridismo digital en mexico
Desarrollo de peridismo digital en mexico
гришина диагностическая карта
гришина диагностическая карта
кейс оценка качества
кейс оценка качества
08_SINGULARS_PRESENTACIÓ_MOOC_EDUCACIÓ_EMOCIONAL_AULA
08_SINGULARS_PRESENTACIÓ_MOOC_EDUCACIÓ_EMOCIONAL_AULA
отчет по практике 1 часть
отчет по практике 1 часть
Ähnlich wie A frameハンズオン 20170129
CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作
Maboroshi.inc
リモートデバッグツール Weinerをつかってみた
リモートデバッグツール Weinerをつかってみた
Masakazu Muraoka
配布用Cacti running with cherokee
配布用Cacti running with cherokee
yut148atgmaildotcom
Tizen web app を FireFox OS へ移植する方法を考えた
Tizen web app を FireFox OS へ移植する方法を考えた
Naruto TAKAHASHI
車載組込ブラウザの過去7年と今を40分でまとめてみる
車載組込ブラウザの過去7年と今を40分でまとめてみる
naohikowatanabe
Lt
Lt
LGA128
15分で知るVagrant (NSEG 2013-08-24)
15分で知るVagrant (NSEG 2013-08-24)
hiro345
Platform.html5
Platform.html5
Masakazu Muraoka
Nutanixログほいほい作ってみた.pdf
Nutanixログほいほい作ってみた.pdf
satorukondou
Mochrom - スマートフォンビジネスサミット
Mochrom - スマートフォンビジネスサミット
Katsuaki Sato
4th tokushimaapp
4th tokushimaapp
健一 辰濱
どきっ!三行で作るランダムダンジョン!?~WEBもあるよ!~ - 2010/8/21 群馬Web研究会(勉強会)
どきっ!三行で作るランダムダンジョン!?~WEBもあるよ!~ - 2010/8/21 群馬Web研究会(勉強会)
parrotstudio
ネットワーク分散型フレームワークConView
ネットワーク分散型フレームワークConView
Rakuten Group, Inc.
Osoljp201204
Osoljp201204
Masataka Tsukamoto
Hack U TokyoTech 2016
Hack U TokyoTech 2016
Mila, Université de Montréal
ワイヤーフレームを高速にXDらしく作る
ワイヤーフレームを高速にXDらしく作る
Risa Yuguchi
Tizen web app について調べたよ
Tizen web app について調べたよ
Naruto TAKAHASHI
めんどうな viewport や 端末判別の ために sagen.js
めんどうな viewport や 端末判別の ために sagen.js
Hiroaki Okubo
Flash Playerの作り方
Flash Playerの作り方
Yu Kobayashi
160531 IoT LT #15 @ 日本IBM
160531 IoT LT #15 @ 日本IBM
Toshiki Tsuboi
Ähnlich wie A frameハンズオン 20170129
(20)
CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作
リモートデバッグツール Weinerをつかってみた
リモートデバッグツール Weinerをつかってみた
配布用Cacti running with cherokee
配布用Cacti running with cherokee
Tizen web app を FireFox OS へ移植する方法を考えた
Tizen web app を FireFox OS へ移植する方法を考えた
車載組込ブラウザの過去7年と今を40分でまとめてみる
車載組込ブラウザの過去7年と今を40分でまとめてみる
Lt
Lt
15分で知るVagrant (NSEG 2013-08-24)
15分で知るVagrant (NSEG 2013-08-24)
Platform.html5
Platform.html5
Nutanixログほいほい作ってみた.pdf
Nutanixログほいほい作ってみた.pdf
Mochrom - スマートフォンビジネスサミット
Mochrom - スマートフォンビジネスサミット
4th tokushimaapp
4th tokushimaapp
どきっ!三行で作るランダムダンジョン!?~WEBもあるよ!~ - 2010/8/21 群馬Web研究会(勉強会)
どきっ!三行で作るランダムダンジョン!?~WEBもあるよ!~ - 2010/8/21 群馬Web研究会(勉強会)
ネットワーク分散型フレームワークConView
ネットワーク分散型フレームワークConView
Osoljp201204
Osoljp201204
Hack U TokyoTech 2016
Hack U TokyoTech 2016
ワイヤーフレームを高速にXDらしく作る
ワイヤーフレームを高速にXDらしく作る
Tizen web app について調べたよ
Tizen web app について調べたよ
めんどうな viewport や 端末判別の ために sagen.js
めんどうな viewport や 端末判別の ために sagen.js
Flash Playerの作り方
Flash Playerの作り方
160531 IoT LT #15 @ 日本IBM
160531 IoT LT #15 @ 日本IBM
A frameハンズオン 20170129
1.
A-Frame Hands-on 2017/01/29 杉井庸一
2.
お願い HTML、Javascriptの知識がある人を前提に書いています。 以下の機器をご用意ください ◦ ハンズオン用のPC ◦ インターネットにつなげられる機器(ポケットWiFiやテザリングなど) 事前に以下のソフトウェアをインストール願います。 ◦
Google Chrome (スマホで確認したい人は、スマホにもGoogle Chrome) ◦ Node.js ◦ HTML開発に使用するお好きなテキストエディタ
3.
自己紹介 杉井 庸一 @
修羅の国( 広島に単身出張中 ) 興味本位で買ったRicohThetaS、の画像を見るお手軽なViewer がほしくて、いろいろ調べてA-Frameに出会う。 ブラウザで手軽にコンテンツを作れるのが面白くて、いろいろ 作ってFacrebookで公開していたら、いつの間にかハンズオンを 開催@福岡することに。 仕事はバックエンドのシステムエンジニア。JavaやらSQLやらを好 みます。実はA-Frameに出会うまでJavascript使ったことなかった です。
4.
環境設定 A-Frameのボイラープレートを使って環境構築します。 以下よりボイラープレートのZIPファイルを取得して解凍する。 ◦ https://aframe.io/docs/0.4.0/introduction/getting-started.html ◦ コマンドプロンプト(Macはターミナル)を起動し、解凍したフォル ダへ移動します。初回設定のコマンドを実行する。 ◦
> npm install ◦ ※各種ダウンロードします。しばらく時間がかかります。 サーバ起動のコマンドを実行する。 ◦ > npm start ◦ ※既定のブラウザが起動し、index.htmlを表示します。 終了する際は、以下のコマンドを実行する。 ◦ > Ctrl + c 詳細は、ZIPファイルに同梱のREADME.mdを確認ください。
5.
目次 環境設定 A-Frameとは 3Dシーンを扱うための基礎知識 ◦ 座標、向き、大きさ ◦ 登場人物 ◦
カメラ ◦ ライト Hands-on(1) ◦ ソース構成 ◦ 各エンティティ説明 Hands-on(2) ◦ DOMの操作 ◦ Entity-Component-System ◦ 追加コンポーネント ◦ ソース構成 ◦ 実装手順 Hands-on(3) ◦ コンポーネントの作成 ◦ Javascriptのデバッグ方法 ◦ 実装手順
6.
A-frameとは
7.
A-frameとは ブラウザ上でVRを実現するための技術として WebVRという規格があります。それを簡単に 実現するためのライブラリがA-Frameです。 WebVR1.0規格を策定・提案しているMozillaが A-Frameを作成しています。 ブラウズとしては、Firefox、Chrome、Edgeが WebVR対応を表明しています。
8.
A-frameとは 複雑なWebGL、Three.jsをラップし、比較的簡 単なHTML、Javascriptを用いてブラウザでVR を実現するライブラリ。 ブラウザだけではなく、OculusやHTCViveなど のHMDや、モバイルVRもサポート。 内部的にはThree.jsを使用し、加えてEntity- Component-Systemに代表されるゲーム開発 のベストプラクティスを取り込んでいます。
9.
A-frameとは 公式サイト:https://aframe.io/ Document:https://aframe.io/docs/ ソース:https://github.com/aframevr/aframe リンク集: https://github.com/aframevr/awesome- aframe もちろんEnglishです。
10.
3Dシーンを扱うための 基礎知識
11.
座標、向き、大きさ 座標(POSITION) ◦ Y-up 右手座標系 ◦
X座標:向かって右がプラス ◦ Y座標:向かって上がプラス ◦ Z座標:向かって後ろがプラス 向き(ROTATION) ◦ 向きの単位は度。 ◦ 0~360などを指定。マイナス値も指定可能。 大きさ(SCALE) ◦ 長さの単位はメートル。 ◦ 例: 目線の高さは、Y座標:1.6
12.
登場人物 シーン(SCENE) ◦ 3D空間そのもの。ここにカメラ、ライト、エンティ ティを配置して3DCGの世界を構築していきます。 カメラ(CAMERA) ◦ 構築した3DCGの世界をどのように見るかはカメ ラによって決まります。 ライト(LIGHT) ◦
ライトがなければ3DCGの世界は真っ暗です。光 源を設定しましょう。 エンティティ(ENTITY) ◦ 3DCG空間に存在する物です。球や平面など 様々です。
13.
カメラ A-Frameにてデフォルトで使われている PerspectiveCameraを説明します。 画角(FOV) ◦ 視野角です。広いと魚眼になります。 ファークリップ(FAR) ◦ 最長距離。これより遠いと映りません。 ニアークリップ(NEAR) ◦
最短距離。これより近いと映りません。 アスペクト(ASPECT) ◦ 縦横比:width / height ◦ 通常は「画面幅/画面高さ」を設定
14.
ライト ライトには様々な種類があります。 平行光源(DIRECTIONAL) ◦ 太陽光を表現する。 環境光源(AMBIENT) ◦ 拡散光を表現する。 半球光源(HEMISPHERE) ◦
地面からの照り返しを表現する。 点光源(POINT) ◦ 豆電球のような光源を表現する。 スポットライト(SPOT) ◦ 一部を局所的に照らす光源を表現する。
15.
Hands-on(1) A-FRAMEに触れてみよう
16.
ソース構成(Index.html) A-Frameライブラリ の読み込み 0.4.0に変更 ここにエンティティ を追加していきま す。
17.
ENTITY A-SCENE HTMLのBody句内に<a-scene>~</a-scene>と 記載して使用します。 すべてのEntityはこのSCENEに属します。 シーンをつかさどる様々なプロパティを持って います。 デフォルトでカメラとライトを持っています。 A-BOX a-sceneタグ内に、<a-box>~</a-box>と記載し て使用します。 四角の立方体や直方体、壁などを生成できま す。 v0.1.0以前はa-cubeというタグ名でした。
18.
ENTITY A-SPHERE a-sceneタグ内に、<a-sphere>~</a-sphere>と 記載して使用します。 球を生成できます。 設定によっては、半球なども生成できます。 A-CYLINDER a-sceneタグ内に、<a-cylinder>~</a-cylinder> と記載して使用します。 円柱を生成できます。
19.
ENTITY A-PLANE a-sceneタグ内に、<a-plane>~</a-plane>と記 載して使用します。 2Dの平面を生成できます。 A-SKY a-sceneタグ内に、<a-sky>~</a-sky>と記載して 使用します。 半径5000の巨大な球を生成し、背景として利 用します。 RicohThetaSなどで撮影した360度天球画像を、 このa-skyのsrc属性に画像指定してViewerと する例が多くみられます。
20.
ENTITY A-CAMERA デフォルトが用意されています。 a-scene内に新たに作成するとデフォルトが消 えて、置き換わります。 A-LIGHT デフォルトが用意されています。 a-scene内に新たに作成するとデフォルトが消 えて、置き換わります。
21.
A-ANIMATION Entityの属性を変化させることによりアニメー ションを実現する。 変化させるEntityタグの子Entityとして設定す る 属性 説明 attribute アニメーションさせる親エンティティの属性。 direction
From-To間の方向、向き設定 from 開始時値 to 終了時値 dur アニメーション間隔(msec) repeat アニメーション回数。回数制限なしの場合 は”indefinite”を指定 easing アニメーションの進み具合 (例) <a-box position="-1 0.5 -3"> <a-animation attribute = "position" direction = "alternate" from = "-1 0.5 -3" to = "-1 1 -3" dur = 1000 repeat = "indefinite" > </a-animation> </a-box> 次メジャーバージョン(v0.5.0)から廃止予定
22.
A-frame inspector Ctrl +
Alt + iと入力する。 ブラウザ上で、エンティティの新規作成や修正 を行うことができます。 移動:右クリック+マウス移動 回転:左クリック+マウス移動 前後:マウスホイール 作成したエンティティはHTML形式でExportす ることもできます。
23.
a-framer.com 英語が苦手な人向けに、ドキュメント(v0.3.0 ベース)の主要部分を翻訳されたサイトがあり ます。 http://www.a-framer.com/ 本日ハンズオン主催の米本さんが作成されて います。 本家の英語ドキュメントのニュアンスがわから ない場合など、一読することをお勧めします。
24.
Hands-on(2) JAVASCRIPTでA-FRAMEを操る
25.
どんなの作る? ランダム迷路を作成します。 迷路作成ロジックの結果(二次元配列)を使っ てa-frame上に壁(a-box)を作成することで迷 路を実現します。 aframe-extrasという追加ライブラリを使用しま す。a-boxにstatic-body、a-cameraにkinematic- bodyの機能を追加して、衝突を実現します。
26.
DOMの操作 A-FrameのDOMは通常のHTMLと同様にJavascriptで操作可能です。 DOMの取得 ◦ document.querySelector(“#DOMのID”); DOMの作成 ◦ document.createElement(“タグ名”); 属性の設定 ◦
対象DOM.setAttribute(“属性名”, “値”); DOMの追加 ◦ 親DOM.appendChild(追加するDOM); (例) var sceneEntity = document.querySelector("#sceneId"); var boxEntity = document.createElement("a-box"); boxEntity.id = “box01”; boxEntity.setAttribute("position", "0 1.7 0"); sceneEntity.appendChild(boxEntity);
27.
Entity-Component-System A-Frameはエンティティ・コンポ―ネント・システム(ECS)の形式に基づいています。これはインヘ リタンス(継承)よりもコンポーザビリティに重きを置くゲーム開発では一般的な形式です。 ◦ エンティティ:本質的には何もせず、レンダリングも行わない汎用的なオブジェクトを指す。 ◦ コンポーネント:エンティティの中に挿入され形、動き、機能を与えるための再利用可能なモジュール。 挿入すればそのまま実行される。 ◦
システム:コンポーネントのクラスにグローバルスコープ、サービス、マネジメントを提供する。 ECSでは、エンティティに異なるコンポーネントを挿入することにより、リッチなアクションを伴った 複雑なエンティティを作ることができます。 ハンズオンでは、壁を通り抜けないように衝突を表現するコンポーネントを追加し、壁との距離 に応じて壁の表示/非表示を実現するコンポーネントを作成します。
28.
追加コンポーネント A-Frameには様々な追加コンポーネントが存在します。RegistryやGithubで見つけましょう。 名前 内容 aframe-extras Utility集。様々なコンポーネント aframe-bmfont-text-component
3Dシーン内にテキストを表示する aframe-look-at-component 指定したEntityの方向を自動で向き続ける aframe-crawling-cursor 面に沿ってCursorが張り付くように表現 aframe-leap-hands LeapMotionを扱うことができる ・・・
29.
ソース構成 添付のZIPファイルをA-Frameボイラープレート フォルダ直下に解凍する。 > npm start
で起動し、 http://localhost:3000/maze/ へアクセスする。 迷路ロジックは実装済み。3Dシーンに迷路エ ンティティを作成していきます。 修正するのはindex.htmlだけです。 本ページに添付している「ソースファイル」か ら取得してください。 aframe-boilerplate-master │ .gitignore │ AFRAME_SITE.yml │ index.html │ LICENSE │ package.json │ README.md └─maze │ index.html └─js maze.js
30.
実装手順1 var sceneEntity =
document.querySelector("#maze-scene"); 後でA-BOXを追加するため、追加先のA-SCENEを 取得します。 IDの設定に間違いがないことを確認しましょう。
31.
実装手順2 var wall =
document.createElement("a-box"); sceneEntity.appendChild(wall); A-BOXエンティティを作成し、A-SCENEに追加します。 足元に小さなBOXが現れています。 A-BOXの場所を設定しましょう。
32.
実装手順3 wall.setAttribute("position", posX +
" 0 " + posZ); A-BOXエンティティ追加前に、位置(POSITION)を 指定します。位置情報は迷路のXZ座標に壁の横 幅をかけた「posX」、「posZ」を使用します。 このままでは壁が小さすぎます。
33.
実装手順4 wall.setAttribute("width", width); wall.setAttribute("height", width); wall.setAttribute("depth",
width); A-BOXエンティティ追加前に、大きさ(WIDTH, HEIGHT, DEPTH)を指定します。設定値は、変数設 定(width)している壁幅を利用しましょう。 しかしこれだと、壁が半分床に埋まっており、高さ が足りません。
34.
実装手順5 posX + "
" + width/2 + " " + posZ A-BOXエンティティ追加前に、Y軸位置を調整して 壁をすべて床の上に表示します。設定値は、変数 設定(width)している壁幅を利用しましょう。 見た目は迷路となりましたが、壁を突き抜けます。
35.
実装手順6 A-BOXエンティティ追加前に、static-bodyコンポー ネントを追加し、壁との衝突を表現します。 これで迷路としては最低限完成です。色・画像を 付ける、アニメーションさせるなど手を加えてみて ください。 wall.setAttribute("static-body", "");
36.
aframe-extras 今回利用した「physics」、「static-body」、「kinematic-body」以外にも、様々なコンポーネントが存 在します。サンプルサイトで動作およびソースを確認し、取り込んでみてください。 https://github.com/donmccurdy/aframe-extras https://sandbox.donmccurdy.com/vr/
37.
A-Frame助け合い所@Facebook ある程度作れるようになると、一人では解決できないことも出てきます。 そんな時には、Facebookの「A-Frame助け合い所」に投稿してみんなで解決しましょう! 私も参加していますので、ハンズオンでの疑問や質問など気軽に質問してください。
38.
Hands-on(3) A-FRAMEのコンポーネントを作成する
39.
どんなの作る? Hands-on(2)で作成した迷路に機能・ふるまい を加えます。 カメラとの距離に応じて、壁の表示/非表示制 御を加えることで、直前までどこに壁があるか わからないようにします。 Hands-on(2)ではコンポーネントを利用しまし たが、今回はコンポーネントを自分で作成しま す。
40.
コンポーネントの作成 エンティティにつける新しい機能・ふるまいを 作成します。 conponent-name: コンポーネントの名前。エン ティティにつける際の名称となります。英字で 好きな名前をつけます。 schema: エンティティにつけるときに引数を設 定できます。 init:
最初に呼ばれる処理です。主に初期化 や必要な情報を取得する処理を書きます。 tick: 画面が描画される1フレーム毎に呼ばれ る処理です。連続した処理が必要な場合に使 います。 AFRAME.registerComponent(‘component-name', { schema: { // コンポーネントの引数設定。 }, init: function () { // 初期処理 }, tick: function() { // 1フレーム毎の処理(最大60回/秒) } });
41.
Javascriptのデバッグ方法(Chrome) Javascriptの動作確認方法を紹介します。 デバッグ画面を表示する。 ◦ F12を押すとデバッグ画面になります コンソール出力を確認する。 ◦ Consoleタブを選択すると、ログが表示されます コンソールへ値を出力する ◦
Javascript内でconsole.log(変数)と入力すると、変数 値がコンソールへ出力されます。 ブレイクポイントで途中経過を確認する ◦ Sourcesタブでソースを表示し、行番号部分をクリッ クすると、処理がそこで止まるようになります。 AndroidスマホChromeもPCからデバッグ可能。
42.
実装手順1 まずはA-BOXに、今回作成するコンポーネント を追加しましょう。作成するコンポーネントは maze.js内にひな形を用意しています。 wall.setAttribute("visible-wall", "");
43.
実装手順2 this.el.object3D.visible = false; js/maze.jsを開きます。 初期処理で、壁を非表示とします。
44.
実装手順3 毎フレーム毎にカメラの位置と、壁の位置を 取得します。 var cameraPosition =
this.el.sceneEl.camera.el.object3D.position; var wallPosition = this.el.object3D.position;
45.
実装手順4 if (wallPosition.distanceTo(cameraPosition) <
10) { if (this.el.object3D.visible == false) { this.el.object3D.visible = true; } } 以下の場合に、壁を表示します。 ・カメラと壁の距離が10m以内 ・壁がまだ非表示状態のもの
46.
実装手順5 } else { if
(this.el.object3D.visible == true) { this.el.object3D.visible = false; } } 逆に以下の場合に、壁を非表示とします。 ・カメラと壁の距離が10m以上 ・壁が表示状態のもの
47.
実装手順6 distance: {default: 10}, 10 ↓ this.data.distance “” ↓ “distance:
5” 10m固定としている距離を引数として渡せるよう に修正。A-BOX側に引数設定を入れます。
48.
ハンズオンは以上です ありがとうございました
Hinweis der Redaktion
WebVR対応ブラウザ情報 https://iswebvrready.org/
https://developer.mozilla.org/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame https://framesynthesis.jp/tech/2015/12/aframe/
公式サイトのblogの情報は有益です。様々なA-Frameの使い方や新しいライブラリの紹介など週1で更新されていますので、チェックすると面白いかと。
http://www4.atwiki.jp/tmagic_teu/pages/84.html
Easingについて http://easings.net/ja A-Frame RoadMap https://github.com/aframevr/aframe/blob/master/ROADMAP.md
https://github.com/aframevr/aframe-inspector
http://mikan-daisuki.hatenablog.com/entry/2015/10/22/220439
aframe-extras https://github.com/donmccurdy/aframe-extras aframe-bmfont-text-component https://github.com/bryik/aframe-bmfont-text-component aframe-look-at-component https://github.com/ngokevin/aframe-look-at-component aframe-crawling-cursor http://vr-lab.voyagegroup.com/entry/2016/11/02/101503 aframe-leap-hands https://github.com/openleap/aframe-leap-hands
詳しく知りたい人は、以下のサイトで学習できます。 https://aframe.io/docs/0.4.0/guides/building-with-components.html
Javascriptデバッグ http://qiita.com/snoguchi/items/8f6bb62a3166eca23ac3 Android Chromeのデバッグ http://qiita.com/hojishi/items/12b726f8b02ef3d713e4
Jetzt herunterladen