webglFramework/Thirdparty/three.js-master/editor/js/Sidebar.Scene.js

   1 /**
   2  * @author mrdoob / http://mrdoob.com/
   3  */
   4
   5 Sidebar.Scene = function ( editor ) {
   6
   7         var signals = editor.signals;
   8
   9         var container = new UI.Panel();
  10         container.setBorderTop( '0' );
  11         container.setPaddingTop( '20px' );
  12
  13         // outliner
  14
  15         function buildOption( object, draggable ) {
  16
  17                 var option = document.createElement( 'div' );
  18                 option.draggable = draggable;
  19                 option.innerHTML = buildHTML( object );
  20                 option.value = object.id;
  21
  22                 return option;
  23
  24         }
  25
  26         function getMaterialName( material ) {
  27
  28                 if ( Array.isArray( material ) ) {
  29
  30                         var array = [];
  31
  32                         for ( var i = 0; i < material.length; i ++ ) {
  33
  34                                 array.push( material[ i ].name );
  35
  36                         }
  37
  38                         return array.join( ',' );
  39
  40                 }
  41
  42                 return material.name;
  43
  44         }
  45
  46         function buildHTML( object ) {
  47
  48                 var html = '<span class="type ' + object.type + '"></span> ' + object.name;
  49
  50                 if ( object instanceof THREE.Mesh ) {
  51
  52                         var geometry = object.geometry;
  53                         var material = object.material;
  54
  55                         html += ' <span class="type ' + geometry.type + '"></span> ' + geometry.name;
  56                         html += ' <span class="type ' + material.type + '"></span> ' + getMaterialName( material );
  57
  58                 }
  59
  60                 html += getScript( object.uuid );
  61
  62                 return html;
  63
  64         }
  65
  66         function getScript( uuid ) {
  67
  68                 if ( editor.scripts[ uuid ] !== undefined ) {
  69
  70                         return ' <span class="type Script"></span>';
  71
  72                 }
  73
  74                 return '';
  75
  76         }
  77
  78         var ignoreObjectSelectedSignal = false;
  79
  80         var outliner = new UI.Outliner( editor );
  81         outliner.setId( 'outliner' );
  82         outliner.onChange( function () {
  83
  84                 ignoreObjectSelectedSignal = true;
  85
  86                 editor.selectById( parseInt( outliner.getValue() ) );
  87
  88                 ignoreObjectSelectedSignal = false;
  89
  90         } );
  91         outliner.onDblClick( function () {
  92
  93                 editor.focusById( parseInt( outliner.getValue() ) );
  94
  95         } );
  96         container.add( outliner );
  97         container.add( new UI.Break() );
  98
  99         // background
 100
 101         function onBackgroundChanged() {
 102
 103                 signals.sceneBackgroundChanged.dispatch( backgroundColor.getHexValue() );
 104
 105         }
 106
 107         var backgroundRow = new UI.Row();
 108
 109         var backgroundColor = new UI.Color().setValue( '#aaaaaa' ).onChange( onBackgroundChanged );
 110
 111         backgroundRow.add( new UI.Text( 'Background' ).setWidth( '90px' ) );
 112         backgroundRow.add( backgroundColor );
 113
 114         container.add( backgroundRow );
 115
 116         // fog
 117
 118         function onFogChanged() {
 119
 120                 signals.sceneFogChanged.dispatch(
 121                         fogType.getValue(),
 122                         fogColor.getHexValue(),
 123                         fogNear.getValue(),
 124                         fogFar.getValue(),
 125                         fogDensity.getValue()
 126                 );
 127
 128         }
 129
 130         var fogTypeRow = new UI.Row();
 131         var fogType = new UI.Select().setOptions( {
 132
 133                 'None': 'None',
 134                 'Fog': 'Linear',
 135                 'FogExp2': 'Exponential'
 136
 137         } ).setWidth( '150px' );
 138         fogType.onChange( function () {
 139
 140                 onFogChanged();
 141                 refreshFogUI();
 142
 143         } );
 144
 145         fogTypeRow.add( new UI.Text( 'Fog' ).setWidth( '90px' ) );
 146         fogTypeRow.add( fogType );
 147
 148         container.add( fogTypeRow );
 149
 150         // fog color
 151
 152         var fogPropertiesRow = new UI.Row();
 153         fogPropertiesRow.setDisplay( 'none' );
 154         fogPropertiesRow.setMarginLeft( '90px' );
 155         container.add( fogPropertiesRow );
 156
 157         var fogColor = new UI.Color().setValue( '#aaaaaa' );
 158         fogColor.onChange( onFogChanged );
 159         fogPropertiesRow.add( fogColor );
 160
 161         // fog near
 162
 163         var fogNear = new UI.Number( 0.1 ).setWidth( '40px' ).setRange( 0, Infinity ).onChange( onFogChanged );
 164         fogPropertiesRow.add( fogNear );
 165
 166         // fog far
 167
 168         var fogFar = new UI.Number( 50 ).setWidth( '40px' ).setRange( 0, Infinity ).onChange( onFogChanged );
 169         fogPropertiesRow.add( fogFar );
 170
 171         // fog density
 172
 173         var fogDensity = new UI.Number( 0.05 ).setWidth( '40px' ).setRange( 0, 0.1 ).setPrecision( 3 ).onChange( onFogChanged );
 174         fogPropertiesRow.add( fogDensity );
 175
 176         //
 177
 178         function refreshUI() {
 179
 180                 var camera = editor.camera;
 181                 var scene = editor.scene;
 182
 183                 var options = [];
 184
 185                 options.push( buildOption( camera, false ) );
 186                 options.push( buildOption( scene, false ) );
 187
 188                 ( function addObjects( objects, pad ) {
 189
 190                         for ( var i = 0, l = objects.length; i < l; i ++ ) {
 191
 192                                 var object = objects[ i ];
 193
 194                                 var option = buildOption( object, true );
 195                                 option.style.paddingLeft = ( pad * 10 ) + 'px';
 196                                 options.push( option );
 197
 198                                 addObjects( object.children, pad + 1 );
 199
 200                         }
 201
 202                 } )( scene.children, 1 );
 203
 204                 outliner.setOptions( options );
 205
 206                 if ( editor.selected !== null ) {
 207
 208                         outliner.setValue( editor.selected.id );
 209
 210                 }
 211
 212                 if ( scene.background ) {
 213
 214                         backgroundColor.setHexValue( scene.background.getHex() );
 215
 216                 }
 217
 218                 if ( scene.fog ) {
 219
 220                         fogColor.setHexValue( scene.fog.color.getHex() );
 221
 222                         if ( scene.fog instanceof THREE.Fog ) {
 223
 224                                 fogType.setValue( "Fog" );
 225                                 fogNear.setValue( scene.fog.near );
 226                                 fogFar.setValue( scene.fog.far );
 227
 228                         } else if ( scene.fog instanceof THREE.FogExp2 ) {
 229
 230                                 fogType.setValue( "FogExp2" );
 231                                 fogDensity.setValue( scene.fog.density );
 232
 233                         }
 234
 235                 } else {
 236
 237                         fogType.setValue( "None" );
 238
 239                 }
 240
 241                 refreshFogUI();
 242
 243         }
 244
 245         function refreshFogUI() {
 246
 247                 var type = fogType.getValue();
 248
 249                 fogPropertiesRow.setDisplay( type === 'None' ? 'none' : '' );
 250                 fogNear.setDisplay( type === 'Fog' ? '' : 'none' );
 251                 fogFar.setDisplay( type === 'Fog' ? '' : 'none' );
 252                 fogDensity.setDisplay( type === 'FogExp2' ? '' : 'none' );
 253
 254         }
 255
 256         refreshUI();
 257
 258         // events
 259
 260         signals.editorCleared.add( refreshUI );
 261
 262         signals.sceneGraphChanged.add( refreshUI );
 263
 264         signals.objectChanged.add( function ( object ) {
 265
 266                 var options = outliner.options;
 267
 268                 for ( var i = 0; i < options.length; i ++ ) {
 269
 270                         var option = options[ i ];
 271
 272                         if ( option.value === object.id ) {
 273
 274                                 option.innerHTML = buildHTML( object );
 275                                 return;
 276
 277                         }
 278
 279                 }
 280
 281         } );
 282
 283         signals.objectSelected.add( function ( object ) {
 284
 285                 if ( ignoreObjectSelectedSignal === true ) return;
 286
 287                 outliner.setValue( object !== null ? object.id : null );
 288
 289         } );
 290
 291         return container;
 292
 293 };