/
step03.html
34 lines (31 loc) · 1.51 KB
/
step03.html
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
<html>
<head>
<title>Lightful</title>
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/alvinwan/aframe-low-poly@0.0.5/dist/aframe-low-poly.min.js"></script>
</head>
<body>
<a-scene fog="type: linear; color: #111; near:10; far:15">
<!-- Lights! -->
<a-light type="directional" castshadow="true" intensity="0.5" color="#FFF" position="2 5 0"></a-light>
<a-light intensity="0.1" type="ambient" position="1 1 1" color="#FFF"></a-light>
<a-sky color="#111"></a-sky>
<!-- Camera! -->
<a-entity id="rig" position="0 3 0">
<a-camera wasd-controls look-controls></a-camera>
</a-entity>
<!-- Action! -->
<a-box shadow width="75" height="0.1" depth="75" position="0 -1 0" color="#222"></a-box>
<a-entity id="carousel">
<a-entity rotation="0 90 0" id="template" class="wrapper" position="0 0 0">
<a-entity id="container-orb0" class="container" position="8 3 0" scale="1 1 1">
<a-entity class="orb" id="orb0" data-id="0">
<lp-sphere seed="0" shadow max-amplitude="1 1 1" position="-0.5 0 -0.5"></lp-sphere>
<lp-sphere seed="0" shadow max-amplitude="1 1 1" rotation="0 45 45" opacity="0.5" position="-0.5 0 -0.5"></lp-sphere>
<a-animation attribute="rotation" repeat="indefinite" from="0 0 0" to="0 360 0" dur="5000"></a-animation>
</a-entity>
</a-entity>
</a-entity>
</a-entity>
</body>
</html>