ar-prototyping/01_basic_vr/index.html at main · FH-Potsdam/ar-prototyping · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
    <script src="../assets/aframe/aframe-v1.2.0.min.js"></script>
  </head>
  <body>
    <a-scene>
      <!-- Best practice. Preloading assets. -->
      <a-assets timeout="3000">
        <a-asset-item id="gltf-cube" src="../assets/gltf/cube.gltf"></a-asset-item>
        <img id="marker-image" src="../assets/images/marker.png">
        <video id="atomic-video" autoplay loop="true" src="../assets/images/atomic.mp4"></video>
      </a-assets>

      <!-- 3D primitives -->
      <a-box position="3 0.5 -5" rotation="0 45 0" color="#4CC3D9"></a-box> <!-- src="#marker-image" -->
      <a-sphere position="1 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-cylinder position="3 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="10" height="4" color="#7BC8A4"></a-plane>

      <!-- Text -->
      <a-text value="Hello, World!" position="1 1.25 -3"></a-text><!-- geometry="primitive:plane" -->

      <!-- Image & Video -->
      <a-image position="-1 0.75 -3" width="1" height="1.5" src="#marker-image"></a-image>
      <a-video position="0 4 -3" src="#atomic-video" rotation="45 0 0" width="4" height="3"></a-video>-->

      <!-- 3D assets -->
      <a-gltf-model scale="1 1 1" position="-4 0 -5" src="#gltf-cube"></a-gltf-model>

      <!-- Background / Sky -->
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>