Menubar.Add.js 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295
  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 plane
  14. var option = new UI.Panel();
  15. option.setClass( 'option' );
  16. option.setTextContent( 'Plane' );
  17. option.onClick( function () {
  18. var width = 200;
  19. var height = 200;
  20. var widthSegments = 1;
  21. var heightSegments = 1;
  22. var geometry = new THREE.PlaneGeometry( width, height, widthSegments, heightSegments );
  23. var mesh = new THREE.Mesh( geometry, createDummyMaterial( geometry ) );
  24. mesh.name = 'Plane ' + mesh.id;
  25. mesh.rotation.x = - Math.PI/2;
  26. signals.objectAdded.dispatch( mesh );
  27. } );
  28. options.add( option );
  29. // add cube
  30. var option = new UI.Panel();
  31. option.setClass( 'option' );
  32. option.setTextContent( 'Cube' );
  33. option.onClick( function () {
  34. var width = 100;
  35. var height = 100;
  36. var depth = 100;
  37. var widthSegments = 1;
  38. var heightSegments = 1;
  39. var depthSegments = 1;
  40. var geometry = new THREE.CubeGeometry( width, height, depth, widthSegments, heightSegments, depthSegments );
  41. var mesh = new THREE.Mesh( geometry, createDummyMaterial( geometry ) );
  42. mesh.name = 'Cube ' + mesh.id;
  43. signals.objectAdded.dispatch( mesh );
  44. } );
  45. options.add( option );
  46. // add cylinder
  47. var option = new UI.Panel();
  48. option.setClass( 'option' );
  49. option.setTextContent( 'Cylinder' );
  50. option.onClick( function () {
  51. var radiusTop = 20;
  52. var radiusBottom = 20;
  53. var height = 100;
  54. var radiusSegments = 8;
  55. var heightSegments = 1;
  56. var openEnded = false;
  57. var geometry = new THREE.CylinderGeometry( radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded );
  58. var mesh = new THREE.Mesh( geometry, createDummyMaterial( geometry ) );
  59. mesh.name = 'Cylinder ' + mesh.id;
  60. signals.objectAdded.dispatch( mesh );
  61. } );
  62. options.add( option );
  63. // add sphere
  64. var option = new UI.Panel();
  65. option.setClass( 'option' );
  66. option.setTextContent( 'Sphere' );
  67. option.onClick( function () {
  68. var radius = 75;
  69. var widthSegments = 32;
  70. var heightSegments = 16;
  71. var geometry = new THREE.SphereGeometry( radius, widthSegments, heightSegments );
  72. var mesh = new THREE.Mesh( geometry, createDummyMaterial( geometry ) );
  73. mesh.name = 'Sphere ' + mesh.id;
  74. signals.objectAdded.dispatch( mesh );
  75. } );
  76. options.add( option );
  77. // add icosahedron
  78. var option = new UI.Panel();
  79. option.setClass( 'option' );
  80. option.setTextContent( 'Icosahedron' );
  81. option.onClick( function () {
  82. var radius = 75;
  83. var detail = 2;
  84. var geometry = new THREE.IcosahedronGeometry ( radius, detail );
  85. var mesh = new THREE.Mesh( geometry, createDummyMaterial( geometry ) );
  86. mesh.name = 'Icosahedron ' + mesh.id;
  87. signals.objectAdded.dispatch( mesh );
  88. } );
  89. options.add( option );
  90. // add torus
  91. var option = new UI.Panel();
  92. option.setClass( 'option' );
  93. option.setTextContent( 'Torus' );
  94. option.onClick( function () {
  95. var radius = 100;
  96. var tube = 40;
  97. var radialSegments = 8;
  98. var tubularSegments = 6;
  99. var arc = Math.PI * 2;
  100. var geometry = new THREE.TorusGeometry( radius, tube, radialSegments, tubularSegments, arc );
  101. var mesh = new THREE.Mesh( geometry, createDummyMaterial( geometry ) );
  102. mesh.name = 'Torus ' + mesh.id;
  103. signals.objectAdded.dispatch( mesh );
  104. } );
  105. options.add( option );
  106. // add torus
  107. var option = new UI.Panel();
  108. option.setClass( 'option' );
  109. option.setTextContent( 'TorusKnot' );
  110. option.onClick( function () {
  111. var radius = 100;
  112. var tube = 40;
  113. var radialSegments = 64;
  114. var tubularSegments = 8;
  115. var p = 2;
  116. var q = 3;
  117. var heightScale = 1;
  118. var geometry = new THREE.TorusKnotGeometry( radius, tube, radialSegments, tubularSegments, p, q, heightScale );
  119. var mesh = new THREE.Mesh( geometry, createDummyMaterial( geometry ) );
  120. mesh.name = 'TorusKnot ' + mesh.id;
  121. signals.objectAdded.dispatch( mesh );
  122. } );
  123. options.add( option );
  124. // divider
  125. options.add( new UI.HorizontalRule() );
  126. // add point light
  127. var option = new UI.Panel();
  128. option.setClass( 'option' );
  129. option.setTextContent( 'Point light' );
  130. option.onClick( function () {
  131. var color = 0xffffff;
  132. var intensity = 1;
  133. var distance = 0;
  134. var light = new THREE.PointLight( color, intensity, distance );
  135. light.name = 'Light ' + light.id;
  136. signals.objectAdded.dispatch( light );
  137. } );
  138. options.add( option );
  139. // add spot light
  140. var option = new UI.Panel();
  141. option.setClass( 'option' );
  142. option.setTextContent( 'Spot light' );
  143. option.onClick( function () {
  144. var color = 0xffffff;
  145. var intensity = 1;
  146. var distance = 0;
  147. var angle = Math.PI * 0.1;
  148. var exponent = 10;
  149. var light = new THREE.SpotLight( color, intensity, distance, angle, exponent );
  150. light.name = 'Light ' + light.id;
  151. light.target.name = 'Light ' + light.id + ' target';
  152. light.target.properties.targetInverse = light;
  153. light.position.set( 0, 1, 0 ).multiplyScalar( 200 );
  154. signals.objectAdded.dispatch( light );
  155. } );
  156. options.add( option );
  157. // add directional light
  158. var option = new UI.Panel();
  159. option.setClass( 'option' );
  160. option.setTextContent( 'Directional light' );
  161. option.onClick( function () {
  162. var color = 0xffffff;
  163. var intensity = 1;
  164. var light = new THREE.DirectionalLight( color, intensity );
  165. light.name = 'Light ' + light.id;
  166. light.target.name = 'Light ' + light.id + ' target';
  167. light.target.properties.targetInverse = light;
  168. light.position.set( 1, 1, 1 ).multiplyScalar( 200 );
  169. signals.objectAdded.dispatch( light );
  170. } );
  171. options.add( option );
  172. // add hemisphere light
  173. var option = new UI.Panel();
  174. option.setClass( 'option' );
  175. option.setTextContent( 'Hemisphere light' );
  176. option.onClick( function () {
  177. var skyColor = 0x00aaff;
  178. var groundColor = 0xffaa00;
  179. var intensity = 1;
  180. var light = new THREE.HemisphereLight( skyColor, groundColor, intensity );
  181. light.name = 'Light ' + light.id;
  182. light.position.set( 1, 1, 1 ).multiplyScalar( 200 );
  183. signals.objectAdded.dispatch( light );
  184. } );
  185. options.add( option );
  186. // add ambient light
  187. var option = new UI.Panel();
  188. option.setClass( 'option' );
  189. option.setTextContent( 'Ambient light' );
  190. option.onClick( function () {
  191. var color = 0x222222;
  192. var light = new THREE.AmbientLight( color );
  193. light.name = 'Light ' + light.id;
  194. signals.objectAdded.dispatch( light );
  195. } );
  196. options.add( option );
  197. //
  198. function createDummyMaterial() {
  199. return new THREE.MeshPhongMaterial();
  200. };
  201. return container;
  202. }