Menubar.Add.js 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276
  1. Menubar.Add = function ( editor ) {
  2. var menuConfig,
  3. optionsPanel,
  4. createOption,
  5. createDivider;
  6. var meshCount = 0;
  7. var lightCount = 0;
  8. // event handlers
  9. function onObject3DOptionClick () {
  10. var mesh = new THREE.Object3D();
  11. mesh.name = 'Object3D ' + ( ++ meshCount );
  12. editor.addObject( mesh );
  13. editor.select( mesh );
  14. }
  15. function onPlaneOptionClick () {
  16. var width = 200;
  17. var height = 200;
  18. var widthSegments = 1;
  19. var heightSegments = 1;
  20. var geometry = new THREE.PlaneGeometry( width, height, widthSegments, heightSegments );
  21. var material = new THREE.MeshPhongMaterial();
  22. var mesh = new THREE.Mesh( geometry, material );
  23. mesh.name = 'Plane ' + ( ++ meshCount );
  24. editor.addObject( mesh );
  25. editor.select( mesh );
  26. };
  27. function onBoxOptionClick () {
  28. var width = 100;
  29. var height = 100;
  30. var depth = 100;
  31. var widthSegments = 1;
  32. var heightSegments = 1;
  33. var depthSegments = 1;
  34. var geometry = new THREE.BoxGeometry( width, height, depth, widthSegments, heightSegments, depthSegments );
  35. var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial() );
  36. mesh.name = 'Box ' + ( ++ meshCount );
  37. editor.addObject( mesh );
  38. editor.select( mesh );
  39. }
  40. function onCircleOptionClick () {
  41. var radius = 20;
  42. var segments = 8;
  43. var geometry = new THREE.CircleGeometry( radius, segments );
  44. var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial() );
  45. mesh.name = 'Circle ' + ( ++ meshCount );
  46. editor.addObject( mesh );
  47. editor.select( mesh );
  48. }
  49. function onCylinderOptionClick () {
  50. var radiusTop = 20;
  51. var radiusBottom = 20;
  52. var height = 100;
  53. var radiusSegments = 8;
  54. var heightSegments = 1;
  55. var openEnded = false;
  56. var geometry = new THREE.CylinderGeometry( radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded );
  57. var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial() );
  58. mesh.name = 'Cylinder ' + ( ++ meshCount );
  59. editor.addObject( mesh );
  60. editor.select( mesh );
  61. }
  62. function onSphereOptionClick () {
  63. var radius = 75;
  64. var widthSegments = 32;
  65. var heightSegments = 16;
  66. var geometry = new THREE.SphereGeometry( radius, widthSegments, heightSegments );
  67. var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial() );
  68. mesh.name = 'Sphere ' + ( ++ meshCount );
  69. editor.addObject( mesh );
  70. editor.select( mesh );
  71. }
  72. function onIcosahedronOptionClick () {
  73. var radius = 75;
  74. var detail = 2;
  75. var geometry = new THREE.IcosahedronGeometry ( radius, detail );
  76. var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial() );
  77. mesh.name = 'Icosahedron ' + ( ++ meshCount );
  78. editor.addObject( mesh );
  79. editor.select( mesh );
  80. }
  81. function onTorusOptionClick () {
  82. var radius = 100;
  83. var tube = 40;
  84. var radialSegments = 8;
  85. var tubularSegments = 6;
  86. var arc = Math.PI * 2;
  87. var geometry = new THREE.TorusGeometry( radius, tube, radialSegments, tubularSegments, arc );
  88. var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial() );
  89. mesh.name = 'Torus ' + ( ++ meshCount );
  90. editor.addObject( mesh );
  91. editor.select( mesh );
  92. }
  93. function onTorusKnotOptionClick () {
  94. var radius = 100;
  95. var tube = 40;
  96. var radialSegments = 64;
  97. var tubularSegments = 8;
  98. var p = 2;
  99. var q = 3;
  100. var heightScale = 1;
  101. var geometry = new THREE.TorusKnotGeometry( radius, tube, radialSegments, tubularSegments, p, q, heightScale );
  102. var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial() );
  103. mesh.name = 'TorusKnot ' + ( ++ meshCount );
  104. editor.addObject( mesh );
  105. editor.select( mesh );
  106. }
  107. function onSpriteOptionClick () {
  108. var sprite = new THREE.Sprite( new THREE.SpriteMaterial() );
  109. sprite.name = 'Sprite ' + ( ++ meshCount );
  110. editor.addObject( sprite );
  111. editor.select( sprite );
  112. }
  113. function onPointLightOptionClick () {
  114. var color = 0xffffff;
  115. var intensity = 1;
  116. var distance = 0;
  117. var light = new THREE.PointLight( color, intensity, distance );
  118. light.name = 'PointLight ' + ( ++ lightCount );
  119. editor.addObject( light );
  120. editor.select( light );
  121. }
  122. function onSpotLightOptionClick () {
  123. var color = 0xffffff;
  124. var intensity = 1;
  125. var distance = 0;
  126. var angle = Math.PI * 0.1;
  127. var exponent = 10;
  128. var light = new THREE.SpotLight( color, intensity, distance, angle, exponent );
  129. light.name = 'SpotLight ' + ( ++ lightCount );
  130. light.target.name = 'SpotLight ' + ( lightCount ) + ' Target';
  131. light.position.set( 0, 1, 0 ).multiplyScalar( 200 );
  132. editor.addObject( light );
  133. editor.select( light );
  134. }
  135. function onDirectionalLightOptionClick () {
  136. var color = 0xffffff;
  137. var intensity = 1;
  138. var light = new THREE.DirectionalLight( color, intensity );
  139. light.name = 'DirectionalLight ' + ( ++ lightCount );
  140. light.target.name = 'DirectionalLight ' + ( lightCount ) + ' Target';
  141. light.position.set( 1, 1, 1 ).multiplyScalar( 200 );
  142. editor.addObject( light );
  143. editor.select( light );
  144. }
  145. function onHemisphereLightOptionClick () {
  146. var skyColor = 0x00aaff;
  147. var groundColor = 0xffaa00;
  148. var intensity = 1;
  149. var light = new THREE.HemisphereLight( skyColor, groundColor, intensity );
  150. light.name = 'HemisphereLight ' + ( ++ lightCount );
  151. light.position.set( 1, 1, 1 ).multiplyScalar( 200 );
  152. editor.addObject( light );
  153. editor.select( light );
  154. }
  155. function onAmbientLightOptionClick() {
  156. var color = 0x222222;
  157. var light = new THREE.AmbientLight( color );
  158. light.name = 'AmbientLight ' + ( ++ lightCount );
  159. editor.addObject( light );
  160. editor.select( light );
  161. }
  162. // configure menu contents
  163. createOption = UI.MenubarHelper.createOption;
  164. createDivider = UI.MenubarHelper.createDivider;
  165. menuConfig = [
  166. createOption( 'Object3D', onObject3DOptionClick ),
  167. createDivider(),
  168. createOption( 'Plane', onPlaneOptionClick ),
  169. createOption( 'Box', onBoxOptionClick ),
  170. createOption( 'Circle', onCircleOptionClick ),
  171. createOption( 'Cylinder', onCylinderOptionClick ),
  172. createOption( 'Sphere', onSphereOptionClick ),
  173. createOption( 'Icosahedron', onIcosahedronOptionClick ),
  174. createOption( 'Torus', onTorusOptionClick ),
  175. createOption( 'Torus Knot', onTorusKnotOptionClick ),
  176. createDivider(),
  177. createOption( 'Sprite', onSpriteOptionClick ),
  178. createDivider(),
  179. createOption( 'Point light', onPointLightOptionClick ),
  180. createOption( 'Spot light', onSpotLightOptionClick ),
  181. createOption( 'Directional light', onDirectionalLightOptionClick ),
  182. createOption( 'Hemisphere light', onHemisphereLightOptionClick ),
  183. createOption( 'Ambient light', onAmbientLightOptionClick )
  184. ];
  185. optionsPanel = UI.MenubarHelper.createOptionsPanel( menuConfig );
  186. return UI.MenubarHelper.createMenuContainer( 'Add', optionsPanel );
  187. }