-
Notifications
You must be signed in to change notification settings - Fork 23
/
index.html
132 lines (112 loc) · 4.09 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
126
127
128
129
130
131
132
<html>
<head>
<title>JS WoW Model Viewer</title>
<meta name="description" content="JavaScript World of Warcraft model viewer powered by jDataView, jBinary and WebGL" />
<meta property="og:image" content="//jdataview.github.io/jsWoWModelViewer/images/modelviewer.png" />
<!-- Binary Libs -->
<script src="//jdataview.github.io/dist/jdataview.js"></script>
<script src="//jdataview.github.io/dist/jbinary.js"></script>
<!-- WebGL Libs -->
<script src="scripts/gl-matrix.js"></script>
<!-- Main -->
<script src="scripts/m2.js"></script>
<script src="scripts/modelviewer.js"></script>
<script src="scripts/launcher.js"></script>
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
attribute vec2 aTextureCoord;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
varying vec3 vLightWeighting;
varying vec2 vTextureCoord;
void main(void) {
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
vLightWeighting = aVertexPosition - vec3(-4, 0, 1);
vTextureCoord = aTextureCoord;
}
</script>
<script id="shader-fs" type="x-shader/x-fragment">
#ifdef GL_ES
precision highp float;
#endif
varying vec3 vLightWeighting;
varying vec2 vTextureCoord;
uniform sampler2D uSampler;
void main(void) {
vec4 textureColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
gl_FragColor = vec4(textureColor.rgb, 1);
}
</script>
<style>
@font-face {
font-family: 'buttons';
src: url("./font/buttons.eot");
src: url("./font/buttons.eot?#iefix") format('embedded-opentype'), url("./font/buttons.woff") format('woff'), url("./font/buttons.ttf") format('truetype'), url("./font/buttons.svg#buttons") format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"]:before,
[class*=" icon-"]:before {
font-family: 'buttons';
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: 0.2em;
text-align: center;
/* Uncomment for 3D effect */
text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3);
/* fix buttons height */
line-height: 1em;
/* you can be more comfortable with increased icons size */
/* font-size: 120%; */
}
.icon-pause:before {
content: '\e801';
padding: 7px 6px 7px 7px;
}
.icon-play:before {
content: '\e800';
padding: 7px 5px 7px 8px;
}
body {
margin: 0
}
#play, #hint {
position: absolute;
color: #eee;
background: transparent;
display: inline-block;
padding: 0;
}
#play {
left: 10px;
top: 10px;
border: 1px solid #eee;
border-radius: 3px;
cursor: pointer;
}
#hint {
left: 50px;
top: 1em;
}
#gl {
width: 100%;
height: 100%;
border: 0;
cursor: default;
}
#gl:active {
cursor: move;
}
</style>
<!-- Yandex.Metrika counter --><script type="text/javascript">(function (d, w, c) { (w[c] = w[c] || []).push(function() { try { w.yaCounter23393200 = new Ya.Metrika({id:23393200, webvisor:true, clickmap:true, trackLinks:true, accurateTrackBounce:true, trackHash:true}); } catch(e) { } }); var n = d.getElementsByTagName("script")[0], s = d.createElement("script"), f = function () { n.parentNode.insertBefore(s, n); }; s.type = "text/javascript"; s.async = true; s.src = (d.location.protocol == "https:" ? "https:" : "http:") + "//mc.yandex.ru/metrika/watch.js"; if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); } })(document, window, "yandex_metrika_callbacks");</script><noscript><div><img src="//mc.yandex.ru/watch/23393200" style="position:absolute; left:-9999px;" alt="" /></div></noscript><!-- /Yandex.Metrika counter -->
</head>
<body>
<button id="play" class="icon-play"></button><div id="hint">Use your arrow keys and mouse for changing angles.</div>
<a href="https://github.com/vjeux/jsWoWModelViewer"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub"></a>
<canvas id="gl"></canvas>
</body>
</html>