/
test.html
108 lines (94 loc) · 5.52 KB
/
test.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
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Virtual Institute of Simulacra Art</title>
<meta name="description" content="Digital museum">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script
src="https://unpkg.com/aframe-terrain-model-component@0.2.3/dist/aframe-terrain-model-component.min.js"></script>
<script
src="https://unpkg.com/aframe-particle-system-component@1.0.x/dist/aframe-particle-system-component.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.0/dist/aframe-extras.min.js"></script>
<script src="https://unpkg.com/@tlaukkan/aframe-three-color-gradient-shader@0.0.1/index.js"></script>
<script
src="https://unpkg.com/aframe-text-geometry-component@0.5.1/dist/aframe-text-geometry-component.min.js"></script>
<script
src="https://unpkg.com/aframe-environment-component@1.1.0/dist/aframe-environment-component.min.js"></script>
</head>
<body>
<a-scene>
<!-- Asset Loader -->
<a-assets>
<a-asset-item id="kiki-obj1" src="assets/kiki-museum.obj"></a-asset-item>
<a-asset-item id="kiki-obj2" src="assets/kiki-museum-2.obj"></a-asset-item>
<a-asset-item id="kiki-mtl1" src="assets/kiki-museum.mtl"></a-asset-item>
<a-asset-item id="kiki-mtl2" src="assets/kiki-museum-2.mtl"></a-asset-item>
<a-asset-item id="EXO" src="https://cdn.aframe.io/fonts/Exo2Bold.fnt"></a-asset-item>
</a-assets>
<!-- Load Models -->
<a-entity id="kiki-museum1" class="clickable" obj-model="obj: #kiki-obj1; mtl: #kiki-mtl1"
material=" metalness:1" position="0 1 -10" scale="2 4 2"
animation__mouseenter="property: scale; to: 2.2 4.2 2.2; startEvents: mouseenter; dur: 500"
animation__mouseleave="property: scale; to: 2 4 2; startEvents: mouseleave; dur: 500">
</a-entity>
<a-entity id="kiki-museum2" class="clickable" obj-model="obj: #kiki-obj2"
material=" color: #030303; metalness:1; opacity:0.5" position="0 1 -10" scale="2 4 2"
animation__mouseenter="property: scale; to: 2.2 4.2 2.2; startEvents: mouseenter; dur: 500"
animation__mouseleave="property: scale; to: 2 4 2; startEvents: mouseleave; dur: 500">
</a-entity>
<!-- Add Gradient sky -->
<a-sky geometry=" primitive: sphere"
material="shader: threeColorGradientShader; topColor: #4820fc; middleColor: #cb8eff; bottomColor: #8400f6;offset: 0.0">
</a-sky>
<!-- Add Text -->
<a-entity id="about" class="clickable" text-geometry="value: ABOUT" font="#EXO" size="64"
material="color: white" position="0 25 0" rotation="0 0 0"
animation__mouseenter="property: components.material.material.color; to: blue; startEvents: mouseenter; dur: 500"
animation__mouseleave="property: components.material.material.color; to: white; startEvents: mouseleave; dur: 500">
</a-entity>
<!-- Add Light -->
<a-entity light="type: ambient; color: #CCC"></a-entity>
<a-entity light="type: directional; color: #EEE; intensity:5" position="0 20 -20"></a-entity>
<!-- Add terrain -->
<a-entity color-terrain-model='colorScheme: inferno;
DEM: url(assets/noctis-3500-clip-envi.bin);
planeWidth: 100;
planeHeight: 100;
segmentsWidth: 190;
segmentsHeight: 199;
zPosition: 1' rotation="5 0 0">
</a-entity>
<!-- Add Ocean -->
<a-ocean color="#20f7fc" width="100" depth="100" density="50" speed="1" position="0 0.6 0">
</a-ocean>
<!-- Add Particle System -->
<a-entity particle-system="preset: snow; color: #24CAFF; particleCount: 1500"></a-entity>
<!-- Add Camera -->
<a-entity id="mouseCursor" cursor="rayOrigin: mouse" raycaster="objects: .clickable"></a-entity>
<a-entity camera look-controls wasd-controls position="0 25 20" raycaster="objects: .clickable"
animation__mouseenter="property: position; to: 0 20 0; startEvents: mouseenter; dur: 500">
</a-entity>
<!-- <a-entity camera look-controls wasd-controls position="0 30 3">
<a-cursor id="cursor" position="0 0 -1" color="white" raycaster="objects: .clickable">
<a-animation begin="mouseenter" attribute="color" dur="50" from="white" to="springgreen">
</a-animation>
<a-animation begin="mouseleave" attribute="color" dur="50" from="springgreen" to="white">
</a-animation>
<a-animation begin="click" easing="ease-in" attribute="scale" fill="backwards" from="0.1 0.1 0.1"
to="1 1 1" dur="50"></a-animation>
</a-cursor>
</a-entity> -->
</a-scene>
<script>
var about = document.querySelector('#about');
var kiki_museum1 = document.querySelector('#kiki-museum1');
kiki_museum1.addEventListener('click', function () {
window.location.href = 'html/template.html';
})
about.addEventListener('click', function () {
window.location.href = 'about.html';
})
</script>
</body>