Menubar.Add.js 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207
  1. Menubar.Add = function ( signals ) {
  2. var container = new UI.Panel();
  3. container.setClass( 'menu' );
  4. var title = new UI.Panel();
  5. title.setTextContent( 'Add' ).setColor( '#666' );
  6. title.setMargin( '0px' );
  7. title.setPadding( '8px' );
  8. container.add( title );
  9. //
  10. var options = new UI.Panel();
  11. options.setClass( 'options' );
  12. container.add( options );
  13. // add sphere
  14. var option = new UI.Panel();
  15. option.setClass( 'option' );
  16. option.setTextContent( 'Sphere' );
  17. option.onClick( function () {
  18. var radius = 75;
  19. var widthSegments = 32;
  20. var heightSegments = 16;
  21. var geometry = new THREE.SphereGeometry( radius, widthSegments, heightSegments );
  22. var mesh = new THREE.Mesh( geometry, createDummyMaterial( geometry ) );
  23. mesh.name = 'Sphere ' + mesh.id;
  24. signals.objectAdded.dispatch( mesh );
  25. } );
  26. options.add( option );
  27. // add cube
  28. var option = new UI.Panel();
  29. option.setClass( 'option' );
  30. option.setTextContent( 'Cube' );
  31. option.onClick( function () {
  32. var width = 100;
  33. var height = 100;
  34. var depth = 100;
  35. var widthSegments = 1;
  36. var heightSegments = 1;
  37. var depthSegments = 1;
  38. var geometry = new THREE.CubeGeometry( width, height, depth, widthSegments, heightSegments, depthSegments );
  39. var mesh = new THREE.Mesh( geometry, createDummyMaterial( geometry ) );
  40. mesh.name = 'Cube ' + mesh.id;
  41. signals.objectAdded.dispatch( mesh );
  42. } );
  43. options.add( option );
  44. // add plane
  45. var option = new UI.Panel();
  46. option.setClass( 'option' );
  47. option.setTextContent( 'Plane' );
  48. option.onClick( function () {
  49. var width = 200;
  50. var height = 200;
  51. var widthSegments = 1;
  52. var heightSegments = 1;
  53. var geometry = new THREE.PlaneGeometry( width, height, widthSegments, heightSegments );
  54. var mesh = new THREE.Mesh( geometry, createDummyMaterial( geometry ) );
  55. mesh.name = 'Plane ' + mesh.id;
  56. mesh.rotation.x = - Math.PI/2;
  57. signals.objectAdded.dispatch( mesh );
  58. } );
  59. options.add( option );
  60. // divider
  61. options.add( new UI.HorizontalRule() );
  62. // add directional light
  63. var option = new UI.Panel();
  64. option.setClass( 'option' );
  65. option.setTextContent( 'Directional light' );
  66. option.onClick( function () {
  67. var color = 0xffffff;
  68. var intensity = 1;
  69. var light = new THREE.DirectionalLight( color, intensity );
  70. light.name = 'Light ' + light.id;
  71. light.target.name = 'Light ' + light.id + ' target';
  72. light.target.properties.targetInverse = light;
  73. light.position.set( 1, 1, 1 ).multiplyScalar( 200 );
  74. signals.objectAdded.dispatch( light );
  75. } );
  76. options.add( option );
  77. // add point light
  78. var option = new UI.Panel();
  79. option.setClass( 'option' );
  80. option.setTextContent( 'Point light' );
  81. option.onClick( function () {
  82. var color = 0xffffff;
  83. var intensity = 1;
  84. var distance = 0;
  85. var light = new THREE.PointLight( color, intensity, distance );
  86. light.name = 'Light ' + light.id;
  87. signals.objectAdded.dispatch( light );
  88. } );
  89. options.add( option );
  90. // add spot light
  91. var option = new UI.Panel();
  92. option.setClass( 'option' );
  93. option.setTextContent( 'Spot light' );
  94. option.onClick( function () {
  95. var color = 0xffffff;
  96. var intensity = 1;
  97. var distance = 0;
  98. var angle = Math.PI * 0.1;
  99. var exponent = 10;
  100. var light = new THREE.SpotLight( color, intensity, distance, angle, exponent );
  101. light.name = 'Light ' + light.id;
  102. light.target.name = 'Light ' + light.id + ' target';
  103. light.target.properties.targetInverse = light;
  104. light.position.set( 0, 1, 0 ).multiplyScalar( 200 );
  105. signals.objectAdded.dispatch( light );
  106. } );
  107. options.add( option );
  108. // add hemisphere light
  109. var option = new UI.Panel();
  110. option.setClass( 'option' );
  111. option.setTextContent( 'Hemisphere light' );
  112. option.onClick( function () {
  113. var skyColor = 0x00aaff;
  114. var groundColor = 0xffaa00;
  115. var intensity = 1;
  116. var light = new THREE.HemisphereLight( skyColor, groundColor, intensity );
  117. light.name = 'Light ' + light.id;
  118. light.position.set( 1, 1, 1 ).multiplyScalar( 200 );
  119. signals.objectAdded.dispatch( light );
  120. } );
  121. options.add( option );
  122. // add ambient light
  123. var option = new UI.Panel();
  124. option.setClass( 'option' );
  125. option.setTextContent( 'Ambient light' );
  126. option.onClick( function () {
  127. var color = 0x222222;
  128. var light = new THREE.AmbientLight( color );
  129. light.name = 'Light ' + light.id;
  130. signals.objectAdded.dispatch( light );
  131. } );
  132. options.add( option );
  133. //
  134. function createDummyMaterial() {
  135. return new THREE.MeshPhongMaterial();
  136. };
  137. return container;
  138. }