source: other-projects/playing-in-the-street/summer-2013/trunk/Playing-in-the-Street-WPF/Content/Web/mrdoob-three.js-4862f5f/editor/js/libs/ui.three.js@ 28897

Last change on this file since 28897 was 28897, checked in by davidb, 10 years ago

GUI front-end to server base plus web page content
File size: 5.1 KB
Line 
1// Texture
2
3UI.Texture = function () {
4
5 UI.Element.call( this );
6
7 var scope = this;
8
9 var dom = document.createElement( 'span' );
10
11 var input = document.createElement( 'input' );
12 input.type = 'file';
13 input.addEventListener( 'change', function ( event ) {
14
15 loadFile( event.target.files[ 0 ] );
16
17 } );
18
19 var canvas = document.createElement( 'canvas' );
20 canvas.width = 32;
21 canvas.height = 16;
22 canvas.style.cursor = 'pointer';
23 canvas.style.marginRight = '5px';
24 canvas.style.border = '1px solid #888';
25 canvas.addEventListener( 'click', function ( event ) {
26
27 input.click();
28
29 }, false );
30 canvas.addEventListener( 'drop', function ( event ) {
31
32 event.preventDefault();
33 event.stopPropagation();
34 loadFile( event.dataTransfer.files[ 0 ] );
35
36 }, false );
37 dom.appendChild( canvas );
38
39 var name = document.createElement( 'input' );
40 name.disabled = true;
41 name.style.width = '64px';
42 name.style.border = '1px solid #ccc';
43 dom.appendChild( name );
44
45 var loadFile = function ( file ) {
46
47 if ( file.type.match( 'image.*' ) ) {
48
49 var reader = new FileReader();
50 reader.addEventListener( 'load', function ( event ) {
51
52 var image = document.createElement( 'img' );
53 image.addEventListener( 'load', function( event ) {
54
55 var texture = new THREE.Texture( this );
56 texture.sourceFile = file.name;
57 texture.needsUpdate = true;
58
59 scope.setValue( texture );
60
61 if ( scope.onChangeCallback ) scope.onChangeCallback();
62
63 }, false );
64
65 image.src = event.target.result;
66
67 }, false );
68
69 reader.readAsDataURL( file );
70
71 }
72
73 }
74
75 this.dom = dom;
76 this.texture = null;
77 this.onChangeCallback = null;
78
79 return this;
80
81};
82
83UI.Texture.prototype = Object.create( UI.Element.prototype );
84
85UI.Texture.prototype.getValue = function () {
86
87 return this.texture;
88
89};
90
91UI.Texture.prototype.setValue = function ( texture ) {
92
93 var canvas = this.dom.children[ 0 ];
94 var name = this.dom.children[ 1 ];
95 var context = canvas.getContext( '2d' );
96
97 if ( texture !== null ) {
98
99 var image = texture.image;
100
101 if ( image.width > 0 ) {
102
103 name.value = texture.sourceFile;
104
105 var scale = canvas.width / image.width;
106 context.drawImage( image, 0, 0, image.width * scale, image.height * scale );
107
108 } else {
109
110 name.value = texture.sourceFile + ' (error)';
111 context.clearRect( 0, 0, canvas.width, canvas.height );
112
113 }
114
115 } else {
116
117 name.value = '';
118 context.clearRect( 0, 0, canvas.width, canvas.height );
119
120 }
121
122 this.texture = texture;
123
124};
125
126UI.Texture.prototype.onChange = function ( callback ) {
127
128 this.onChangeCallback = callback;
129
130 return this;
131
132};
133
134
135// CubeTexture
136
137UI.CubeTexture = function () {
138
139 UI.Element.call( this );
140
141 var scope = this;
142
143 var dom = document.createElement( 'span' );
144
145 var input = document.createElement( 'input' );
146 input.type = 'file';
147 input.addEventListener( 'change', function ( event ) {
148
149 loadFile( event.target.files[ 0 ] );
150
151 }, false );
152
153 var canvas = document.createElement( 'canvas' );
154 canvas.width = 32;
155 canvas.height = 16;
156 canvas.style.cursor = 'pointer';
157 canvas.style.marginRight = '5px';
158 canvas.style.border = '1px solid #888';
159 canvas.addEventListener( 'click', function ( event ) {
160
161 input.click();
162
163 }, false );
164 canvas.addEventListener( 'drop', function ( event ) {
165
166 event.preventDefault();
167 event.stopPropagation();
168 loadFile( event.dataTransfer.files[ 0 ] );
169
170 }, false );
171 dom.appendChild( canvas );
172
173 var name = document.createElement( 'input' );
174 name.disabled = true;
175 name.style.width = '64px';
176 name.style.border = '1px solid #ccc';
177 dom.appendChild( name );
178
179 var loadFile = function ( file ) {
180
181 if ( file.type.match( 'image.*' ) ) {
182
183 var reader = new FileReader();
184 reader.addEventListener( 'load', function ( event ) {
185
186 var image = document.createElement( 'img' );
187 image.addEventListener( 'load', function( event ) {
188
189 var array = [ this, this, this, this, this, this ];
190
191 var texture = new THREE.Texture( array, new THREE.CubeReflectionMapping() );
192 texture.sourceFile = file.name;
193 texture.needsUpdate = true;
194
195 scope.setValue( texture );
196
197 if ( scope.onChangeCallback ) scope.onChangeCallback();
198
199 }, false );
200 image.src = event.target.result;
201
202 }, false );
203 reader.readAsDataURL( file );
204
205 }
206
207 };
208
209 this.dom = dom;
210 this.texture = null;
211 this.onChangeCallback = null;
212
213 return this;
214
215};
216
217UI.CubeTexture.prototype = Object.create( UI.Element.prototype );
218
219UI.CubeTexture.prototype.getValue = function () {
220
221 return this.texture;
222
223};
224
225UI.CubeTexture.prototype.setValue = function ( texture ) {
226
227 var canvas = this.dom.children[ 0 ];
228 var name = this.dom.children[ 1 ];
229 var context = canvas.getContext( '2d' );
230
231 if ( texture !== null ) {
232
233 var image = texture.image[ 0 ];
234
235 if ( image.width > 0 ) {
236
237 name.value = texture.sourceFile;
238
239 var scale = canvas.width / image.width;
240 context.drawImage( image, 0, 0, image.width * scale, image.height * scale );
241
242 } else {
243
244 name.value = texture.sourceFile + ' (error)';
245 context.clearRect( 0, 0, canvas.width, canvas.height );
246
247 }
248
249 } else {
250
251 name.value = '';
252 context.clearRect( 0, 0, canvas.width, canvas.height );
253
254 }
255
256 this.texture = texture;
257
258};
259
260UI.CubeTexture.prototype.onChange = function ( callback ) {
261
262 this.onChangeCallback = callback;
263
264 return this;
265
266};
Note: See TracBrowser for help on using the repository browser.