Sidebar.Outliner.js 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  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. var activeCamera = null;
  20. var clearColor = new THREE.Color( 0xaaaaaa );
  21. var clearAlpha = 1;
  22. function update() {
  23. var id = parseInt( sceneGraph.getValue() );
  24. scene.traverse( function ( node ) {
  25. if ( node.id === id ) {
  26. signals.objectSelected.dispatch( node );
  27. return;
  28. }
  29. } );
  30. }
  31. function getObjectType( object ) {
  32. for ( var type in objectTypes ) {
  33. if ( object instanceof objectTypes[ type ] ) return type;
  34. }
  35. }
  36. // events
  37. signals.sceneCreated.add( function ( object ) {
  38. scene = object;
  39. } );
  40. signals.sceneChanged.add( function ( object ) {
  41. scene = object;
  42. var options = {};
  43. ( function createList( object, pad ) {
  44. for ( var key in object.children ) {
  45. var child = object.children[ key ];
  46. options[ child.id ] = pad + child.name + ' <span style="color: #aaa">- ' + getObjectType( child ) + '</span>';
  47. createList( child, pad + '&nbsp;&nbsp;&nbsp;' );
  48. }
  49. } )( scene, '' );
  50. sceneGraph.setOptions( options );
  51. } );
  52. signals.objectSelected.add( function ( object ) {
  53. sceneGraph.setValue( object !== null ? object.id : null );
  54. } );
  55. signals.clearColorChanged.add( function ( color ) {
  56. clearColor.setHex( color );
  57. } );
  58. signals.cameraChanged.add( function ( camera ) {
  59. activeCamera = camera;
  60. } );
  61. function exportScene() {
  62. var output = new THREE.SceneExporter().parse( scene, clearColor, clearAlpha, activeCamera );
  63. var blob = new Blob( [ output ], { type: 'text/plain' } );
  64. var objectURL = URL.createObjectURL( blob );
  65. window.open( objectURL, '_blank' );
  66. window.focus();
  67. }
  68. return container;
  69. }
粤ICP备19079148号