Menubar.Add.js 6.8 KB

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