-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
125 lines (108 loc) · 3.35 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
119
120
121
122
123
124
125
---
---
<html>
<head>
<title>I'm a little teapot, short and stout</title>
<style>
{% comment %}
GLAM balks if the styles are loaded externally, and I have no idea why.
{% endcomment %}
body{
margin: 0px;
background-color: #000;
}
#floor {
color: #ff0000;
line-width:2;
transform: scaleX(4) scaleZ(4);
}
#teapot {
shader: phong;
reflectivity: 5;
diffuse-color: #eee;
}
#saucer {
shader: phong;
reflectivity: 5;
diffuse-color: #77a;
}
.steam {
image: url({{ '/image/steam.png' | prepend:site.baseurl }});
}
#root {
animation-duration: 10s;
animation-name: spin;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.dont-like-it {
transform: rotateY(90deg);
shader: lambert;
diffuse-color: red;
}
@keyframes spin {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js"></script>
<script src="{{ '/script/glam.min.js' | prepend:site.baseurl }}" ></script>
{% comment %}Scripts loaded up-front to prevent a flash of unstyled content (FOUC).{% endcomment %}
</head>
<body>
<div id="container" style="width:98%; height:98%;position:absolute;">
<glam>
<scene>
<camera/>
<group id="root">
<mesh id="teapot" vertexNormals="true">
<vertices>{{ site.data.teapot.vertices[0].values | join:' ' }}</vertices>
<normals>{{ site.data.teapot.vertices[1].values | join:' ' }}</normals>
<faces>{{ site.data.teapot.connectivity[0].indices | join:' ' }}</faces>
</mesh>
<cylinder id="saucer" height="0.1" y="-0.05" />
<particles maxAge="5" class="steam" x="3" y="2.5">
<emitter
acceleration="0 -0.09 0"
accelerationSpread="1.4 0.6 1.4"
blending="normal"
opacityMiddle="0.2"
opacityStart="0.8"
opacityEnd="0"
particlesPerSecond="50"
positionSpread="0.1 0 0.1"
size="1"
sizeEnd="5"
velocity="1.2 3 0"
>
</emitter>
</particles>
<particles maxAge="5" class="steam" y="2.5">
<emitter
acceleration="0 -0.09 0"
accelerationSpread="0.8 0.8 0.8"
blending="normal"
opacityMiddle="0.05"
opacityStart="0.8"
opacityEnd="0"
particlesPerSecond="1"
positionSpread="3 0.1 3"
size="1"
sizeEnd="5"
velocity="0 2 0"
>
</emitter>
</particles>
<text value="Tea is for the weak" class="dont-like-it" y="6.5"></text>
<text value="Coffee master race" class="dont-like-it" y="5"></text>
<text value="Discuss amongst yourselves" class="dont-like-it" y="-1"></text>
</group>
</scene>
</glam>
</div>
</body>
</html>