/
6movement.html
41 lines (32 loc) · 1.58 KB
/
6movement.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
35
36
37
38
39
40
41
<!doctype html>
<!--
LET'S GET MOVING!
In this example we will make a moving entity!
Can you make a sphere following a moving cube instead?
-->
<html>
<head>
<title>Movement</title>
<script src="https://aframe.io/releases/latest/aframe.min.js"></script>
</head>
<body>
<a-scene>
<!-- A camera -->
<a-camera id="camera" position="0 1.8 4"></a-camera>
<!-- A target entity -->
<a-sphere id="target" color="#404040" radius="0.5">
<a-animation attribute="position" from="-12 6 -12" to="8 3 -2" dur="1500" repeat="indefinite" fill="forwards" direction="alternate"></a-animation>
</a-sphere>
<!-- Entities look at the target -->
<a-cube width="1" depth="1" height="1" color="#4CC3D9" look-at="#target" position="-4 0 -2"></a-cube>
<a-cylinder radius="0.6" height="2" color="#7BC8A4" look-at="#target" position="0 0 -2"></a-cylinder>
<a-cube width="0.5" depth="1" height="2" color="#F16745" look-at="#target" position="4 0 -2"></a-cube>
<a-cylinder radius="0.2" height="2" color="#7BC8A4" look-at="#target" position="-4 0 1"></a-cylinder>
<a-cube width="2" depth="1" height="0.25" color="#93648D" look-at="#target" position="0 0 1"></a-cube>
<a-cube width="1" depth="2" height="0.5" color="#999" look-at="#target" position="4 0 1"></a-cube>
<!-- This entity looks at the camera. Use WASD controls to test it -->
<a-cube width="2" depth="2" height="2" color="#FFC65D" look-at="#camera" position="-6 2.5 -2"></a-cube>
<a-image position="0 -1.2 0" src="../_images/radial-highlight-1.png" rotation="-90 0 0" scale="10 10 10"></a-image>
</a-scene>
</body>
</html>