1 | Sidebar.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 | }
|
---|