Sidebar.Scene = function ( editor ) {
var signals = editor.signals;
var selected = null;
var container = new UI.Panel();
container.setPadding( '10px' );
container.setBorderTop( '1px solid #ccc' );
container.add( new UI.Text( 'SCENE' ).setColor( '#666' ) );
container.add( new UI.Break(), new UI.Break() );
var outliner = new UI.FancySelect().setWidth( '100%' ).setHeight('140px').setColor( '#444' ).setFontSize( '12px' )
outliner.onChange( function () {
editor.selectById( parseInt( outliner.getValue() ) );
} );
container.add( outliner );
container.add( new UI.Break() );
// fog
var updateFogParameters = function () {
var near = fogNear.getValue();
var far = fogFar.getValue();
var density = fogDensity.getValue();
signals.fogParametersChanged.dispatch( near, far, density );
};
var fogTypeRow = new UI.Panel();
var fogType = new UI.Select().setOptions( {
'None': 'None',
'Fog': 'Linear',
'FogExp2': 'Exponential'
} ).setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' )
fogType.onChange( function () {
var type = fogType.getValue();
signals.fogTypeChanged.dispatch( type );
refreshFogUI();
} );
fogTypeRow.add( new UI.Text( 'Fog' ).setWidth( '90px' ).setColor( '#666' ) );
fogTypeRow.add( fogType );
container.add( fogTypeRow );
// fog color
var fogColorRow = new UI.Panel();
fogColorRow.setDisplay( 'none' );
var fogColor = new UI.Color().setValue( '#aaaaaa' )
fogColor.onChange( function () {
signals.fogColorChanged.dispatch( fogColor.getHexValue() );
} );
fogColorRow.add( new UI.Text( 'Fog color' ).setWidth( '90px' ).setColor( '#666' ) );
fogColorRow.add( fogColor );
container.add( fogColorRow );
// fog near
var fogNearRow = new UI.Panel();
fogNearRow.setDisplay( 'none' );
var fogNear = new UI.Number( 1 ).setWidth( '60px' ).setRange( 0, Infinity ).onChange( updateFogParameters );
fogNearRow.add( new UI.Text( 'Fog near' ).setWidth( '90px' ).setColor( '#666' ) );
fogNearRow.add( fogNear );
container.add( fogNearRow );
var fogFarRow = new UI.Panel();
fogFarRow.setDisplay( 'none' );
// fog far
var fogFar = new UI.Number( 5000 ).setWidth( '60px' ).setRange( 0, Infinity ).onChange( updateFogParameters );
fogFarRow.add( new UI.Text( 'Fog far' ).setWidth( '90px' ).setColor( '#666' ) );
fogFarRow.add( fogFar );
container.add( fogFarRow );
// fog density
var fogDensityRow = new UI.Panel();
fogDensityRow.setDisplay( 'none' );
var fogDensity = new UI.Number( 0.00025 ).setWidth( '60px' ).setRange( 0, 0.1 ).setPrecision( 5 ).onChange( updateFogParameters );
fogDensityRow.add( new UI.Text( 'Fog density' ).setWidth( '90px' ).setColor( '#666' ) );
fogDensityRow.add( fogDensity );
container.add( fogDensityRow );
//
var getObjectType = function ( object ) {
var objects = {
'Scene': THREE.Scene,
'PerspectiveCamera': THREE.PerspectiveCamera,
'AmbientLight': THREE.AmbientLight,
'DirectionalLight': THREE.DirectionalLight,
'HemisphereLight': THREE.HemisphereLight,
'PointLight': THREE.PointLight,
'SpotLight': THREE.SpotLight,
'Mesh': THREE.Mesh,
'Object3D': THREE.Object3D
};
for ( var type in objects ) {
if ( object instanceof objects[ type ] ) return type;
}
}
var refreshFogUI = function () {
var type = fogType.getValue();
fogColorRow.setDisplay( type === 'None' ? 'none' : '' );
fogNearRow.setDisplay( type === 'Fog' ? '' : 'none' );
fogFarRow.setDisplay( type === 'Fog' ? '' : 'none' );
fogDensityRow.setDisplay( type === 'FogExp2' ? '' : 'none' );
};
// events
signals.sceneGraphChanged.add( function () {
var scene = editor.scene;
var options = {};
options[ scene.id ] = scene.name + ' - ' + getObjectType( scene ) + '';
( function addObjects( objects, pad ) {
for ( var i = 0, l = objects.length; i < l; i ++ ) {
var object = objects[ i ];
options[ object.id ] = pad + object.name + ' - ' + getObjectType( object ) + '';
addObjects( object.children, pad + ' ' );
}
} )( scene.children, ' ' );
outliner.setOptions( options );
outliner.setValue( selected );
if ( scene.fog ) {
fogColor.setHexValue( scene.fog.color.getHex() );
if ( scene.fog instanceof THREE.Fog ) {
fogType.setValue( "Fog" );
fogNear.setValue( scene.fog.near );
fogFar.setValue( scene.fog.far );
} else if ( scene.fog instanceof THREE.FogExp2 ) {
fogType.setValue( "FogExp2" );
fogDensity.setValue( scene.fog.density );
}
} else {
fogType.setValue( "None" );
}
refreshFogUI();
} );
signals.objectSelected.add( function ( object ) {
selected = object !== null ? object.id : null;
outliner.setValue( selected );
} );
return container;
}