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 +
+
+"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 position="0 0 0" radius=".4" height="0.04" color="#CCC0DD"></a-cylinder> + <a-cylinder rotation="90 0 0" position="0.2 0.05 .9" radius=".03" height=".8" color="#CCC0DD"></a-cylinder> + <a-cylinder rotation="90 0 0" position="-0.2 0.05 .9" radius=".03" height=".8" color="#CCC0DD"></a-cylinder> + ⦠+ </a-entity> + </a-entity> + ⦠+</a-scene> ++ +
+