SlideShare a Scribd company logo
Play Easy WebVR with A-Frame
& Physics API
Profile
Seito Horiguchi
• LIG Philippines, Inc.
• President / Developer
• https://github.com/seito2014
Let's start VR
projects!
What is A-FRAME?
https://aframe.io/
• JavaScript Library
• Made by Mozilla
• Super easy like HTML
Similar to HTML!
<a-xxx attribute="value"></a-xxx>
• HTML
• Attribute
that's all!
Sample1
https://codepen.io/seito2014/pen/QOqZRp
+ physics system
https://github.com/donmccurdy/aframe-extras
aframe-extras = helpers
• physics system
• making extra entities
• ... etc
Try 2 Steps
1st. Add the attribute "physics" to
a-scene
<a-scene> ... </a-scene>
!
<a-scene physics="friction: 0.1; restitution: 0.8; gravity: -30;"> ... </a-scene>
2nd. Add 2 type of attributes
• dynamic-body ... like cube, box ...
• static-body ... like floor, wall ...
//ex
<a-box id="a-box" dynamic-body material="color: green" position="0 0 -100" scale="30 30 30" rotation="0 50 0"></a-box>
<a-box static-body geometry="width: 3000; depth: 3000; height: 1" position="-770 -50 -1200" material="color: gray;"></a-box>
Sample2
https://codepen.io/seito2014/pen/EbvzmE
Use conflict event
const boxEl = document.querySelector('#a-box');
let collisionHandler = () => {
console.log('conflict!');
};
boxEl.addEventListener('collide', collisionHandler);
Thanks!

More Related Content

What's hot

Netflix Nebula - Gradle Summit 2014
Netflix Nebula - Gradle Summit 2014Netflix Nebula - Gradle Summit 2014
Netflix Nebula - Gradle Summit 2014
Justin Ryan
 
COSCUP 開源工作坊:Git workflows
COSCUP 開源工作坊:Git workflowsCOSCUP 開源工作坊:Git workflows
COSCUP 開源工作坊:Git workflows
Carl Su
 
Rags to Open Source - AllThingsOpen, Raleigh, NC 2014
Rags to Open Source - AllThingsOpen, Raleigh, NC  2014Rags to Open Source - AllThingsOpen, Raleigh, NC  2014
Rags to Open Source - AllThingsOpen, Raleigh, NC 2014
Mike McNeil
 
DevOps for Scala 2.0
DevOps for Scala 2.0DevOps for Scala 2.0
DevOps for Scala 2.0
Michele Sciabarrà
 
淺談 Startup 公司的軟體開發流程 v2
淺談 Startup 公司的軟體開發流程 v2淺談 Startup 公司的軟體開發流程 v2
淺談 Startup 公司的軟體開發流程 v2
Wen-Tien Chang
 
Hands on Gradle
Hands on GradleHands on Gradle
Hands on Gradle
Mushfekur Rahman
 
swift-log について
swift-log についてswift-log について
swift-log について
Shinya Mochida
 
Intro to Azure Webjobs
Intro to Azure WebjobsIntro to Azure Webjobs
Intro to Azure Webjobs
Shahriar Hossain
 
Demystifying Gutenberg Blocks - Understanding the first steps to becoming a G...
Demystifying Gutenberg Blocks - Understanding the first steps to becoming a G...Demystifying Gutenberg Blocks - Understanding the first steps to becoming a G...
Demystifying Gutenberg Blocks - Understanding the first steps to becoming a G...
Cory Webb
 

What's hot (9)

Netflix Nebula - Gradle Summit 2014
Netflix Nebula - Gradle Summit 2014Netflix Nebula - Gradle Summit 2014
Netflix Nebula - Gradle Summit 2014
 
COSCUP 開源工作坊:Git workflows
COSCUP 開源工作坊:Git workflowsCOSCUP 開源工作坊:Git workflows
COSCUP 開源工作坊:Git workflows
 
Rags to Open Source - AllThingsOpen, Raleigh, NC 2014
Rags to Open Source - AllThingsOpen, Raleigh, NC  2014Rags to Open Source - AllThingsOpen, Raleigh, NC  2014
Rags to Open Source - AllThingsOpen, Raleigh, NC 2014
 
DevOps for Scala 2.0
DevOps for Scala 2.0DevOps for Scala 2.0
DevOps for Scala 2.0
 
淺談 Startup 公司的軟體開發流程 v2
淺談 Startup 公司的軟體開發流程 v2淺談 Startup 公司的軟體開發流程 v2
淺談 Startup 公司的軟體開發流程 v2
 
Hands on Gradle
Hands on GradleHands on Gradle
Hands on Gradle
 
swift-log について
swift-log についてswift-log について
swift-log について
 
Intro to Azure Webjobs
Intro to Azure WebjobsIntro to Azure Webjobs
Intro to Azure Webjobs
 
Demystifying Gutenberg Blocks - Understanding the first steps to becoming a G...
Demystifying Gutenberg Blocks - Understanding the first steps to becoming a G...Demystifying Gutenberg Blocks - Understanding the first steps to becoming a G...
Demystifying Gutenberg Blocks - Understanding the first steps to becoming a G...
 

Similar to Play Easy WebVR with A-Frame & Physics API

Great Tools Heavily Used In Japan, You Don't Know.
Great Tools Heavily Used In Japan, You Don't Know.Great Tools Heavily Used In Japan, You Don't Know.
Great Tools Heavily Used In Japan, You Don't Know.
Junichi Ishida
 
MozTW Jetpack Workshop: Taipei
MozTW Jetpack Workshop: TaipeiMozTW Jetpack Workshop: Taipei
MozTW Jetpack Workshop: Taipei
littlebtc
 
MozTW Jetpack Workshop: Taichung
MozTW Jetpack Workshop: TaichungMozTW Jetpack Workshop: Taichung
MozTW Jetpack Workshop: Taichung
littlebtc
 
Steamlining your puppet development workflow
Steamlining your puppet development workflowSteamlining your puppet development workflow
Steamlining your puppet development workflow
Tomas Doran
 
Puppet Camp New York 2014: Streamlining Puppet Development Workflow
Puppet Camp New York 2014: Streamlining Puppet Development Workflow Puppet Camp New York 2014: Streamlining Puppet Development Workflow
Puppet Camp New York 2014: Streamlining Puppet Development Workflow
Puppet
 
手機自動化測試和持續整合
手機自動化測試和持續整合手機自動化測試和持續整合
手機自動化測試和持續整合
Carl Su
 
Untangling spring week5
Untangling spring week5Untangling spring week5
Untangling spring week5
Derek Jacoby
 
Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)
Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)
Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)
Guust Nieuwenhuis
 
Automated Acceptance Testing from Scratch
Automated Acceptance Testing from ScratchAutomated Acceptance Testing from Scratch
Automated Acceptance Testing from Scratch
Excella
 
Qcon beijing 2010
Qcon beijing 2010Qcon beijing 2010
Qcon beijing 2010
Vonbo
 
Hadoop Demystified + Automation Smackdown! Austin JUG June 24 2014
Hadoop Demystified + Automation Smackdown!  Austin JUG June 24 2014Hadoop Demystified + Automation Smackdown!  Austin JUG June 24 2014
Hadoop Demystified + Automation Smackdown! Austin JUG June 24 2014
datafundamentals
 
2016 WordCamp Pittsburgh - Let's Write a Plugin
2016 WordCamp Pittsburgh - Let's Write a Plugin2016 WordCamp Pittsburgh - Let's Write a Plugin
2016 WordCamp Pittsburgh - Let's Write a Plugin
Brian Layman
 
iOSDevCamp 2011 - Getting "Test"-y: Test Driven Development & Automated Deplo...
iOSDevCamp 2011 - Getting "Test"-y: Test Driven Development & Automated Deplo...iOSDevCamp 2011 - Getting "Test"-y: Test Driven Development & Automated Deplo...
iOSDevCamp 2011 - Getting "Test"-y: Test Driven Development & Automated Deplo...
Rudy Jahchan
 
InfoTalk#17 1st
InfoTalk#17 1stInfoTalk#17 1st
InfoTalk#17 1st
Wakasa Masao
 
How I become Go GDE
How I become Go GDEHow I become Go GDE
How I become Go GDE
Evan Lin
 
Introduction to Git, DrupalCamp LA 2015
Introduction to Git, DrupalCamp LA 2015Introduction to Git, DrupalCamp LA 2015
Introduction to Git, DrupalCamp LA 2015
mwrather
 
[amigos] HTML5 and CSS3
[amigos] HTML5 and CSS3[amigos] HTML5 and CSS3
[amigos] HTML5 and CSS3
Christopher Schmitt
 
Let’s write a plugin
Let’s write a pluginLet’s write a plugin
Let’s write a plugin
Brian Layman
 
デザインシステムの海で3年間もがいてみて
デザインシステムの海で3年間もがいてみてデザインシステムの海で3年間もがいてみて
デザインシステムの海で3年間もがいてみて
Yahoo!デベロッパーネットワーク
 
Intro to Github Actions @likecoin
Intro to Github Actions @likecoinIntro to Github Actions @likecoin
Intro to Github Actions @likecoin
William Chong
 

Similar to Play Easy WebVR with A-Frame & Physics API (20)

Great Tools Heavily Used In Japan, You Don't Know.
Great Tools Heavily Used In Japan, You Don't Know.Great Tools Heavily Used In Japan, You Don't Know.
Great Tools Heavily Used In Japan, You Don't Know.
 
MozTW Jetpack Workshop: Taipei
MozTW Jetpack Workshop: TaipeiMozTW Jetpack Workshop: Taipei
MozTW Jetpack Workshop: Taipei
 
MozTW Jetpack Workshop: Taichung
MozTW Jetpack Workshop: TaichungMozTW Jetpack Workshop: Taichung
MozTW Jetpack Workshop: Taichung
 
Steamlining your puppet development workflow
Steamlining your puppet development workflowSteamlining your puppet development workflow
Steamlining your puppet development workflow
 
Puppet Camp New York 2014: Streamlining Puppet Development Workflow
Puppet Camp New York 2014: Streamlining Puppet Development Workflow Puppet Camp New York 2014: Streamlining Puppet Development Workflow
Puppet Camp New York 2014: Streamlining Puppet Development Workflow
 
手機自動化測試和持續整合
手機自動化測試和持續整合手機自動化測試和持續整合
手機自動化測試和持續整合
 
Untangling spring week5
Untangling spring week5Untangling spring week5
Untangling spring week5
 
Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)
Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)
Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)
 
Automated Acceptance Testing from Scratch
Automated Acceptance Testing from ScratchAutomated Acceptance Testing from Scratch
Automated Acceptance Testing from Scratch
 
Qcon beijing 2010
Qcon beijing 2010Qcon beijing 2010
Qcon beijing 2010
 
Hadoop Demystified + Automation Smackdown! Austin JUG June 24 2014
Hadoop Demystified + Automation Smackdown!  Austin JUG June 24 2014Hadoop Demystified + Automation Smackdown!  Austin JUG June 24 2014
Hadoop Demystified + Automation Smackdown! Austin JUG June 24 2014
 
2016 WordCamp Pittsburgh - Let's Write a Plugin
2016 WordCamp Pittsburgh - Let's Write a Plugin2016 WordCamp Pittsburgh - Let's Write a Plugin
2016 WordCamp Pittsburgh - Let's Write a Plugin
 
iOSDevCamp 2011 - Getting "Test"-y: Test Driven Development & Automated Deplo...
iOSDevCamp 2011 - Getting "Test"-y: Test Driven Development & Automated Deplo...iOSDevCamp 2011 - Getting "Test"-y: Test Driven Development & Automated Deplo...
iOSDevCamp 2011 - Getting "Test"-y: Test Driven Development & Automated Deplo...
 
InfoTalk#17 1st
InfoTalk#17 1stInfoTalk#17 1st
InfoTalk#17 1st
 
How I become Go GDE
How I become Go GDEHow I become Go GDE
How I become Go GDE
 
Introduction to Git, DrupalCamp LA 2015
Introduction to Git, DrupalCamp LA 2015Introduction to Git, DrupalCamp LA 2015
Introduction to Git, DrupalCamp LA 2015
 
[amigos] HTML5 and CSS3
[amigos] HTML5 and CSS3[amigos] HTML5 and CSS3
[amigos] HTML5 and CSS3
 
Let’s write a plugin
Let’s write a pluginLet’s write a plugin
Let’s write a plugin
 
デザインシステムの海で3年間もがいてみて
デザインシステムの海で3年間もがいてみてデザインシステムの海で3年間もがいてみて
デザインシステムの海で3年間もがいてみて
 
Intro to Github Actions @likecoin
Intro to Github Actions @likecoinIntro to Github Actions @likecoin
Intro to Github Actions @likecoin
 

Recently uploaded

Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
innovationoecd
 
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
SOFTTECHHUB
 
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
Neo4j
 
Infrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI modelsInfrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI models
Zilliz
 
RESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for studentsRESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for students
KAMESHS29
 
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
SOFTTECHHUB
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
Uni Systems S.M.S.A.
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
panagenda
 
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
Matthew Sinclair
 
UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5
DianaGray10
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
Octavian Nadolu
 
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
Neo4j
 
Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1
DianaGray10
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
Mariano Tinti
 
“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”
Claudio Di Ciccio
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
Kari Kakkonen
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
IndexBug
 
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Paige Cruz
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
Zilliz
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
Zilliz
 

Recently uploaded (20)

Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
 
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
 
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
 
Infrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI modelsInfrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI models
 
RESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for studentsRESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for students
 
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
 
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
 
UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
 
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
 
Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
 
“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
 
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
 

Play Easy WebVR with A-Frame & Physics API