a-frame-descent-vr/index.html at main · adrienjoly/a-frame-descent-vr · 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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Descent VR (wip)</title>
    <!-- https://github.com/adrienjoly/a-frame-descent-vr -->
    <script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/aframe-super-shooter-kit@1.1.7/dist/aframe-super-shooter-kit.min.js"></script>
    <script type="module" src="./src/main.js"></script>
  </head>
  <body>
    <a-scene
      renderer="antialias: false; precision: mediump; powerPreference: high-performance"
      futuristic-city-scene
      retro-sfx="player: #rig; enemy: #enemyShip; volume: 0.12"
    >
      <!-- external 3d models -->
      <a-assets>
        <a-asset-item
          id="tinkercadcockpit"
          src="https://raw.githubusercontent.com/adrienjoly/a-frame-descent-vr/main/assets/models/ship.obj"
        ></a-asset-item>
      </a-assets>

      <!-- from https://github.com/supermedium/aframe-super-shooter-kit -->
      <a-entity
        id="bulletTemplate"
        bullet="speed: 100.0"
        geometry="primitive: sphere; radius: 0.1"
        material="color: orange"
      ></a-entity>

      <!-- landmark skyscraper (center) -->
      <a-box
        id="landmark-tower"
        position="0 40 0"
        width="28"
        height="80"
        depth="28"
        color="#5a637d"
        material="roughness: 0.85; metalness: 0.2;"
      ></a-box>

      <!-- enemy ship -->
      <a-entity
        id="enemyShip"
        class="enemy"
        enemy-ship
        enemy-patrol="center: #landmark-tower; radius: 240; height: 140; speed: 0.00016; bob: 10"
        target="healthPoints: 1"
        explode-on-die
        position="240 140 0"
        destroyable
        shadow
      ></a-entity>

      <!-- player's ship -->
      <a-entity id="rig" position="0 92 10" shooter cockpit-compass="enemySelector: #enemyShip;">
        <!-- ship's structure and cockpit -->
        <a-entity
          obj-model="obj: #tinkercadcockpit"
          opacity="0.5"
          scale="0.01 0.01 0.01"
          rotation="-70 180 0"
          position="0 0.8 0"
          material="color: #777; metalness: 0.5"
        ></a-entity>
        <!-- oculus controllers (hidden) -->
        <a-entity
          id="left-hand"
          model="true"
          oculus-touch-controls="hand: left"
          rig-rotation-controller="rig"
        ></a-entity>
        <a-entity
          id="right-hand"
          model="true"
          oculus-touch-controls="hand: right"
          rig-movement-controller="rig"
        ></a-entity>
        <!-- player's point of view -->
        <a-entity id="camera" camera position="0 1.6 0" fix-height-on-desktop>
        </a-entity>
      </a-entity>

      <!-- player controls -->
      <a-entity id="keyboard-control" keyboard-control="rig"></a-entity>
    </a-scene>
  </body>
</html>