-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathaFrameTest.html
62 lines (57 loc) · 2.65 KB
/
aFrameTest.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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://aframe.io/releases/0.8.0/aframe.min.js">
// const THREE = require('three');
</script>
</head>
<body>
<p style="color:white">Hello World</p>
<a-scene stats>
<a-entity width="1" height="1" position="0 1.5 -3" rotation="45 45 45">
<p style="color:white">Hello World</p>
<!-- <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> -->
<a-plane id="red-plane" position="0 0 0.5" rotation="0 0 0" width="1" height="1" color="#FF0000"></a-plane>
<a-plane position="-0.5 0 0" rotation="0 -90 0" width="1" height="1" color="#0000ff"></a-plane>
<a-plane position="0.5 0 0" rotation="0 90 0" width="1" height="1" color="#00ffff"></a-plane>
<a-plane position="0 0 -0.5" rotation="180 0 0" width="1" height="1" color="#00ff00"></a-plane>
<a-plane position="0 0.5 0" rotation="-90 0 0" width="1" height="1" color="#ffff00"></a-plane>
<a-plane position="0 -0.5 0" rotation="90 0 0" width="1" height="1" color="#ff00ff">
<a-animation attribute="position"
easing="linear"
dur="5000"
direction="both"
fill="both"
to="0 -1 0"
from="0 -0.5 0"
repeat="indefinite"></a-animation>
</a-plane>
<a-plane position="0 -0.5 0" rotation="-90 0 0" width="1" height="1" color="#990099">
<a-animation attribute="position"
easing="linear"
dur="10000"
fill="forwards"
to="0 -1 0"
repeat="indefinite"></a-animation>
</a-plane>
<a-sky color="#000000"></a-sky>
<a-animation attribute="rotation"
easing="linear"
dur="10000"
fill="forwards"
to="45 405 45"
repeat="indefinite"></a-animation>
</a-entity>
</a-scene>
</body>
<script>
const redPlane = document.getElementById('red-plane');
console.log(redPlane)
// redPlane.object3D.position.set(0, 1.5, -3);
</script>
</html>