source: other-projects/playing-in-the-street/summer-2013/trunk/Playing-in-the-Street-WPF/Content/Web/mrdoob-three.js-4862f5f/editor/js/Sidebar.Object3D.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: 12.5 KB
Line 
1Sidebar.Object3D = function ( editor ) {
2
3 var signals = editor.signals;
4
5 var container = new UI.Panel();
6 container.setDisplay( 'none' );
7
8 var objectType = new UI.Text().setTextTransform( 'uppercase' );
9 container.add( objectType );
10 container.add( new UI.Break(), new UI.Break() );
11
12 // uuid
13
14 var objectUUIDRow = new UI.Panel();
15 var objectUUID = new UI.Input().setWidth( '115px' ).setColor( '#444' ).setFontSize( '12px' ).setDisabled( true );
16 var objectUUIDRenew = new UI.Button( '⟳' ).setMarginLeft( '7px' ).onClick( function () {
17
18 objectUUID.setValue( THREE.Math.generateUUID() );
19
20 editor.selected.uuid = objectUUID.getValue();
21
22 } );
23
24 objectUUIDRow.add( new UI.Text( 'UUID' ).setWidth( '90px' ) );
25 objectUUIDRow.add( objectUUID );
26 objectUUIDRow.add( objectUUIDRenew );
27
28 container.add( objectUUIDRow );
29
30 // name
31
32 var objectNameRow = new UI.Panel();
33 var objectName = new UI.Input().setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( function () {
34
35 editor.setObjectName( editor.selected, objectName.getValue() );
36
37 } );
38
39 objectNameRow.add( new UI.Text( 'Name' ).setWidth( '90px' ) );
40 objectNameRow.add( objectName );
41
42 container.add( objectNameRow );
43
44 // parent
45
46 var objectParentRow = new UI.Panel();
47 var objectParent = new UI.Select().setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( update );
48
49 objectParentRow.add( new UI.Text( 'Parent' ).setWidth( '90px' ) );
50 objectParentRow.add( objectParent );
51
52 container.add( objectParentRow );
53
54 // position
55
56 var objectPositionRow = new UI.Panel();
57 var objectPositionX = new UI.Number().setWidth( '50px' ).onChange( update );
58 var objectPositionY = new UI.Number().setWidth( '50px' ).onChange( update );
59 var objectPositionZ = new UI.Number().setWidth( '50px' ).onChange( update );
60
61 objectPositionRow.add( new UI.Text( 'Position' ).setWidth( '90px' ) );
62 objectPositionRow.add( objectPositionX, objectPositionY, objectPositionZ );
63
64 container.add( objectPositionRow );
65
66 // rotation
67
68 var objectRotationRow = new UI.Panel();
69 var objectRotationX = new UI.Number().setWidth( '50px' ).onChange( update );
70 var objectRotationY = new UI.Number().setWidth( '50px' ).onChange( update );
71 var objectRotationZ = new UI.Number().setWidth( '50px' ).onChange( update );
72
73 objectRotationRow.add( new UI.Text( 'Rotation' ).setWidth( '90px' ) );
74 objectRotationRow.add( objectRotationX, objectRotationY, objectRotationZ );
75
76 container.add( objectRotationRow );
77
78 // scale
79
80 var objectScaleRow = new UI.Panel();
81 var objectScaleLock = new UI.Checkbox().setPosition( 'absolute' ).setLeft( '75px' );
82 var objectScaleX = new UI.Number( 1 ).setWidth( '50px' ).onChange( updateScaleX );
83 var objectScaleY = new UI.Number( 1 ).setWidth( '50px' ).onChange( updateScaleY );
84 var objectScaleZ = new UI.Number( 1 ).setWidth( '50px' ).onChange( updateScaleZ );
85
86 objectScaleRow.add( new UI.Text( 'Scale' ).setWidth( '90px' ) );
87 objectScaleRow.add( objectScaleLock );
88 objectScaleRow.add( objectScaleX, objectScaleY, objectScaleZ );
89
90 container.add( objectScaleRow );
91
92 // fov
93
94 var objectFovRow = new UI.Panel();
95 var objectFov = new UI.Number().onChange( update );
96
97 objectFovRow.add( new UI.Text( 'Fov' ).setWidth( '90px' ) );
98 objectFovRow.add( objectFov );
99
100 container.add( objectFovRow );
101
102 // near
103
104 var objectNearRow = new UI.Panel();
105 var objectNear = new UI.Number().onChange( update );
106
107 objectNearRow.add( new UI.Text( 'Near' ).setWidth( '90px' ) );
108 objectNearRow.add( objectNear );
109
110 container.add( objectNearRow );
111
112 // far
113
114 var objectFarRow = new UI.Panel();
115 var objectFar = new UI.Number().onChange( update );
116
117 objectFarRow.add( new UI.Text( 'Far' ).setWidth( '90px' ) );
118 objectFarRow.add( objectFar );
119
120 container.add( objectFarRow );
121
122 // intensity
123
124 var objectIntensityRow = new UI.Panel();
125 var objectIntensity = new UI.Number().setRange( 0, Infinity ).onChange( update );
126
127 objectIntensityRow.add( new UI.Text( 'Intensity' ).setWidth( '90px' ) );
128 objectIntensityRow.add( objectIntensity );
129
130 container.add( objectIntensityRow );
131
132 // color
133
134 var objectColorRow = new UI.Panel();
135 var objectColor = new UI.Color().onChange( update );
136
137 objectColorRow.add( new UI.Text( 'Color' ).setWidth( '90px' ) );
138 objectColorRow.add( objectColor );
139
140 container.add( objectColorRow );
141
142 // ground color
143
144 var objectGroundColorRow = new UI.Panel();
145 var objectGroundColor = new UI.Color().onChange( update );
146
147 objectGroundColorRow.add( new UI.Text( 'Ground color' ).setWidth( '90px' ) );
148 objectGroundColorRow.add( objectGroundColor );
149
150 container.add( objectGroundColorRow );
151
152 // distance
153
154 var objectDistanceRow = new UI.Panel();
155 var objectDistance = new UI.Number().setRange( 0, Infinity ).onChange( update );
156
157 objectDistanceRow.add( new UI.Text( 'Distance' ).setWidth( '90px' ) );
158 objectDistanceRow.add( objectDistance );
159
160 container.add( objectDistanceRow );
161
162 // angle
163
164 var objectAngleRow = new UI.Panel();
165 var objectAngle = new UI.Number().setPrecision( 3 ).setRange( 0, Math.PI / 2 ).onChange( update );
166
167 objectAngleRow.add( new UI.Text( 'Angle' ).setWidth( '90px' ) );
168 objectAngleRow.add( objectAngle );
169
170 container.add( objectAngleRow );
171
172 // exponent
173
174 var objectExponentRow = new UI.Panel();
175 var objectExponent = new UI.Number().setRange( 0, Infinity ).onChange( update );
176
177 objectExponentRow.add( new UI.Text( 'Exponent' ).setWidth( '90px' ) );
178 objectExponentRow.add( objectExponent );
179
180 container.add( objectExponentRow );
181
182 // visible
183
184 var objectVisibleRow = new UI.Panel();
185 var objectVisible = new UI.Checkbox().onChange( update );
186
187 objectVisibleRow.add( new UI.Text( 'Visible' ).setWidth( '90px' ) );
188 objectVisibleRow.add( objectVisible );
189
190 container.add( objectVisibleRow );
191
192 // user data
193
194 var objectUserDataRow = new UI.Panel();
195 var objectUserData = new UI.TextArea().setWidth( '150px' ).setHeight( '40px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( update );
196 objectUserData.onKeyUp( function () {
197
198 try {
199
200 JSON.parse( objectUserData.getValue() );
201 objectUserData.setBorderColor( '#ccc' );
202 objectUserData.setBackgroundColor( '' );
203
204 } catch ( error ) {
205
206 objectUserData.setBorderColor( '#f00' );
207 objectUserData.setBackgroundColor( 'rgba(255,0,0,0.25)' );
208
209 }
210
211 } );
212
213 objectUserDataRow.add( new UI.Text( 'User data' ).setWidth( '90px' ) );
214 objectUserDataRow.add( objectUserData );
215
216 container.add( objectUserDataRow );
217
218
219 //
220
221 function updateScaleX() {
222
223 var object = editor.selected;
224
225 if ( objectScaleLock.getValue() === true ) {
226
227 var scale = objectScaleX.getValue() / object.scale.x;
228
229 objectScaleY.setValue( objectScaleY.getValue() * scale );
230 objectScaleZ.setValue( objectScaleZ.getValue() * scale );
231
232 }
233
234 update();
235
236 }
237
238 function updateScaleY() {
239
240 var object = editor.selected;
241
242 if ( objectScaleLock.getValue() === true ) {
243
244 var scale = objectScaleY.getValue() / object.scale.y;
245
246 objectScaleX.setValue( objectScaleX.getValue() * scale );
247 objectScaleZ.setValue( objectScaleZ.getValue() * scale );
248
249 }
250
251 update();
252
253 }
254
255 function updateScaleZ() {
256
257 var object = editor.selected;
258
259 if ( objectScaleLock.getValue() === true ) {
260
261 var scale = objectScaleZ.getValue() / object.scale.z;
262
263 objectScaleX.setValue( objectScaleX.getValue() * scale );
264 objectScaleY.setValue( objectScaleY.getValue() * scale );
265
266 }
267
268 update();
269
270 }
271
272 function update() {
273
274 var object = editor.selected;
275
276 if ( object !== null ) {
277
278 if ( object.parent !== undefined ) {
279
280 var newParentId = parseInt( objectParent.getValue() );
281
282 if ( object.parent.id !== newParentId && object.id !== newParentId ) {
283
284 editor.parent( object, editor.scene.getObjectById( newParentId, true ) );
285
286 }
287
288 }
289
290 object.position.x = objectPositionX.getValue();
291 object.position.y = objectPositionY.getValue();
292 object.position.z = objectPositionZ.getValue();
293
294 object.rotation.x = objectRotationX.getValue();
295 object.rotation.y = objectRotationY.getValue();
296 object.rotation.z = objectRotationZ.getValue();
297
298 object.scale.x = objectScaleX.getValue();
299 object.scale.y = objectScaleY.getValue();
300 object.scale.z = objectScaleZ.getValue();
301
302 if ( object.fov !== undefined ) {
303
304 object.fov = objectFov.getValue();
305 object.updateProjectionMatrix();
306
307 }
308
309 if ( object.near !== undefined ) {
310
311 object.near = objectNear.getValue();
312
313 }
314
315 if ( object.far !== undefined ) {
316
317 object.far = objectFar.getValue();
318
319 }
320
321 if ( object.intensity !== undefined ) {
322
323 object.intensity = objectIntensity.getValue();
324
325 }
326
327 if ( object.color !== undefined ) {
328
329 object.color.setHex( objectColor.getHexValue() );
330
331 }
332
333 if ( object.groundColor !== undefined ) {
334
335 object.groundColor.setHex( objectGroundColor.getHexValue() );
336
337 }
338
339 if ( object.distance !== undefined ) {
340
341 object.distance = objectDistance.getValue();
342
343 }
344
345 if ( object.angle !== undefined ) {
346
347 object.angle = objectAngle.getValue();
348
349 }
350
351 if ( object.exponent !== undefined ) {
352
353 object.exponent = objectExponent.getValue();
354
355 }
356
357 object.visible = objectVisible.getValue();
358
359 try {
360
361 object.userData = JSON.parse( objectUserData.getValue() );
362
363 } catch ( exception ) {
364
365 console.warn( exception );
366
367 }
368
369 signals.objectChanged.dispatch( object );
370
371 }
372
373 }
374
375 function updateRows() {
376
377 var object = editor.selected;
378
379 var properties = {
380 'parent': objectParentRow,
381 'fov': objectFovRow,
382 'near': objectNearRow,
383 'far': objectFarRow,
384 'intensity': objectIntensityRow,
385 'color': objectColorRow,
386 'groundColor': objectGroundColorRow,
387 'distance' : objectDistanceRow,
388 'angle' : objectAngleRow,
389 'exponent' : objectExponentRow
390 };
391
392 for ( var property in properties ) {
393
394 properties[ property ].setDisplay( object[ property ] !== undefined ? '' : 'none' );
395
396 }
397
398 }
399
400 function updateTransformRows() {
401
402 var object = editor.selected;
403
404 if ( object instanceof THREE.Light ||
405 ( object instanceof THREE.Object3D && object.userData.targetInverse ) ) {
406
407 objectRotationRow.setDisplay( 'none' );
408 objectScaleRow.setDisplay( 'none' );
409
410 } else {
411
412 objectRotationRow.setDisplay( '' );
413 objectScaleRow.setDisplay( '' );
414
415 }
416
417 }
418
419 // events
420
421 signals.objectSelected.add( function ( object ) {
422
423 updateUI();
424
425 } );
426
427 signals.sceneGraphChanged.add( function () {
428
429 var scene = editor.scene;
430
431 var options = {};
432
433 options[ scene.id ] = 'Scene';
434
435 ( function addObjects( objects ) {
436
437 for ( var i = 0, l = objects.length; i < l; i ++ ) {
438
439 var object = objects[ i ];
440
441 options[ object.id ] = object.name;
442
443 addObjects( object.children );
444
445 }
446
447 } )( scene.children );
448
449 objectParent.setOptions( options );
450
451 } );
452
453 signals.objectChanged.add( function ( object ) {
454
455 if ( object !== editor.selected ) return;
456
457 updateUI();
458
459 } );
460
461 function updateUI() {
462
463 container.setDisplay( 'none' );
464
465 var object = editor.selected;
466
467 if ( object !== null ) {
468
469 container.setDisplay( 'block' );
470
471 objectType.setValue( editor.getObjectType( object ) );
472
473 objectUUID.setValue( object.uuid );
474 objectName.setValue( object.name );
475
476 if ( object.parent !== undefined ) {
477
478 objectParent.setValue( object.parent.id );
479
480 }
481
482 objectPositionX.setValue( object.position.x );
483 objectPositionY.setValue( object.position.y );
484 objectPositionZ.setValue( object.position.z );
485
486 objectRotationX.setValue( object.rotation.x );
487 objectRotationY.setValue( object.rotation.y );
488 objectRotationZ.setValue( object.rotation.z );
489
490 objectScaleX.setValue( object.scale.x );
491 objectScaleY.setValue( object.scale.y );
492 objectScaleZ.setValue( object.scale.z );
493
494 if ( object.fov !== undefined ) {
495
496 objectFov.setValue( object.fov );
497
498 }
499
500 if ( object.near !== undefined ) {
501
502 objectNear.setValue( object.near );
503
504 }
505
506 if ( object.far !== undefined ) {
507
508 objectFar.setValue( object.far );
509
510 }
511
512 if ( object.intensity !== undefined ) {
513
514 objectIntensity.setValue( object.intensity );
515
516 }
517
518 if ( object.color !== undefined ) {
519
520 objectColor.setHexValue( object.color.getHexString() );
521
522 }
523
524 if ( object.groundColor !== undefined ) {
525
526 objectGroundColor.setHexValue( object.groundColor.getHexString() );
527
528 }
529
530 if ( object.distance !== undefined ) {
531
532 objectDistance.setValue( object.distance );
533
534 }
535
536 if ( object.angle !== undefined ) {
537
538 objectAngle.setValue( object.angle );
539
540 }
541
542 if ( object.exponent !== undefined ) {
543
544 objectExponent.setValue( object.exponent );
545
546 }
547
548 objectVisible.setValue( object.visible );
549
550 try {
551
552 objectUserData.setValue( JSON.stringify( object.userData, null, ' ' ) );
553
554 } catch ( error ) {
555
556 console.log( error );
557
558 }
559
560 objectUserData.setBorderColor( '#ccc' );
561 objectUserData.setBackgroundColor( '' );
562
563 updateRows();
564 updateTransformRows();
565
566 }
567
568 }
569
570 return container;
571
572}
Note: See TracBrowser for help on using the repository browser.