Menubar.Add.js 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387
  1. /**
  2. * @author mrdoob / http://mrdoob.com/
  3. */
  4. Menubar.Add = function ( editor ) {
  5. var container = new UI.Panel();
  6. container.setClass( 'menu' );
  7. var title = new UI.Panel();
  8. title.setClass( 'title' );
  9. title.setTextContent( 'Add' );
  10. container.add( title );
  11. var options = new UI.Panel();
  12. options.setClass( 'options' );
  13. container.add( options );
  14. //
  15. var meshCount = 0;
  16. var lightCount = 0;
  17. var cameraCount = 0;
  18. editor.signals.editorCleared.add( function () {
  19. meshCount = 0;
  20. lightCount = 0;
  21. cameraCount = 0;
  22. } );
  23. // Group
  24. var option = new UI.Panel();
  25. option.setClass( 'option' );
  26. option.setTextContent( 'Group' );
  27. option.onClick( function () {
  28. var mesh = new THREE.Group();
  29. mesh.name = 'Group ' + ( ++ meshCount );
  30. editor.execute( new AddObjectCommand( mesh ) );
  31. } );
  32. options.add( option );
  33. //
  34. options.add( new UI.HorizontalRule() );
  35. // Plane
  36. var option = new UI.Panel();
  37. option.setClass( 'option' );
  38. option.setTextContent( 'Plane' );
  39. option.onClick( function () {
  40. var geometry = new THREE.PlaneGeometry( 2, 2 );
  41. var material = new THREE.MeshStandardMaterial();
  42. var mesh = new THREE.Mesh( geometry, material );
  43. mesh.name = 'Plane ' + ( ++ meshCount );
  44. editor.execute( new AddObjectCommand( mesh ) );
  45. } );
  46. options.add( option );
  47. // Box
  48. var option = new UI.Panel();
  49. option.setClass( 'option' );
  50. option.setTextContent( 'Box' );
  51. option.onClick( function () {
  52. var geometry = new THREE.BoxGeometry( 1, 1, 1 );
  53. var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
  54. mesh.name = 'Box ' + ( ++ meshCount );
  55. editor.execute( new AddObjectCommand( mesh ) );
  56. } );
  57. options.add( option );
  58. // Circle
  59. var option = new UI.Panel();
  60. option.setClass( 'option' );
  61. option.setTextContent( 'Circle' );
  62. option.onClick( function () {
  63. var radius = 1;
  64. var segments = 32;
  65. var geometry = new THREE.CircleGeometry( radius, segments );
  66. var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
  67. mesh.name = 'Circle ' + ( ++ meshCount );
  68. editor.execute( new AddObjectCommand( mesh ) );
  69. } );
  70. options.add( option );
  71. // Cylinder
  72. var option = new UI.Panel();
  73. option.setClass( 'option' );
  74. option.setTextContent( 'Cylinder' );
  75. option.onClick( function () {
  76. var radiusTop = 1;
  77. var radiusBottom = 1;
  78. var height = 2;
  79. var radiusSegments = 32;
  80. var heightSegments = 1;
  81. var openEnded = false;
  82. var geometry = new THREE.CylinderGeometry( radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded );
  83. var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
  84. mesh.name = 'Cylinder ' + ( ++ meshCount );
  85. editor.execute( new AddObjectCommand( mesh ) );
  86. } );
  87. options.add( option );
  88. // Sphere
  89. var option = new UI.Panel();
  90. option.setClass( 'option' );
  91. option.setTextContent( 'Sphere' );
  92. option.onClick( function () {
  93. var radius = 1;
  94. var widthSegments = 32;
  95. var heightSegments = 16;
  96. var phiStart = 0;
  97. var phiLength = Math.PI * 2;
  98. var thetaStart = 0;
  99. var thetaLength = Math.PI;
  100. var geometry = new THREE.SphereGeometry( radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength );
  101. var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
  102. mesh.name = 'Sphere ' + ( ++ meshCount );
  103. editor.execute( new AddObjectCommand( mesh ) );
  104. } );
  105. options.add( option );
  106. // Icosahedron
  107. var option = new UI.Panel();
  108. option.setClass( 'option' );
  109. option.setTextContent( 'Icosahedron' );
  110. option.onClick( function () {
  111. var radius = 1;
  112. var detail = 2;
  113. var geometry = new THREE.IcosahedronGeometry( radius, detail );
  114. var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
  115. mesh.name = 'Icosahedron ' + ( ++ meshCount );
  116. editor.execute( new AddObjectCommand( mesh ) );
  117. } );
  118. options.add( option );
  119. // Torus
  120. var option = new UI.Panel();
  121. option.setClass( 'option' );
  122. option.setTextContent( 'Torus' );
  123. option.onClick( function () {
  124. var radius = 2;
  125. var tube = 1;
  126. var radialSegments = 32;
  127. var tubularSegments = 12;
  128. var arc = Math.PI * 2;
  129. var geometry = new THREE.TorusGeometry( radius, tube, radialSegments, tubularSegments, arc );
  130. var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
  131. mesh.name = 'Torus ' + ( ++ meshCount );
  132. editor.execute( new AddObjectCommand( mesh ) );
  133. } );
  134. options.add( option );
  135. // TorusKnot
  136. var option = new UI.Panel();
  137. option.setClass( 'option' );
  138. option.setTextContent( 'TorusKnot' );
  139. option.onClick( function () {
  140. var radius = 2;
  141. var tube = 0.8;
  142. var radialSegments = 64;
  143. var tubularSegments = 12;
  144. var p = 2;
  145. var q = 3;
  146. var heightScale = 1;
  147. var geometry = new THREE.TorusKnotGeometry( radius, tube, radialSegments, tubularSegments, p, q, heightScale );
  148. var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
  149. mesh.name = 'TorusKnot ' + ( ++ meshCount );
  150. editor.execute( new AddObjectCommand( mesh ) );
  151. } );
  152. options.add( option );
  153. /*
  154. // Teapot
  155. var option = new UI.Panel();
  156. option.setClass( 'option' );
  157. option.setTextContent( 'Teapot' );
  158. option.onClick( function () {
  159. var size = 50;
  160. var segments = 10;
  161. var bottom = true;
  162. var lid = true;
  163. var body = true;
  164. var fitLid = false;
  165. var blinnScale = true;
  166. var material = new THREE.MeshStandardMaterial();
  167. var geometry = new THREE.TeapotBufferGeometry( size, segments, bottom, lid, body, fitLid, blinnScale );
  168. var mesh = new THREE.Mesh( geometry, material );
  169. mesh.name = 'Teapot ' + ( ++ meshCount );
  170. editor.addObject( mesh );
  171. editor.select( mesh );
  172. } );
  173. options.add( option );
  174. */
  175. // Sprite
  176. var option = new UI.Panel();
  177. option.setClass( 'option' );
  178. option.setTextContent( 'Sprite' );
  179. option.onClick( function () {
  180. var sprite = new THREE.Sprite( new THREE.SpriteMaterial() );
  181. sprite.name = 'Sprite ' + ( ++ meshCount );
  182. editor.execute( new AddObjectCommand( sprite ) );
  183. } );
  184. options.add( option );
  185. //
  186. options.add( new UI.HorizontalRule() );
  187. // PointLight
  188. var option = new UI.Panel();
  189. option.setClass( 'option' );
  190. option.setTextContent( 'PointLight' );
  191. option.onClick( function () {
  192. var color = 0xffffff;
  193. var intensity = 1;
  194. var distance = 0;
  195. var light = new THREE.PointLight( color, intensity, distance );
  196. light.name = 'PointLight ' + ( ++ lightCount );
  197. editor.execute( new AddObjectCommand( light ) );
  198. } );
  199. options.add( option );
  200. // SpotLight
  201. var option = new UI.Panel();
  202. option.setClass( 'option' );
  203. option.setTextContent( 'SpotLight' );
  204. option.onClick( function () {
  205. var color = 0xffffff;
  206. var intensity = 1;
  207. var distance = 0;
  208. var angle = Math.PI * 0.1;
  209. var exponent = 10;
  210. var light = new THREE.SpotLight( color, intensity, distance, angle, exponent );
  211. light.name = 'SpotLight ' + ( ++ lightCount );
  212. light.target.name = 'SpotLight ' + ( lightCount ) + ' Target';
  213. light.position.set( 5, 10, 7.5 );
  214. editor.execute( new AddObjectCommand( light ) );
  215. } );
  216. options.add( option );
  217. // DirectionalLight
  218. var option = new UI.Panel();
  219. option.setClass( 'option' );
  220. option.setTextContent( 'DirectionalLight' );
  221. option.onClick( function () {
  222. var color = 0xffffff;
  223. var intensity = 1;
  224. var light = new THREE.DirectionalLight( color, intensity );
  225. light.name = 'DirectionalLight ' + ( ++ lightCount );
  226. light.target.name = 'DirectionalLight ' + ( lightCount ) + ' Target';
  227. light.position.set( 5, 10, 7.5 );
  228. editor.execute( new AddObjectCommand( light ) );
  229. } );
  230. options.add( option );
  231. // HemisphereLight
  232. var option = new UI.Panel();
  233. option.setClass( 'option' );
  234. option.setTextContent( 'HemisphereLight' );
  235. option.onClick( function () {
  236. var skyColor = 0x00aaff;
  237. var groundColor = 0xffaa00;
  238. var intensity = 1;
  239. var light = new THREE.HemisphereLight( skyColor, groundColor, intensity );
  240. light.name = 'HemisphereLight ' + ( ++ lightCount );
  241. light.position.set( 0, 10, 0 );
  242. editor.execute( new AddObjectCommand( light ) );
  243. } );
  244. options.add( option );
  245. // AmbientLight
  246. var option = new UI.Panel();
  247. option.setClass( 'option' );
  248. option.setTextContent( 'AmbientLight' );
  249. option.onClick( function() {
  250. var color = 0x222222;
  251. var light = new THREE.AmbientLight( color );
  252. light.name = 'AmbientLight ' + ( ++ lightCount );
  253. editor.execute( new AddObjectCommand( light ) );
  254. } );
  255. options.add( option );
  256. //
  257. options.add( new UI.HorizontalRule() );
  258. // PerspectiveCamera
  259. var option = new UI.Panel();
  260. option.setClass( 'option' );
  261. option.setTextContent( 'PerspectiveCamera' );
  262. option.onClick( function() {
  263. var camera = new THREE.PerspectiveCamera( 50, 1, 1, 10000 );
  264. camera.name = 'PerspectiveCamera ' + ( ++ cameraCount );
  265. editor.execute( new AddObjectCommand( camera ) );
  266. } );
  267. options.add( option );
  268. return container;
  269. }