vr-lab-1/index.html at main · jigargosar/vr-lab-1 · 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
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>VR Graffiti</title>
  <script type="module" src="/src/main.js"></script>
</head>
<body>
  <a-scene stroke-manager>
    <!-- Sky gradient - dark above, slightly lighter at horizon -->
    <a-sky color="#1a1a2e"></a-sky>

    <!-- Grid floor for spatial reference -->
    <a-plane
      position="0 0 0"
      rotation="-90 0 0"
      width="50"
      height="50"
      color="#2d2d44"
      material="opacity: 0.8"
    ></a-plane>

    <!-- Grid lines on floor -->
    <a-entity
      geometry="primitive: plane; width: 50; height: 50"
      position="0 0.01 0"
      rotation="-90 0 0"
      material="src: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Crect width='100' height='100' fill='none' stroke='%23444466' stroke-width='1'/%3E%3C/svg%3E); repeat: 50 50; transparent: true"
    ></a-entity>

    <!-- Ambient light -->
    <a-light type="ambient" color="#446" intensity="0.4"></a-light>

    <!-- Directional light for depth -->
    <a-light type="directional" color="#fff" intensity="0.6" position="1 2 1"></a-light>

    <a-entity id="rig">
      <a-camera position="0 1.6 0"></a-camera>
      <a-entity id="left-hand" laser-controls="hand: left" paint-controls></a-entity>
      <a-entity id="right-hand" laser-controls="hand: right" paint-controls></a-entity>
    </a-entity>
  </a-scene>
</body>
</html>