Contents
VR Space: Creating A Solar System With WebXR
The following slides are available in this presentation:
VR Space: Creating A Solar System With WebXR
A Step-By-Step Tutorial Of A-Frame
Slides: https://slides.kairo.at/tsmeetup201909/
- Created for a presentation at Mozilla Tech Speakers Meetup 2019 in Amsterdam, The Netherlands.
- Written in HTML 5 with CSS 3 and JavaScript.
- Navigation via links on all slides, via access keys (e.g. "n"/Alt+Shift+N for "next") or back/forward arrow keys
- Contents
09/2019 Robert Kaiser -
"Mozilla", "Firefox" and their logos are
trademarks
of Mozilla Foundation.
Robert Kaiser - KaiRo
- kairo@kairo.at / home.kairo.at
- Mozilla Tech Speaker
- Based in Vienna, Austria
- Not on most major social networks
- But on Diaspora*, Mozillians, Telegram, LinkedIn, KaiRo-at at GitHub
WebVR & WebXR
- WebVR: Virtual Reality powered by Web technologies
- Evolving into WebXR Device API - Mixed Reality (Virtual + Augmented Reality)
- Open Standard (proposal), in concert with WebGL, WebAudio and Gamepad APIs
- Firefox: Windows (55+) & MacOS X (64+) release, Linux in development, WebXR coming soon
- Chrome experimental; support on stand-alone headset browsers
A-Frame + The Sun
<a-scene>
<a-sphere id="sun" position="0 0 0" radius="1" color="#FFFF00"></a-sphere>
<a-entity id="cameraRig" position="0 -1 2"
movement-controls="speed: .1; fly: true; camera: #head;">
<a-entity id="head" camera="active: true" look-controls position="0 1.6 0"></a-entity>
<a-entity id="left-hand" link-controls="hand: left "…></a-entity>
<a-entity id="right-hand" link-controls="hand: right "…></a-entity>
<a-entity>
</a-scene>
Adding a Planet
<a-scene>
…
<a-entity position="0 0 0" rotation="0 -120 0"
animation="property: rotation; to: 0 240 0;
loop: true; dur: 600000; easing: linear;">
<a-sphere id="redplanet" position="0 0 6"
radius=".3" color="#FF8080"></a-sphere>
</a-entity>
…
</a-scene>
Let There Be Light!
<a-scene>
<a-entity light="type: ambient; color: #BBB; intensity: .1;"></a-entity>
<a-sphere id="sun" position="0 0 0" radius="1" color="#FFFF00"
material="emissive: #FFFF00;" light="type: point;
intensity: 1; distance: 50; decay: 2"></a-sphere>
…
</a-scene>
Realistic Planets
<a-scene>
<a-assets>
<a-asset-item id="saturnmodel" response-type="arraybuffer" src="Saturn_1_120536.glb"></a-asset-item>
</a-assets>
…
<a-entity …>
<a-sphere id="earth" src="earth_equirect.jpg" …></a-sphere>
</a-entity>
<a-entity …>
<a-sphere id="saturn" gltf-model="#saturnmodel"
scale="0.003 0.003 0.003" …></a-sphere>
</a-entity>
…
</a-scene>
Space Ship
"All I ask is a tall ship, and a star to steer by."
- James T. Kirk, citing John Masefield
<a-scene>
…
<a-entity …>
<a-entity id="ship" …>
<a-cylinder radius=".4" height="0.04" color="#CCC0DD" …></a-cylinder>
<a-cylinder rotation="90 0 0" radius=".03" height=".8" …></a-cylinder>
<a-cylinder rotation="90 0 0" radius=".03" height=".8" …></a-cylinder>
…
</a-entity>
</a-entity>
…
</a-scene>
