source: other-projects/playing-in-the-street/summer-2013/trunk/Playing-in-the-Street-WPF/Content/Web/mrdoob-three.js-4862f5f/editor/js/Sidebar.Material.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: 17.6 KB
Line 
1Sidebar.Material = function ( editor ) {
2
3 var signals = editor.signals;
4
5 var materialClasses = {
6
7 'LineBasicMaterial': THREE.LineBasicMaterial,
8 'LineDashedMaterial': THREE.LineDashedMaterial,
9 'MeshBasicMaterial': THREE.MeshBasicMaterial,
10 'MeshDepthMaterial': THREE.MeshDepthMaterial,
11 'MeshFaceMaterial': THREE.MeshFaceMaterial,
12 'MeshLambertMaterial': THREE.MeshLambertMaterial,
13 'MeshNormalMaterial': THREE.MeshNormalMaterial,
14 'MeshPhongMaterial': THREE.MeshPhongMaterial,
15 'ParticleSystemMaterial': THREE.ParticleSystemMaterial,
16 'ShaderMaterial': THREE.ShaderMaterial,
17 'SpriteMaterial': THREE.SpriteMaterial,
18 'SpriteCanvasMaterial': THREE.SpriteCanvasMaterial,
19 'Material': THREE.Material
20
21 };
22
23 var container = new UI.Panel();
24 container.setDisplay( 'none' );
25 container.dom.classList.add( 'Material' );
26
27 container.add( new UI.Text().setValue( 'MATERIAL' ) );
28 container.add( new UI.Break(), new UI.Break() );
29
30 // uuid
31
32 var materialUUIDRow = new UI.Panel();
33 var materialUUID = new UI.Input().setWidth( '115px' ).setColor( '#444' ).setFontSize( '12px' ).setDisabled( true );
34 var materialUUIDRenew = new UI.Button( '⟳' ).setMarginLeft( '7px' ).onClick( function () {
35
36 materialUUID.setValue( THREE.Math.generateUUID() );
37 update();
38
39 } );
40
41 materialUUIDRow.add( new UI.Text( 'UUID' ).setWidth( '90px' ) );
42 materialUUIDRow.add( materialUUID );
43 materialUUIDRow.add( materialUUIDRenew );
44
45 container.add( materialUUIDRow );
46
47 // name
48
49 var materialNameRow = new UI.Panel();
50 var materialName = new UI.Input().setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( function () {
51
52 editor.setMaterialName( editor.selected.material, materialName.getValue() );
53
54 } );
55
56 materialNameRow.add( new UI.Text( 'Name' ).setWidth( '90px' ) );
57 materialNameRow.add( materialName );
58
59 container.add( materialNameRow );
60
61 // class
62
63 var materialClassRow = new UI.Panel();
64 var materialClass = new UI.Select().setOptions( {
65
66 'LineBasicMaterial': 'LineBasicMaterial',
67 'LineDashedMaterial': 'LineDashedMaterial',
68 'MeshBasicMaterial': 'MeshBasicMaterial',
69 'MeshDepthMaterial': 'MeshDepthMaterial',
70 'MeshFaceMaterial': 'MeshFaceMaterial',
71 'MeshLambertMaterial': 'MeshLambertMaterial',
72 'MeshNormalMaterial': 'MeshNormalMaterial',
73 'MeshPhongMaterial': 'MeshPhongMaterial',
74 'SpriteMaterial': 'SpriteMaterial'
75
76 } ).setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( update );
77
78 materialClassRow.add( new UI.Text( 'Type' ).setWidth( '90px' ) );
79 materialClassRow.add( materialClass );
80
81 container.add( materialClassRow );
82
83 // color
84
85 var materialColorRow = new UI.Panel();
86 var materialColor = new UI.Color().onChange( update );
87
88 materialColorRow.add( new UI.Text( 'Color' ).setWidth( '90px' ) );
89 materialColorRow.add( materialColor );
90
91 container.add( materialColorRow );
92
93 // ambient
94
95 var materialAmbientRow = new UI.Panel();
96 var materialAmbient = new UI.Color().onChange( update );
97
98 materialAmbientRow.add( new UI.Text( 'Ambient' ).setWidth( '90px' ) );
99 materialAmbientRow.add( materialAmbient );
100
101 container.add( materialAmbientRow );
102
103 // emissive
104
105 var materialEmissiveRow = new UI.Panel();
106 var materialEmissive = new UI.Color().onChange( update );
107
108 materialEmissiveRow.add( new UI.Text( 'Emissive' ).setWidth( '90px' ) );
109 materialEmissiveRow.add( materialEmissive );
110
111 container.add( materialEmissiveRow );
112
113 // specular
114
115 var materialSpecularRow = new UI.Panel();
116 var materialSpecular = new UI.Color().onChange( update );
117
118 materialSpecularRow.add( new UI.Text( 'Specular' ).setWidth( '90px' ) );
119 materialSpecularRow.add( materialSpecular );
120
121 container.add( materialSpecularRow );
122
123 // shininess
124
125 var materialShininessRow = new UI.Panel();
126 var materialShininess = new UI.Number( 30 ).onChange( update );
127
128 materialShininessRow.add( new UI.Text( 'Shininess' ).setWidth( '90px' ) );
129 materialShininessRow.add( materialShininess );
130
131 container.add( materialShininessRow );
132
133 // vertex colors
134
135 var materialVertexColorsRow = new UI.Panel();
136 var materialVertexColors = new UI.Select().setOptions( {
137
138 0: 'No',
139 1: 'Face',
140 2: 'Vertex'
141
142 } ).onChange( update );
143
144 materialVertexColorsRow.add( new UI.Text( 'Vertex Colors' ).setWidth( '90px' ) );
145 materialVertexColorsRow.add( materialVertexColors );
146
147 container.add( materialVertexColorsRow );
148
149
150 // map
151
152 var materialMapRow = new UI.Panel();
153 var materialMapEnabled = new UI.Checkbox( false ).onChange( update );
154 var materialMap = new UI.Texture().setColor( '#444' ).onChange( update );
155
156 materialMapRow.add( new UI.Text( 'Map' ).setWidth( '90px' ) );
157 materialMapRow.add( materialMapEnabled );
158 materialMapRow.add( materialMap );
159
160 container.add( materialMapRow );
161
162
163 // light map
164
165 var materialLightMapRow = new UI.Panel();
166 var materialLightMapEnabled = new UI.Checkbox( false ).onChange( update );
167 var materialLightMap = new UI.Texture().setColor( '#444' ).onChange( update );
168
169 materialLightMapRow.add( new UI.Text( 'Light Map' ).setWidth( '90px' ) );
170 materialLightMapRow.add( materialLightMapEnabled );
171 materialLightMapRow.add( materialLightMap );
172
173 container.add( materialLightMapRow );
174
175
176 // bump map
177
178 var materialBumpMapRow = new UI.Panel();
179 var materialBumpMapEnabled = new UI.Checkbox( false ).onChange( update );
180 var materialBumpMap = new UI.Texture().setColor( '#444' ).onChange( update );
181 var materialBumpScale = new UI.Number( 1 ).setWidth( '30px' ).onChange( update );
182
183 materialBumpMapRow.add( new UI.Text( 'Bump Map' ).setWidth( '90px' ) );
184 materialBumpMapRow.add( materialBumpMapEnabled );
185 materialBumpMapRow.add( materialBumpMap );
186 materialBumpMapRow.add( materialBumpScale );
187
188 container.add( materialBumpMapRow );
189
190
191 // normal map
192
193 var materialNormalMapRow = new UI.Panel();
194 var materialNormalMapEnabled = new UI.Checkbox( false ).onChange( update );
195 var materialNormalMap = new UI.Texture().setColor( '#444' ).onChange( update );
196
197 materialNormalMapRow.add( new UI.Text( 'Normal Map' ).setWidth( '90px' ) );
198 materialNormalMapRow.add( materialNormalMapEnabled );
199 materialNormalMapRow.add( materialNormalMap );
200
201 container.add( materialNormalMapRow );
202
203
204 // specular map
205
206 var materialSpecularMapRow = new UI.Panel();
207 var materialSpecularMapEnabled = new UI.Checkbox( false ).onChange( update );
208 var materialSpecularMap = new UI.Texture().setColor( '#444' ).onChange( update );
209
210 materialSpecularMapRow.add( new UI.Text( 'Specular Map' ).setWidth( '90px' ) );
211 materialSpecularMapRow.add( materialSpecularMapEnabled );
212 materialSpecularMapRow.add( materialSpecularMap );
213
214 container.add( materialSpecularMapRow );
215
216
217 // env map
218
219 var materialEnvMapRow = new UI.Panel();
220 var materialEnvMapEnabled = new UI.Checkbox( false ).onChange( update );
221 var materialEnvMap = new UI.CubeTexture().setColor( '#444' ).onChange( update );
222 var materialReflectivity = new UI.Number( 1 ).setWidth( '30px' ).onChange( update );
223
224 materialEnvMapRow.add( new UI.Text( 'Env Map' ).setWidth( '90px' ) );
225 materialEnvMapRow.add( materialEnvMapEnabled );
226 materialEnvMapRow.add( materialEnvMap );
227 materialEnvMapRow.add( materialReflectivity );
228
229 container.add( materialEnvMapRow );
230
231
232 // blending
233
234 var materialBlendingRow = new UI.Panel();
235 var materialBlending = new UI.Select().setOptions( {
236
237 0: 'No',
238 1: 'Normal',
239 2: 'Additive',
240 3: 'Subtractive',
241 4: 'Multiply',
242 5: 'Custom'
243
244 } ).setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( update );
245
246 materialBlendingRow.add( new UI.Text( 'Blending' ).setWidth( '90px' ) );
247 materialBlendingRow.add( materialBlending );
248
249 container.add( materialBlendingRow );
250
251
252 // side
253
254 var materialSideRow = new UI.Panel();
255 var materialSide = new UI.Select().setOptions( {
256
257 0: 'Front',
258 1: 'Back',
259 2: 'Double'
260
261 } ).setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( update );
262
263 materialSideRow.add( new UI.Text( 'Side' ).setWidth( '90px' ) );
264 materialSideRow.add( materialSide );
265
266 container.add( materialSideRow );
267
268
269 // opacity
270
271 var materialOpacityRow = new UI.Panel();
272 var materialOpacity = new UI.Number().setWidth( '60px' ).setRange( 0, 1 ).onChange( update );
273
274 materialOpacityRow.add( new UI.Text( 'Opacity' ).setWidth( '90px' ) );
275 materialOpacityRow.add( materialOpacity );
276
277 container.add( materialOpacityRow );
278
279
280 // transparent
281
282 var materialTransparentRow = new UI.Panel();
283 var materialTransparent = new UI.Checkbox().setLeft( '100px' ).onChange( update );
284
285 materialTransparentRow.add( new UI.Text( 'Transparent' ).setWidth( '90px' ) );
286 materialTransparentRow.add( materialTransparent );
287
288 container.add( materialTransparentRow );
289
290
291 // wireframe
292
293 var materialWireframeRow = new UI.Panel();
294 var materialWireframe = new UI.Checkbox( false ).onChange( update );
295 var materialWireframeLinewidth = new UI.Number( 1 ).setWidth( '60px' ).setRange( 0, 100 ).onChange( update );
296
297 materialWireframeRow.add( new UI.Text( 'Wireframe' ).setWidth( '90px' ) );
298 materialWireframeRow.add( materialWireframe );
299 materialWireframeRow.add( materialWireframeLinewidth );
300
301 container.add( materialWireframeRow );
302
303
304 //
305
306 function update() {
307
308 var object = editor.selected;
309 var geometry = object.geometry;
310 var material = object.material;
311 var textureWarning = false;
312 var objectHasUvs = false;
313
314 if ( object instanceof THREE.Sprite ) objectHasUvs = true;
315 if ( geometry instanceof THREE.Geometry && geometry.faceVertexUvs[ 0 ].length > 0 ) objectHasUvs = true;
316 if ( geometry instanceof THREE.BufferGeometry && geometry.attributes.uv !== undefined ) objectHasUvs = true;
317
318 if ( material ) {
319
320 if ( material.uuid !== undefined ) {
321
322 material.uuid = materialUUID.getValue();
323
324 }
325
326 if ( material instanceof materialClasses[ materialClass.getValue() ] === false ) {
327
328 material = new materialClasses[ materialClass.getValue() ]();
329 object.material = material;
330
331 }
332
333 if ( material.color !== undefined ) {
334
335 material.color.setHex( materialColor.getHexValue() );
336
337 }
338
339 if ( material.ambient !== undefined ) {
340
341 material.ambient.setHex( materialAmbient.getHexValue() );
342
343 }
344
345 if ( material.emissive !== undefined ) {
346
347 material.emissive.setHex( materialEmissive.getHexValue() );
348
349 }
350
351 if ( material.specular !== undefined ) {
352
353 material.specular.setHex( materialSpecular.getHexValue() );
354
355 }
356
357 if ( material.shininess !== undefined ) {
358
359 material.shininess = materialShininess.getValue();
360
361 }
362
363 if ( material.vertexColors !== undefined ) {
364
365 geometry.buffersNeedUpdate = true;
366 geometry.colorsNeedUpdate = true;
367
368 material.vertexColors = parseInt( materialVertexColors.getValue() );
369 material.needsUpdate = true;
370
371 }
372
373 if ( material.map !== undefined ) {
374
375 var mapEnabled = materialMapEnabled.getValue() === true;
376
377 if ( objectHasUvs ) {
378
379 if ( geometry !== undefined ) {
380
381 geometry.buffersNeedUpdate = true;
382 geometry.uvsNeedUpdate = true;
383
384 }
385
386 material.map = mapEnabled ? materialMap.getValue() : null;
387 material.needsUpdate = true;
388
389 } else {
390
391 if ( mapEnabled ) textureWarning = true;
392
393 }
394
395 }
396
397 /*
398 if ( material.lightMap !== undefined ) {
399
400 var lightMapEnabled = materialLightMapEnabled.getValue() === true;
401
402 if ( objectHasUvs ) {
403
404 geometry.buffersNeedUpdate = true;
405 geometry.uvsNeedUpdate = true;
406
407 material.lightMap = lightMapEnabled ? materialLightMap.getValue() : null;
408 material.needsUpdate = true;
409
410 } else {
411
412 if ( lightMapEnabled ) textureWarning = true;
413
414 }
415
416 }
417 */
418
419 if ( material.bumpMap !== undefined ) {
420
421 var bumpMapEnabled = materialBumpMapEnabled.getValue() === true;
422
423 if ( objectHasUvs ) {
424
425 geometry.buffersNeedUpdate = true;
426 geometry.uvsNeedUpdate = true;
427
428 material.bumpMap = bumpMapEnabled ? materialBumpMap.getValue() : null;
429 material.bumpScale = materialBumpScale.getValue();
430 material.needsUpdate = true;
431
432 } else {
433
434 if ( bumpMapEnabled ) textureWarning = true;
435
436 }
437
438 }
439
440 if ( material.normalMap !== undefined ) {
441
442 var normalMapEnabled = materialNormalMapEnabled.getValue() === true;
443
444 if ( objectHasUvs ) {
445
446 geometry.buffersNeedUpdate = true;
447 geometry.uvsNeedUpdate = true;
448
449 material.normalMap = normalMapEnabled ? materialNormalMap.getValue() : null;
450 material.needsUpdate = true;
451
452 } else {
453
454 if ( normalMapEnabled ) textureWarning = true;
455
456 }
457
458 }
459
460 if ( material.specularMap !== undefined ) {
461
462 var specularMapEnabled = materialSpecularMapEnabled.getValue() === true;
463
464 if ( objectHasUvs ) {
465
466 geometry.buffersNeedUpdate = true;
467 geometry.uvsNeedUpdate = true;
468
469 material.specularMap = specularMapEnabled ? materialSpecularMap.getValue() : null;
470 material.needsUpdate = true;
471
472 } else {
473
474 if ( specularMapEnabled ) textureWarning = true;
475
476 }
477
478 }
479
480 if ( material.envMap !== undefined ) {
481
482 var envMapEnabled = materialEnvMapEnabled.getValue() === true;
483
484 if ( objectHasUvs ) {
485
486 geometry.buffersNeedUpdate = true;
487 geometry.uvsNeedUpdate = true;
488
489 material.envMap = envMapEnabled ? materialEnvMap.getValue() : null;
490 material.reflectivity = materialReflectivity.getValue();
491 material.needsUpdate = true;
492
493 } else {
494
495 if ( envMapEnabled ) textureWarning = true;
496
497 }
498
499 }
500
501 if ( material.blending !== undefined ) {
502
503 material.blending = parseInt( materialBlending.getValue() );
504
505 }
506
507 if ( material.side !== undefined ) {
508
509 material.side = parseInt( materialSide.getValue() );
510
511 }
512
513 if ( material.opacity !== undefined ) {
514
515 material.opacity = materialOpacity.getValue();
516
517 }
518
519 if ( material.transparent !== undefined ) {
520
521 material.transparent = materialTransparent.getValue();
522
523 }
524
525 if ( material.wireframe !== undefined ) {
526
527 material.wireframe = materialWireframe.getValue();
528
529 }
530
531 if ( material.wireframeLinewidth !== undefined ) {
532
533 material.wireframeLinewidth = materialWireframeLinewidth.getValue();
534
535 }
536
537 updateRows();
538
539 signals.materialChanged.dispatch( material );
540
541 }
542
543 if ( textureWarning ) {
544
545 console.warn( "Can't set texture, model doesn't have texture coordinates" );
546
547 }
548
549 };
550
551 function updateRows() {
552
553 var properties = {
554 'name': materialNameRow,
555 'color': materialColorRow,
556 'ambient': materialAmbientRow,
557 'emissive': materialEmissiveRow,
558 'specular': materialSpecularRow,
559 'shininess': materialShininessRow,
560 'vertexColors': materialVertexColorsRow,
561 'map': materialMapRow,
562 'lightMap': materialLightMapRow,
563 'bumpMap': materialBumpMapRow,
564 'normalMap': materialNormalMapRow,
565 'specularMap': materialSpecularMapRow,
566 'envMap': materialEnvMapRow,
567 'blending': materialBlendingRow,
568 'side': materialSideRow,
569 'opacity': materialOpacityRow,
570 'transparent': materialTransparentRow,
571 'wireframe': materialWireframeRow
572 };
573
574 var material = editor.selected.material;
575
576 for ( var property in properties ) {
577
578 properties[ property ].setDisplay( material[ property ] !== undefined ? '' : 'none' );
579
580 }
581
582 };
583
584 // events
585
586 signals.objectSelected.add( function ( object ) {
587
588 if ( object && object.material ) {
589
590 container.setDisplay( '' );
591
592 var material = object.material;
593
594 if ( material.uuid !== undefined ) {
595
596 materialUUID.setValue( material.uuid );
597
598 }
599
600 if ( material.name !== undefined ) {
601
602 materialName.setValue( material.name );
603
604 }
605
606 materialClass.setValue( editor.getMaterialType( material ) );
607
608 if ( material.color !== undefined ) {
609
610 materialColor.setHexValue( material.color.getHexString() );
611
612 }
613
614 if ( material.ambient !== undefined ) {
615
616 materialAmbient.setHexValue( material.ambient.getHexString() );
617
618 }
619
620 if ( material.emissive !== undefined ) {
621
622 materialEmissive.setHexValue( material.emissive.getHexString() );
623
624 }
625
626 if ( material.specular !== undefined ) {
627
628 materialSpecular.setHexValue( material.specular.getHexString() );
629
630 }
631
632 if ( material.shininess !== undefined ) {
633
634 materialShininess.setValue( material.shininess );
635
636 }
637
638 if ( material.vertexColors !== undefined ) {
639
640 materialVertexColors.setValue( material.vertexColors );
641
642 }
643
644 if ( material.map !== undefined ) {
645
646 materialMapEnabled.setValue( material.map !== null );
647 materialMap.setValue( material.map );
648
649 }
650
651 /*
652 if ( material.lightMap !== undefined ) {
653
654 materialLightMapEnabled.setValue( material.lightMap !== null );
655 materialLightMap.setValue( material.lightMap );
656
657 }
658 */
659
660 if ( material.bumpMap !== undefined ) {
661
662 materialBumpMapEnabled.setValue( material.bumpMap !== null );
663 materialBumpMap.setValue( material.bumpMap );
664 materialBumpScale.setValue( material.bumpScale );
665
666 }
667
668 if ( material.normalMap !== undefined ) {
669
670 materialNormalMapEnabled.setValue( material.normalMap !== null );
671 materialNormalMap.setValue( material.normalMap );
672
673 }
674
675 if ( material.specularMap !== undefined ) {
676
677 materialSpecularMapEnabled.setValue( material.specularMap !== null );
678 materialSpecularMap.setValue( material.specularMap );
679
680 }
681
682 if ( material.envMap !== undefined ) {
683
684 materialEnvMapEnabled.setValue( material.envMap !== null );
685 materialEnvMap.setValue( material.envMap );
686 materialReflectivity.setValue( material.reflectivity );
687
688 }
689
690 if ( material.blending !== undefined ) {
691
692 materialBlending.setValue( material.blending );
693
694 }
695
696 if ( material.side !== undefined ) {
697
698 materialSide.setValue( material.side );
699
700 }
701
702 if ( material.opacity !== undefined ) {
703
704 materialOpacity.setValue( material.opacity );
705
706 }
707
708 if ( material.transparent !== undefined ) {
709
710 materialTransparent.setValue( material.transparent );
711
712 }
713
714 if ( material.wireframe !== undefined ) {
715
716 materialWireframe.setValue( material.wireframe );
717
718 }
719
720 if ( material.wireframeLinewidth !== undefined ) {
721
722 materialWireframeLinewidth.setValue( material.wireframeLinewidth );
723
724 }
725
726 updateRows();
727
728 } else {
729
730 container.setDisplay( 'none' );
731
732 }
733
734 } );
735
736 return container;
737
738}
Note: See TracBrowser for help on using the repository browser.