<title>VR Space: Creating A Solar System With WebXR</title>
<link rel="stylesheet" type="text/css" href="slides.css">
<script type="text/javascript" src="slides.js"></script>
- <link rel="contents" href="#index" title="Überblick">
- <link rel="index" id="link-toc" href="#toc" title="Inhalt">
+ <link rel="contents" href="#index" title="Overview">
+ <link rel="index" id="link-toc" href="#toc" title="Contents">
<link rel="start" id="link-start" href="#index" title="Start">
</head>
<body>
<header id="header"><div id="header-text">VR Space</div>
<div id="subheader-text"></div>
- <a id="headerlogo" href="#index" title="Startseite">Mozilla</a>
+ <a id="headerlogo" href="#index" title="Start page">Mozilla</a>
</header>
<nav id="slidenav">
<a href="#toc" id="nav-toc" accesskey="t">toc</a> ||
<span id="nav-next-nolink" class="nolink">fwd ></span>
</nav>
-<article id="toc" data-title="Inhalt">
+<article id="toc" data-title="Contents">
<h1><span>Contents</span></h1>
<h2>VR Space: Creating A Solar System With WebXR</h2>
<<mark>a-scene</mark>>
<<mark>a-sphere</mark> id="sun" <small>position="0 0 0" radius="1" color="#FFFF00"</small>></a-sphere>
- <a-entity id="cameraRig" <small>position="0 -1 2" movement-controls="speed: .1; fly: true; camera: #head;"></small>
+ <a-entity id="cameraRig" <small>position="0 -1 2"</small>
+ <small> movement-controls="speed: .1; fly: true; camera: #head;"></small>
<a-entity id="head" <small>camera="active: true" look-controls position="0 1.6 0"></a-entity></small>
<a-entity id="left-hand" <small>link-controls="hand: left "…></a-entity></small>
<a-entity id="right-hand" <small>link-controls="hand: right "…></a-entity></small>
<a-scene>
…
<a-entity position="0 0 0" rotation="0 -120 0"
- <mark>animation="property: rotation;</mark> to: 0 240 0; <small>loop: true; dur: 600000; easing: linear;"></small>
- <<mark>a-sphere id="redplanet"</mark> position="0 0 6" <small>radius=".3" color="#FF8080"></a-sphere></small>
+ <mark>animation="property: rotation;</mark> to: 0 240 0;
+ <small>loop: true; dur: 600000; easing: linear;"></small>
+ <<mark>a-sphere id="redplanet"</mark> position="0 0 6"
+ <small>radius=".3" color="#FF8080"></a-sphere></small>
</a-entity>
…
</a-scene>
<a-scene>
<a-entity <mark>light="type: ambient;</mark> color: #BBB; intensity: .1;"></a-entity>
<a-sphere id="sun" <small>position="0 0 0" radius="1" color="#FFFF00"</small>
- <mark>material="emissive: #FFFF00;" light="type: point;</mark> <small>intensity: 1; distance: 50; decay: 2"></a-sphere></small>
+ <mark>material="emissive: #FFFF00;" light="type: point;</mark>
+ <small>intensity: 1; distance: 50; decay: 2"></a-sphere></small>
…
</a-scene>
</pre>
<a-sphere id="earth" <mark>src="<a href="https://xr.kairo.at//space/earth_equirect.jpg">earth_equirect.jpg</a>"</mark> …></a-sphere>
</a-entity>
<a-entity …>
- <a-sphere id="saturn" <mark>gltf-model="#saturnmodel"</mark> scale="0.003 0.003 0.003" …></a-sphere>
+ <a-sphere id="saturn" <mark>gltf-model="#saturnmodel"</mark>
+ scale="0.003 0.003 0.003" …></a-sphere>
</a-entity>
…
</a-scene>
…
<a-entity …>
<a-entity id="ship" …>
- <<mark>a-cylinder</mark> <small>position="0 0 0" radius=".4" height="0.04" color="#CCC0DD"></a-cylinder></small>
- <small><a-cylinder rotation="90 0 0" position="0.2 0.05 .9" radius=".03" height=".8" color="#CCC0DD"></a-cylinder></small>
- <small><a-cylinder rotation="90 0 0" position="-0.2 0.05 .9" radius=".03" height=".8" color="#CCC0DD"></a-cylinder></small>
+ <<mark>a-cylinder</mark> <small> radius=".4" height="0.04" color="#CCC0DD" …></a-cylinder></small>
+ <small><a-cylinder rotation="90 0 0" radius=".03" height=".8" …></a-cylinder></small>
+ <small><a-cylinder rotation="90 0 0" radius=".03" height=".8" …></a-cylinder></small>
…
</a-entity>
</a-entity>