Menubar.Add.js 8.9 KB

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