Menubar.Add.js 9.0 KB

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