-
Notifications
You must be signed in to change notification settings - Fork 0
/
loader.html
79 lines (72 loc) · 2.57 KB
/
loader.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
<!DOCTYPE html>
<html>
<head>
<title>Loading...</title>
<style type="text/css">
body {
margin: 0;
width: 100%;
position: absolute;
top: 45%;
}
</style>
</head>
<body>
<div id="progressbar"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/progressbar.js/1.1.0/progressbar.min.js" integrity="sha256-c83qPqBpH5rEFQvgyTfcLufqoQIFFoqE5B71yeBXhLc=" crossorigin="anonymous"></script>
<script type="text/javascript">
// Docs: http://progressbarjs.readthedocs.org/en/1.0.0/
var bar = new ProgressBar.Line(progressbar, {
//strokeWidth: 4,
//easing: 'easeInOut',
duration: 1400,
color: '#000',
trailColor: '#eee',
trailWidth: 0,
svgStyle: {width: '100%', height: '100%'},
text: {
style: {
//color: '#000',
position: 'absolute',
right: '50%',
top: '30px',
},
//autoStyleContainer: false
},
from: {color: '#000'},
to: {color: '#000'},
step: (state, bar) => {
bar.setText(Math.round(bar.value() * 100) + ' %');
// bar.path.setAttribute('stroke', state.color);
}
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/86/three.min.js" integrity="sha256-gec3OIQVcpO401S96RlOij8H3wSB9vw7LzyaogKCT9Q=" crossorigin="anonymous"></script>
<script type="text/javascript">
var manager = new THREE.LoadingManager();
manager.onStart = function ( url, itemsLoaded, itemsTotal ) {
console.log( 'Started loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.' );
};
manager.onLoad = function ( ) {
console.log( 'Loading Complete!');
// call scene constructor
};
manager.onProgress = function ( url, loaded, total ) {
bar.animate(loaded/total);
console.log( 'Loading file: ' + url + '.\nLoaded ' + loaded + ' of ' + total + ' files.' );
};
manager.onError = function ( url ) {
console.log( 'There was an error loading ' + url );
};
var loader = new THREE.ImageLoader(manager);
var texture = loader.load('https://placehold.it/400x400', function ( texture ) {
// texture.mapping = // THREE.UVMapping(default)/THREE.CubeReflectionMapping/THREE.CubeRefractionMapping/THREE.SphericalReflectionMapping
texture.wrapS = texture.wrapT = THREE.RepeatWrapping; // THREE.ClampToEdgeWrapping(default)/THREE.RepeatWrapping/THREE.MirroredRepeatWrapping.
// texture.anisotropy = 16 // renderer.getMaxAnisotropy()
// texture.flipY = true
texture.name = 'myTextureName'
// texture.offset = 0.1
});
</script>
</body>
</html>