SlideShare uma empresa Scribd logo
1 de 17
Baixar para ler offline
(WebVR )
2017/2/23
@
16×16 WebVR
3D
16×16
16×16 WebVR
3D
16×16
16×16 WebVR
A-Frame
HTML VR
<html>
<head>
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"
</head>
<body>
<a-scene>
<a-box
position="0 1 0"
rotation="20 40 0"
opacity="0.8"
depth="2"></a-box>
</a-scene>
</body>
</html>
DOM
// <a-box>
var newBox = document.createElement("a-box");
// <a-scene>
var scene = document.getElementsByTagName('a-scene');
// <a-scene> <a-box>
scene.appendChild(newBox);
* Hack Day
3D
3D
aframe-obj-loader-component
( ...)
<script src="./aframe-obj-loader-component.min.js"></script
<a-entity
obj-loader="src: url(./tree.obj); mtl: url(./tree.mtl);">
</a-entity>
TweenJS
<a-entity obj-loader="src: url(./tree.obj); mtl: url(./tree.mtl)
<a-animation
dur = '200'
attribute='position'
from="7.5 0.25 7.5"
to="7.5 0.35 7.5"
direction="alternate-reverse"
repeat="indefinite"
easing="ease-out">
</a-animation>
</a-entity>
https://tweenjs.github.io/tween.js/examples/03_grap
hs.html
*
VR
まよいの墓(WebVR編)
まよいの墓(WebVR編)

Mais conteúdo relacionado

Mais procurados

Interface Styling & Scripting on WebKit Mobile
Interface Styling & Scripting on WebKit MobileInterface Styling & Scripting on WebKit Mobile
Interface Styling & Scripting on WebKit Mobile
David Aurelio
 
An Impromptu Introduction to HTML5 Canvas
An Impromptu Introduction to HTML5 CanvasAn Impromptu Introduction to HTML5 Canvas
An Impromptu Introduction to HTML5 Canvas
Ben Hodgson
 
Dundee University HackU 2013 - Mojito
Dundee University HackU 2013 - MojitoDundee University HackU 2013 - Mojito
Dundee University HackU 2013 - Mojito
smartads
 

Mais procurados (20)

Utility libraries to make your life easier
Utility libraries to make your life easierUtility libraries to make your life easier
Utility libraries to make your life easier
 
The Dojo Build System
The Dojo Build SystemThe Dojo Build System
The Dojo Build System
 
CakePHP in iPhone App
CakePHP in iPhone AppCakePHP in iPhone App
CakePHP in iPhone App
 
Interface Styling & Scripting on WebKit Mobile
Interface Styling & Scripting on WebKit MobileInterface Styling & Scripting on WebKit Mobile
Interface Styling & Scripting on WebKit Mobile
 
Pengenalan AngularJS
Pengenalan AngularJSPengenalan AngularJS
Pengenalan AngularJS
 
Magento x codekit x sass x compass x skeleton responsive grid
Magento x codekit x sass x compass x skeleton responsive gridMagento x codekit x sass x compass x skeleton responsive grid
Magento x codekit x sass x compass x skeleton responsive grid
 
Functional javascript
Functional javascriptFunctional javascript
Functional javascript
 
Introduction to three.js
Introduction to three.jsIntroduction to three.js
Introduction to three.js
 
An Impromptu Introduction to HTML5 Canvas
An Impromptu Introduction to HTML5 CanvasAn Impromptu Introduction to HTML5 Canvas
An Impromptu Introduction to HTML5 Canvas
 
MTDDC Tokyo 2011
MTDDC Tokyo 2011MTDDC Tokyo 2011
MTDDC Tokyo 2011
 
Javascript viva questions
Javascript viva questionsJavascript viva questions
Javascript viva questions
 
CARATULA ASPT: PROAÑO
CARATULA ASPT: PROAÑOCARATULA ASPT: PROAÑO
CARATULA ASPT: PROAÑO
 
PreDevCampSF - CSS3 Tricks
PreDevCampSF - CSS3 TricksPreDevCampSF - CSS3 Tricks
PreDevCampSF - CSS3 Tricks
 
Dundee University HackU 2013 - Mojito
Dundee University HackU 2013 - MojitoDundee University HackU 2013 - Mojito
Dundee University HackU 2013 - Mojito
 
Ad
AdAd
Ad
 
Threejs使ってみた
Threejs使ってみたThreejs使ってみた
Threejs使ってみた
 
WebSockets Jump Start
WebSockets Jump StartWebSockets Jump Start
WebSockets Jump Start
 
Presentation1
Presentation1 Presentation1
Presentation1
 
Banquet 36
Banquet 36Banquet 36
Banquet 36
 
Mobile Web Design Code
Mobile Web Design CodeMobile Web Design Code
Mobile Web Design Code
 

Destaque

まよいの墓 - HackDay2017 #hackdayjp
まよいの墓 - HackDay2017 #hackdayjpまよいの墓 - HackDay2017 #hackdayjp
まよいの墓 - HackDay2017 #hackdayjp
Hikari Fukasawa
 

Destaque (20)

実践 Redux Saga -Practical Redux Saga-
実践 Redux Saga -Practical Redux Saga-実践 Redux Saga -Practical Redux Saga-
実践 Redux Saga -Practical Redux Saga-
 
ぱわぽ
ぱわぽぱわぽ
ぱわぽ
 
まよいの墓 - HackDay2017 #hackdayjp
まよいの墓 - HackDay2017 #hackdayjpまよいの墓 - HackDay2017 #hackdayjp
まよいの墓 - HackDay2017 #hackdayjp
 
React + FLUX + Redux + Redux Saga のお話
React + FLUX + Redux + Redux Saga のお話React + FLUX + Redux + Redux Saga のお話
React + FLUX + Redux + Redux Saga のお話
 
まよいの墓(レゴ編)
まよいの墓(レゴ編)まよいの墓(レゴ編)
まよいの墓(レゴ編)
 
久しぶりにWebエンジニアのためのプロジェクションマッピング
久しぶりにWebエンジニアのためのプロジェクションマッピング久しぶりにWebエンジニアのためのプロジェクションマッピング
久しぶりにWebエンジニアのためのプロジェクションマッピング
 
運用の現場について
運用の現場について運用の現場について
運用の現場について
 
アルカナに入社しました。
アルカナに入社しました。アルカナに入社しました。
アルカナに入社しました。
 
Webエンジニアのためのプロジェクションマッピング(とりあえず完結編)
Webエンジニアのためのプロジェクションマッピング(とりあえず完結編)Webエンジニアのためのプロジェクションマッピング(とりあえず完結編)
Webエンジニアのためのプロジェクションマッピング(とりあえず完結編)
 
JavascriptでFacetrackerを使った
JavascriptでFacetrackerを使ったJavascriptでFacetrackerを使った
JavascriptでFacetrackerを使った
 
D3.jsを使った情報可視化をしてみた
D3.jsを使った情報可視化をしてみたD3.jsを使った情報可視化をしてみた
D3.jsを使った情報可視化をしてみた
 
JavascriptでFaceTrackerを使う
JavascriptでFaceTrackerを使うJavascriptでFaceTrackerを使う
JavascriptでFaceTrackerを使う
 
非技術者出身のディレクター概要
非技術者出身のディレクター概要非技術者出身のディレクター概要
非技術者出身のディレクター概要
 
Webエンジニアのための
プロジェクションマッピング
Webエンジニアのための
プロジェクションマッピングWebエンジニアのための
プロジェクションマッピング
Webエンジニアのための
プロジェクションマッピング
 
ねぇねぇ、君は何使う?Web Design tool の話。
ねぇねぇ、君は何使う?Web Design tool の話。ねぇねぇ、君は何使う?Web Design tool の話。
ねぇねぇ、君は何使う?Web Design tool の話。
 
第7回アルカナ勉強会
第7回アルカナ勉強会第7回アルカナ勉強会
第7回アルカナ勉強会
 
THETA S でライブストリーミング(途中経過)
THETA S でライブストリーミング(途中経過)THETA S でライブストリーミング(途中経過)
THETA S でライブストリーミング(途中経過)
 
D3.jsを使った情報可視化
D3.jsを使った情報可視化D3.jsを使った情報可視化
D3.jsを使った情報可視化
 
Physical Web導入の話
Physical Web導入の話Physical Web導入の話
Physical Web導入の話
 
THETA S でライブストリーミング
THETA S でライブストリーミングTHETA S でライブストリーミング
THETA S でライブストリーミング
 

Semelhante a まよいの墓(WebVR編)

Scalable vector ember
Scalable vector emberScalable vector ember
Scalable vector ember
Matthew Beale
 
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
Василевский Илья (Fun-box): "автоматизация браузера при помощи PhantomJS"
Василевский Илья (Fun-box): "автоматизация браузера при помощи PhantomJS"Василевский Илья (Fun-box): "автоматизация браузера при помощи PhantomJS"
Василевский Илья (Fun-box): "автоматизация браузера при помощи PhantomJS"
Provectus
 
[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web Design[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
[drupalcampatx] Adaptive Images in Responsive Web Design
[drupalcampatx] Adaptive Images in Responsive Web Design[drupalcampatx] Adaptive Images in Responsive Web Design
[drupalcampatx] Adaptive Images in Responsive Web Design
Christopher Schmitt
 

Semelhante a まよいの墓(WebVR編) (20)

HTML5와 오픈소스 기반의 Web Components 기술
HTML5와 오픈소스 기반의 Web Components 기술HTML5와 오픈소스 기반의 Web Components 기술
HTML5와 오픈소스 기반의 Web Components 기술
 
The Future of CSS with Web components
The Future of CSS with Web componentsThe Future of CSS with Web components
The Future of CSS with Web components
 
The Future of CSS with Web Components
The Future of CSS with Web ComponentsThe Future of CSS with Web Components
The Future of CSS with Web Components
 
Scalable vector ember
Scalable vector emberScalable vector ember
Scalable vector ember
 
I Can't Believe It's Not Flash
I Can't Believe It's Not FlashI Can't Believe It's Not Flash
I Can't Believe It's Not Flash
 
CSS3 Takes on the World
CSS3 Takes on the WorldCSS3 Takes on the World
CSS3 Takes on the World
 
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
 
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymoreHTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
 
Progressive What Apps?
Progressive What Apps?Progressive What Apps?
Progressive What Apps?
 
Василевский Илья (Fun-box): "автоматизация браузера при помощи PhantomJS"
Василевский Илья (Fun-box): "автоматизация браузера при помощи PhantomJS"Василевский Илья (Fun-box): "автоматизация браузера при помощи PhantomJS"
Василевский Илья (Fun-box): "автоматизация браузера при помощи PhantomJS"
 
AngularJS: The Bridge Between Today and Tomorrow's Web (Todd Motto)
AngularJS: The Bridge Between Today and Tomorrow's Web (Todd Motto)AngularJS: The Bridge Between Today and Tomorrow's Web (Todd Motto)
AngularJS: The Bridge Between Today and Tomorrow's Web (Todd Motto)
 
HTML5って必要?
HTML5って必要?HTML5って必要?
HTML5って必要?
 
The Dean wants to Make this WordPress Site Responsive
The Dean wants to Make this WordPress Site ResponsiveThe Dean wants to Make this WordPress Site Responsive
The Dean wants to Make this WordPress Site Responsive
 
Everything is Awesome - Cutting the Corners off the Web
Everything is Awesome - Cutting the Corners off the WebEverything is Awesome - Cutting the Corners off the Web
Everything is Awesome - Cutting the Corners off the Web
 
HTML5 - Daha Flash bir web?
HTML5 - Daha Flash bir web?HTML5 - Daha Flash bir web?
HTML5 - Daha Flash bir web?
 
Intro to HTML5
Intro to HTML5Intro to HTML5
Intro to HTML5
 
[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web Design[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web Design
 
[drupalcampatx] Adaptive Images in Responsive Web Design
[drupalcampatx] Adaptive Images in Responsive Web Design[drupalcampatx] Adaptive Images in Responsive Web Design
[drupalcampatx] Adaptive Images in Responsive Web Design
 
IE10とMSにとってのHTML5 まにフェス in 大阪
IE10とMSにとってのHTML5 まにフェス in 大阪IE10とMSにとってのHTML5 まにフェス in 大阪
IE10とMSにとってのHTML5 まにフェス in 大阪
 
Design+Performance Velocity 2015
Design+Performance Velocity 2015Design+Performance Velocity 2015
Design+Performance Velocity 2015
 

Mais de KatsuyaENDOH

役に立ちそうだけど、やっぱり役に立たなそうな技術Quine
役に立ちそうだけど、やっぱり役に立たなそうな技術Quine役に立ちそうだけど、やっぱり役に立たなそうな技術Quine
役に立ちそうだけど、やっぱり役に立たなそうな技術Quine
KatsuyaENDOH
 

Mais de KatsuyaENDOH (20)

キミスカAIの内部実装について
キミスカAIの内部実装についてキミスカAIの内部実装について
キミスカAIの内部実装について
 
色彩と色彩語の関係を
可視化した話
色彩と色彩語の関係を
可視化した話色彩と色彩語の関係を
可視化した話
色彩と色彩語の関係を
可視化した話
 
シェーダーのお話
シェーダーのお話シェーダーのお話
シェーダーのお話
 
自動テストを導入した際の気づき
自動テストを導入した際の気づき自動テストを導入した際の気づき
自動テストを導入した際の気づき
 
第47回スタジオ・アルカナ社内勉強会
第47回スタジオ・アルカナ社内勉強会第47回スタジオ・アルカナ社内勉強会
第47回スタジオ・アルカナ社内勉強会
 
NICOGRAPH 2018 報告
NICOGRAPH 2018 報告NICOGRAPH 2018 報告
NICOGRAPH 2018 報告
 
人工生命の話
人工生命の話人工生命の話
人工生命の話
 
メディアとアート
メディアとアートメディアとアート
メディアとアート
 
Oculus Go アプリ開発ハンズオン
Oculus Go アプリ開発ハンズオンOculus Go アプリ開発ハンズオン
Oculus Go アプリ開発ハンズオン
 
Oculus Go アプリケーション開発
Oculus Go アプリケーション開発Oculus Go アプリケーション開発
Oculus Go アプリケーション開発
 
GoogleHomeからの視覚的フィードバックを求めて
GoogleHomeからの視覚的フィードバックを求めてGoogleHomeからの視覚的フィードバックを求めて
GoogleHomeからの視覚的フィードバックを求めて
 
DeepLab v3触ってみた
DeepLab v3触ってみたDeepLab v3触ってみた
DeepLab v3触ってみた
 
無料で始めるVTuber
無料で始めるVTuber無料で始めるVTuber
無料で始めるVTuber
 
Tango Constructorから出力したモデルをちょこっと綺麗にする
Tango Constructorから出力したモデルをちょこっと綺麗にするTango Constructorから出力したモデルをちょこっと綺麗にする
Tango Constructorから出力したモデルをちょこっと綺麗にする
 
人間では判定できない101すくみじゃんけんをコンピュータに判定させたい for Keras.js(完)
人間では判定できない101すくみじゃんけんをコンピュータに判定させたい for Keras.js(完)人間では判定できない101すくみじゃんけんをコンピュータに判定させたい for Keras.js(完)
人間では判定できない101すくみじゃんけんをコンピュータに判定させたい for Keras.js(完)
 
人間では判定できない101すくみじゃんけんをコンピュータに判定させたい for Keras.js
人間では判定できない101すくみじゃんけんをコンピュータに判定させたい for Keras.js人間では判定できない101すくみじゃんけんをコンピュータに判定させたい for Keras.js
人間では判定できない101すくみじゃんけんをコンピュータに判定させたい for Keras.js
 
人間では判定できない101すくみじゃんけんをコンピュータに判定させたい
人間では判定できない101すくみじゃんけんをコンピュータに判定させたい人間では判定できない101すくみじゃんけんをコンピュータに判定させたい
人間では判定できない101すくみじゃんけんをコンピュータに判定させたい
 
A-Frameで作ったギャラリーのお話
A-Frameで作ったギャラリーのお話A-Frameで作ったギャラリーのお話
A-Frameで作ったギャラリーのお話
 
Reactを使ったVR環境
Reactを使ったVR環境Reactを使ったVR環境
Reactを使ったVR環境
 
役に立ちそうだけど、やっぱり役に立たなそうな技術Quine
役に立ちそうだけど、やっぱり役に立たなそうな技術Quine役に立ちそうだけど、やっぱり役に立たなそうな技術Quine
役に立ちそうだけど、やっぱり役に立たなそうな技術Quine
 

Último

Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 

Último (20)

WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptx
 
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelMcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 

まよいの墓(WebVR編)