Sidebar.Outliner = function ( signals ) { var objectTypes = { 'PerspectiveCamera': THREE.PerspectiveCamera, 'PointLight': THREE.PointLight, 'DirectionalLight': THREE.DirectionalLight, 'Mesh': THREE.Mesh, 'Object3D': THREE.Object3D }; var selected = null; var container = new UI.Panel(); container.setPadding( '10px' ); container.setBorderTop( '1px solid #ccc' ); container.add( new UI.Text().setValue( 'SCENE' ).setColor( '#666' ) ); container.add( new UI.Button( 'absolute' ).setRight( '8px' ).setTop( '5px' ).setLabel( 'Export' ).onClick( exportScene ) ); container.add( new UI.Break(), new UI.Break() ); //var sceneGraph = new UI.Select().setMultiple( true ).setWidth( '100%' ).setHeight('140px').setColor( '#444' ).setFontSize( '12px' ).onChange( update ); var sceneGraph = new UI.FancySelect().setWidth( '100%' ).setHeight('140px').setColor( '#444' ).setFontSize( '12px' ).onChange( update ); container.add( sceneGraph ); container.add( new UI.Break() ); var scene = null; function update() { var id = parseInt( sceneGraph.getValue() ); scene.traverse( function ( node ) { if ( node.id === id ) { signals.objectSelected.dispatch( node ); return; } } ); } function getObjectType( object ) { for ( var type in objectTypes ) { if ( object instanceof objectTypes[ type ] ) return type; } } // events signals.sceneCreated.add( function ( object ) { scene = object; } ); signals.sceneChanged.add( function ( object ) { scene = object; var options = {}; ( function createList( object, pad ) { for ( var key in object.children ) { var child = object.children[ key ]; options[ child.id ] = '