Sidebar.Outliner.js 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. Sidebar.Outliner = function ( signals ) {
  2. var objectTypes = {
  3. 'PerspectiveCamera': THREE.PerspectiveCamera,
  4. 'PointLight': THREE.PointLight,
  5. 'DirectionalLight': THREE.DirectionalLight,
  6. 'Mesh': THREE.Mesh,
  7. 'Object3D': THREE.Object3D
  8. };
  9. var selected = null;
  10. var container = new UI.Panel();
  11. container.setPadding( '10px' );
  12. container.setBorderTop( '1px solid #ccc' );
  13. container.add( new UI.Text().setValue( 'SCENE' ).setColor( '#666' ) );
  14. container.add( new UI.Button( 'absolute' ).setRight( '8px' ).setTop( '5px' ).setLabel( 'Export' ).onClick( exportScene ) );
  15. container.add( new UI.Break(), new UI.Break() );
  16. var sceneGraph = new UI.FancySelect().setWidth( '100%' ).setHeight('140px').setColor( '#444' ).setFontSize( '12px' ).onChange( update );
  17. container.add( sceneGraph );
  18. var scene = null;
  19. function update() {
  20. var id = parseInt( sceneGraph.getValue() );
  21. scene.traverse( function ( node ) {
  22. if ( node.id === id ) {
  23. signals.objectSelected.dispatch( node );
  24. return;
  25. }
  26. } );
  27. }
  28. function getObjectType( object ) {
  29. for ( var type in objectTypes ) {
  30. if ( object instanceof objectTypes[ type ] ) return type;
  31. }
  32. }
  33. // events
  34. signals.sceneCreated.add( function ( object ) {
  35. scene = object;
  36. } );
  37. signals.sceneChanged.add( function ( object ) {
  38. scene = object;
  39. var options = {};
  40. ( function createList( object, pad ) {
  41. for ( var key in object.children ) {
  42. var child = object.children[ key ];
  43. options[ child.id ] = pad + child.name + ' <span style="color: #aaa">- ' + getObjectType( child ) + '</span>';
  44. createList( child, pad + '&nbsp;&nbsp;&nbsp;' );
  45. }
  46. } )( scene, '' );
  47. sceneGraph.setOptions( options );
  48. } );
  49. signals.objectSelected.add( function ( object ) {
  50. sceneGraph.setValue( object !== null ? object.id : null );
  51. } );
  52. signals.clearColorChanged.add( function ( color ) {
  53. clearColor.setHex( color );
  54. } );
  55. function exportScene() {
  56. signals.exportScene.dispatch( scene );
  57. }
  58. return container;
  59. }