-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
118 lines (97 loc) · 5.57 KB
/
index.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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html>
<script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-animation-component.min.js"></script>
<!-- we import arjs version without NFT but with marker + location based support -->
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
<body style="margin : 0px; overflow: hidden;">
<a-scene embedded arjs>
<a-marker preset="hiro">
<!--
<a-entity
position="0 -1 0"
scale="0.05 0.05 0.05"
gltf-model="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf"
></a-entity>
-->
<a-entity
position="0 -1 0"
scale="0.02 0.02 0.02"
gltf-model="./assets/spaceship/fs.gltf"
animation__yo="property: rotation; dur: 1000;
loop: true; to: 0 360 0"
></a-entity>
<a-entity
position="-2 3 0"
scale=".25 .25 .25"
gltf-model="./assets/ship/model.gltf"
></a-entity>
<a-light id="spl" type="directional" position="0 0 0" rotation="-90 0 0" color="#FFFFFF" target="#directionaltarget">
<a-entity id="directionaltarget" position="0 0 -1" ></a-entity>
</a-light>
<a-box scale="0.3 0.3 0.3" color="#FFFF00"></a-box>
<a-cylinder color="#F55" radius="0.1"
animation="property: components.material.material.color; type: color; dir: alternate; dur: 1000;
easing: easeInSine; loop: true; to: #5F5"
animation__scale="property: scale; dir: alternate; dur: 200;
easing: easeInSine; loop: true; to: 1.2 1 1.2"
animation__yoyo="property: position; dir: alternate; dur: 1000;
easing: easeInSine; loop: true; to: 0 2 0"></a-cylinder>
<a-box position="4 0 0" rotation="0 45 0" scale=".2 .2 .2" width="1" height="1" depth="1" color="#4CC3D9"
animation__yo="property: position; dir: alternate; dur: 1000;
loop: true; to: 4 2 .7"
></a-box>
<a-box position="4 0 .2" rotation="0 45 0" scale=".2 .2 .2" width="1" height="1" depth="1" color="#4CC3D9"
animation__yo="property: position; dir: alternate; dur: 1000;
loop: true; to: 4 1 .5"></a-box>
<a-box position="4 0 .4" rotation="0 45 0" scale=".2 .2 .2" width="1" height="1" depth="1" color="#4CC3D9"
animation__yo="property: position; dir: alternate; dur: 1000;
loop: true; to: 3 -1 .7"></a-box>
<a-box position="4 0 .6" rotation="0 45 0" scale=".2 .2 .2" width="1" height="1" depth="1" color="#4CC3D9"
animation__yo="property: position; dir: alternate; dur: 1000;
loop: true; to: 3 -2.3 .1"></a-box>
<a-box position="3.8 0 .1" rotation="0 45 0" scale=".2 .2 .2" width="1" height="1" depth="1" color="#4CC3D9"
animation__yo="property: position; dir: alternate; dur: 1000;
loop: true; to: 5 -3 .4"></a-box>
<a-box position="3.8 0 .3" rotation="0 45 0" scale=".2 .2 .2" width="1" height="1" depth="1" color="#4CC3D9"
animation__yo="property: position; dir: alternate; dur: 1000;
loop: true; to: 4 1 .3"></a-box>
<a-box position="3.8 0 .5" rotation="0 45 0" scale=".2 .2 .2" width="1" height="1" depth="1" color="#4CC3D9"
animation__yo="property: position; dir: alternate; dur: 1000;
loop: true; to: 3 2 .2"></a-box>
<a-box position="3.6 0 .2" rotation="0 45 0" scale=".2 .2 .2" width="1" height="1" depth="1" color="#4CC3D9"
animation__yo="property: position; dir: alternate; dur: 1000;
loop: true; to: 3 1 .7"></a-box>
<a-box position="3.6 0 .4" rotation="0 45 0" scale=".2 .2 .2" width="1" height="1" depth="1" color="#4CC3D9"
animation__yo="property: position; dir: alternate; dur: 1000;
loop: true; to: 3 2 .75"></a-box>
<a-box position="3.4 0 .3" rotation="0 45 0" scale=".2 .2 .2" width="1" height="1" depth="1" color="#4CC3D9"
animation__yo="property: position; dir: alternate; dur: 1000;
loop: true; to: 2 1 .2"></a-box>
<a-sphere radius="0.1"
animation__yo="property: position; dir: alternate; dur: 1000;
loop: true; to: 2 0 0"></a-cylinder>
<a-sphere radius="0.1"
animation__yo1="property: position; dir: alternate; dur: 1000;
loop: true; to: 4 0 0"></a-cylinder>
<a-sphere radius="0.1"
animation__yo="property: position; dir: alternate; dur: 1000;
loop: true; to: 0 0 2"></a-cylinder>
<a-sphere radius="0.1"
animation__yo="property: position; dir: alternate; dur: 1000;
loop: true; to: 0 0 -2"></a-cylinder>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
<script>
document.body.onkeyup = function(e){
if(e.keyCode == 32){
var col = ["#FF0000","#FFFFFF","#FF00FF","#FFFF00","#00FF00"];
var item = col[Math.floor(Math.random() * col.length)];
console.log(item);
document.getElementById('spl').setAttribute('color', item);
}
}
</script>
</html>