1
/*!
2
 * @class bkcore.threejs.Preloader
3
 *
4
 * Displays a small 3D preloader scene
5
 * 
6
 * @author Thibaut 'BKcore' Despoulain <http://bkcore.com>
7
 */
8

9
/*!
10
 * @package bkcore.threejs
11
 */
12
var bkcore = bkcore || {};
13
bkcore.threejs = bkcore.threejs || {};
14

15
/**
16
 * Creates a new preloader scene.
17
 * You have to update Preloader.ratio with the % loaded info (float 0.0-1.0) 
18
 * @param {Object{width, height, scale, line}} opts
19
 */
20
bkcore.threejs.Preloader = function(opts)
21
{
22
	this.document = opts.document || document;
23

24
	this.end = false;
25

26
	this.time = 0.0;
27
	this.y = 0.3;
28
	this.ratio = 0.0;
29

30
	this.height = opts.height;
31
	this.width = opts.width;
32

33
	this.scale = opts.scale == undefined ? 10 : opts.scale
34
	this.line = opts.line == undefined ? 3 : opts.line;
35

36
	this.container = opts.container;
37

38
	this.renderer = new THREE.CanvasRenderer({
39
		clearColor: 0xffffff
40
	});
41
	this.renderer.setSize( opts.width, opts.height );
42

43
	this.container.appendChild( this.renderer.domElement );
44

45
	this.ctx = this.renderer.domElement.getContext('2d');
46
	this.ctx.textAlign = "center";
47

48
	this.scene = new THREE.Scene();
49

50
	this.camera = new THREE.PerspectiveCamera( 70, opts.width / opts.height, 1, 1000 );
51
	this.camera.position.z = 100;
52
	this.scene.add( this.camera );
53

54
	this.stage = new THREE.Object3D();
55
	this.stage.position.set(0,10,0);
56
	this.scene.add(this.stage);
57

58
	this.cube = new THREE.Mesh( new THREE.CubeGeometry( this.scale, this.scale, this.scale, 1, 1, 1 ), 
59
		new THREE.MeshBasicMaterial( { color: 0x999999 } ) );
60
	
61
	this.cube.scale.set(0.0,0.0,0.0);
62
	this.stage.add(this.cube);
63

64
	this.cubew = new THREE.Mesh( new THREE.CubeGeometry( this.scale, this.scale, this.scale, 1, 1, 1 ), 
65
		new THREE.MeshBasicMaterial( { 
66
			wireframe: true, 
67
			wireframeLinewidth: this.line, 
68
			//wireframeLinecap: 'square',
69
			//wireframeLinejoin: 'square',
70
			color: 0xffffff
71
		} ) );
72
	this.cube.add(this.cubew);
73

74
	this.outercube = new THREE.Mesh( new THREE.CubeGeometry( this.scale, this.scale, this.scale, 1, 1, 1 ), 
75
		new THREE.MeshBasicMaterial( { 
76
			wireframe: true, 
77
			wireframeLinewidth: this.line, 
78
			//wireframeLinecap: 'square',
79
			//wireframeLinejoin: 'square',
80
			color: 0x0093d8 
81
		} ) );
82
	this.stage.add(this.outercube);
83

84
	var self = this;
85

86
	function raf()
87
	{
88
		if(!self.end) 
89
		{
90
			requestAnimationFrame( raf );
91
			self.render();
92
		}
93
	}
94
	raf();
95

96
	function mm(e){
97
		self.mouseMove.call(self, e);
98
	}
99

100
	this.mmsave = mm;
101

102
	this.document.addEventListener( 'mousemove', mm, false );
103
}
104

105
/**
106
 * Render method to be called from a RAF loop
107
 */
108
bkcore.threejs.Preloader.prototype.render = function()
109
{
110
	this.time += 0.02;
111

112
	this.ctx.clearRect(0 , 0 , this.width , this.height);
113

114
	var s = (this.ratio - this.cube.scale.x) * 0.3;
115

116
	this.cube.scale.addScalar(s);
117
	this.cube.rotation.y = this.time;
118
	this.outercube.rotation.y = this.time;
119

120
	this.stage.rotation.x += (this.y - this.stage.rotation.x)*0.3;
121

122
	this.renderer.render( this.scene, this.camera );
123

124
	this.ctx.save();
125
	this.ctx.font = "40px Arial";
126
    this.ctx.fillStyle = "rgb(200, 200, 200)";
127
    this.ctx.fillText(Math.round(this.ratio*100), this.width/2, this.height/2+30);
128
    this.ctx.restore();
129
}
130

131
bkcore.threejs.Preloader.prototype.mouseMove = function(event) 
132
{
133
	var h2 = this.height/2;
134
	this.y = -(event.clientY - h2)/h2+0.3;
135
}
136

137
/**
138
 * Deletes the Preloader
139
 */
140
bkcore.threejs.Preloader.prototype.remove = function()
141
{
142
	this.document.removeEventListener( 'mousemove', this.mm, false );
143
	this.end = true;
144
	this.renderer = null;
145
	this.scene = null;
146
	this.stage = null;
147
	this.cube = null;
148
	this.cubew = null;
149
	this.innercube = null;
150
	this.container.innerHTML = "";
151
}
152