aframe/index.html at master · sowasred2012/aframe · 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
<html>
  <head>
    <script src="assets/js/aframe-0.8.0.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-assets>
        <video id="steamed-hams" autoplay loop="true" src="assets/video/steamed_hams.mp4"></video>
        <img id="boat" src="assets/images/boat.jpg">
      </a-assets>

      <a-entity position="0 5 0">
        <a-camera look-controls wasd-controls></a-camera>
      </a-entity>

      <a-entity light="type: ambient; color: #BBB"></a-entity>
      <a-entity light="type: directional; color: #FFF; intensity: 0.6" position="-0.5 7 1"></a-entity>

      <a-plane position="0 7.5 -15" width="4" height="4" color="#ffbfc8" geometry="height:15;width:30"></a-plane>
      <a-plane position="0 7.5 15" rotation="0 180 0" width="4" height="4" color="#ffbfc8" geometry="height:15;width:30"></a-plane>
      <a-plane position="15 7.5 0" rotation="0 270 0" width="4" height="4" color="#ffbfc8" geometry="height:15;width:30"></a-plane>
      <a-plane position="-15 7.5 0" rotation="0 90 0" width="4" height="4" color="#ffbfc8" geometry="height:15;width:30"></a-plane>
      <a-plane position="0 15 0" rotation="90 0 0" width="4" height="4" color="#FFCEDC" material="color:#FFCEDC" geometry="height:30;width:30"></a-plane>
      <a-plane position="0 0 0" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" material="color:#00a49b" geometry="height:30;width:30"></a-plane>
      <a-sky color="#ECECEC"></a-sky>

      <a-entity position="0 0 -13">
        <a-box position="0 0.5 -0.1" color="#f16700" width="9" height="1" depth="3"></a-box>
        <a-box position="-3 1.5 0.7" color="#f16700" width="3" height="1.5" depth="2.2"></a-box>
        <a-box position="0 1.5 0.7" color="#f16700" width="3" height="1.5" depth="2.2"></a-box>
        <a-box position="3 1.5 0.7" color="#f16700" width="3" height="1.5" depth="2.2"></a-box>

        <a-box position="0 2 -1.5" color="#f16700" width="10" height="4" depth="1"></a-box>
        <a-box position="0 5 -1.5" color="#f16700" width="6" height="2" depth="1"></a-box>
        <a-cylinder position="-3.1 4.1 -1.5" color="#f16700" rotation="90 0 0" height="1" radius="1.9"></a-cylinder>
        <a-cylinder position="3.1 4.1 -1.5" color="#f16700" rotation="90 0 0" height="1" radius="1.9"></a-cylinder>

        <a-box position="-4.5 1.75 0" color="#f16700" width="1" height="3.5" depth="3"></a-box>
        <a-cylinder position="-4.5 3.45 0" color="#f16700" rotation="90 0 0" height="3" radius="0.5"></a-cylinder>
        <a-box position="4.5 1.75 0" color="#f16700" width="1" height="3.5" depth="3"></a-box>
        <a-cylinder position="4.5 3.45 0" color="#f16700" rotation="90 0 0" height="3" radius="0.5"></a-cylinder>
      </a-entity>

      <a-entity position="0 10 -15">
        <a-box color="#d5910d" width="5.1" height="0.5" depth="0.1"></a-box>
        <a-box position="0 -2.5 0" color="#d5910d" width="5.1" height="0.5" depth="0.1"></a-box>
        <a-box position="-2.3 -1.5 0" color="#d5910d" width="0.5" height="2.5" depth="0.1"></a-box>
        <a-box position="2.3 -1.5 0" color="#d5910d" width="0.5" height="2.5" depth="0.1"></a-box>
        <a-plane position="0 -1.3 0.1" src="#boat" height="2.15" width="4.23"></a-plane>
        <a-box color="#000" width="0.03" height="1.5" depth="0.08" rotation="0 0 52" position="0.6 0.7 0"></a-box>
        <a-box color="#000" width="0.03" height="1.5" depth="0.08" rotation="0 0 -52" position="-0.6 0.7 0"></a-box>
        <a-circle color="#ccc" radius="0.06" position="0 1.13 0.048"></a-circle>
        <a-circle color="#000" radius="0.08" position="0 1.13 0.01"></a-circle>
      </a-entity>

      <a-entity position="-6 5 -13">
        <a-sphere light="type: point; color: #fff; intensity: 0.25;" radius="0.18"></a-sphere>
        <a-cone open-ended="true" radius-top="0.4" radius-bottom="0.6" height="1.3" color="#c70093"></a-cone>
      </a-entity>

      <a-entity position="0 0.1 0" rotation="-90 0 0">
        <a-ring radius-inner="3" radius-outer="5" color="#ff6482"></a-circle>
        <a-circle radius="3" color="#be4dab"></a-circle>
      </a-entity>

      <a-entity position="0 2.6 10" rotation="0 180 0">
        <a-box color="#674381" width="0.5" height="4" depth="1" position="-2.75 0 0"></a-box>
        <a-box color="#674381" width="5" height="0.5" depth="1" position="0 1.75 0"></a-box>
        <a-box color="#674381" width="5" height="0.5" depth="1" position="0 -1.75 0"></a-box>
        <a-box color="#674381" width="1" height="4" depth="1" position="3 0 0"></a-box>
        <a-cone position="2 -2.25 0" radius-top="0.2" radius-bottom="0.06" height="0.7" color="#57007F" rotation="0 0 20"></a-cone>
        <a-cone position="-2 -2.25 0" radius-top="0.2" radius-bottom="0.06" height="0.7" color="#57007F" rotation="0 0 -20"></a-cone>
        <a-video src="#steamed-hams" width="5" height="3"></a-video>
      </a-entity>
    </a-scene>
  </body>
</html>