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

Robert Kaiser

Slides: https://slides.kairo.at/tsmeetup201909/

Robert Kaiser - KaiRo

Robert Kaiser

WebVR & WebXR

VR headset user

A-Frame + The Sun

Preview: 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>

edit/view - A-Frame documentation at aframe.io

Adding a Planet

Preview: 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>

edit/view

Let There Be Light!

Preview: Better Lights
<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>

edit/view

Realistic Planets

Preview: 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>

edit/view

Space Ship

Preview: 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 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>

edit/view

Questions?

glitch.com/~vrspace-1-sun

glitch.com/~vrspace-5-ship

xr.kairo.at/space

github.com/KaiRo-at/xr/tree/master/space

VR Space in 2D