Menubar.Add.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472
  1. /**
  2. * @author mrdoob / http://mrdoob.com/
  3. */
  4. Menubar.Add = function ( editor ) {
  5. var strings = editor.strings;
  6. var container = new UI.Panel();
  7. container.setClass( 'menu' );
  8. var title = new UI.Panel();
  9. title.setClass( 'title' );
  10. title.setTextContent( strings.getKey( 'menubar/add' ) );
  11. container.add( title );
  12. var options = new UI.Panel();
  13. options.setClass( 'options' );
  14. container.add( options );
  15. // Group
  16. var option = new UI.Row();
  17. option.setClass( 'option' );
  18. option.setTextContent( strings.getKey( 'menubar/add/group' ) );
  19. option.onClick( function () {
  20. var mesh = new THREE.Group();
  21. mesh.name = 'Group';
  22. editor.execute( new AddObjectCommand( editor, mesh ) );
  23. } );
  24. options.add( option );
  25. //
  26. options.add( new UI.HorizontalRule() );
  27. // Box
  28. var option = new UI.Row();
  29. option.setClass( 'option' );
  30. option.setTextContent( strings.getKey( 'menubar/add/box' ) );
  31. option.onClick( function () {
  32. var geometry = new THREE.BoxBufferGeometry( 1, 1, 1, 1, 1, 1 );
  33. var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
  34. mesh.name = 'Box';
  35. editor.execute( new AddObjectCommand( editor, mesh ) );
  36. } );
  37. options.add( option );
  38. // Circle
  39. var option = new UI.Row();
  40. option.setClass( 'option' );
  41. option.setTextContent( strings.getKey( 'menubar/add/circle' ) );
  42. option.onClick( function () {
  43. var geometry = new THREE.CircleBufferGeometry( 1, 8, 0, Math.PI * 2 );
  44. var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
  45. mesh.name = 'Circle';
  46. editor.execute( new AddObjectCommand( editor, mesh ) );
  47. } );
  48. options.add( option );
  49. // Cylinder
  50. var option = new UI.Row();
  51. option.setClass( 'option' );
  52. option.setTextContent( strings.getKey( 'menubar/add/cylinder' ) );
  53. option.onClick( function () {
  54. var geometry = new THREE.CylinderBufferGeometry( 1, 1, 1, 8, 1, false, 0, Math.PI * 2 );
  55. var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
  56. mesh.name = 'Cylinder';
  57. editor.execute( new AddObjectCommand( editor, mesh ) );
  58. } );
  59. options.add( option );
  60. // Dodecahedron
  61. var option = new UI.Row();
  62. option.setClass( 'option' );
  63. option.setTextContent( strings.getKey( 'menubar/add/dodecahedron' ) );
  64. option.onClick( function () {
  65. var geometry = new THREE.DodecahedronBufferGeometry( 1, 0 );
  66. var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
  67. mesh.name = 'Dodecahedron';
  68. editor.execute( new AddObjectCommand( editor, mesh ) );
  69. } );
  70. options.add( option );
  71. // Icosahedron
  72. var option = new UI.Row();
  73. option.setClass( 'option' );
  74. option.setTextContent( strings.getKey( 'menubar/add/icosahedron' ) );
  75. option.onClick( function () {
  76. var geometry = new THREE.IcosahedronBufferGeometry( 1, 0 );
  77. var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
  78. mesh.name = 'Icosahedron';
  79. editor.execute( new AddObjectCommand( editor, mesh ) );
  80. } );
  81. options.add( option );
  82. // Lathe
  83. var option = new UI.Row();
  84. option.setClass( 'option' );
  85. option.setTextContent( strings.getKey( 'menubar/add/lathe' ) );
  86. option.onClick( function () {
  87. var points = [
  88. new THREE.Vector2( 0, 0 ),
  89. new THREE.Vector2( 0.4, 0 ),
  90. new THREE.Vector2( 0.35, 0.05 ),
  91. new THREE.Vector2( 0.1, 0.075 ),
  92. new THREE.Vector2( 0.08, 0.1 ),
  93. new THREE.Vector2( 0.08, 0.4 ),
  94. new THREE.Vector2( 0.1, 0.42 ),
  95. new THREE.Vector2( 0.14, 0.48 ),
  96. new THREE.Vector2( 0.2, 0.5 ),
  97. new THREE.Vector2( 0.25, 0.54 ),
  98. new THREE.Vector2( 0.3, 1.2 )
  99. ];
  100. var geometry = new THREE.LatheBufferGeometry( points, 12, 0, Math.PI * 2 );
  101. var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial( { side: THREE.DoubleSide } ) );
  102. mesh.name = 'Lathe';
  103. editor.execute( new AddObjectCommand( editor, mesh ) );
  104. } );
  105. options.add( option );
  106. // Octahedron
  107. var option = new UI.Row();
  108. option.setClass( 'option' );
  109. option.setTextContent( strings.getKey( 'menubar/add/octahedron' ) );
  110. option.onClick( function () {
  111. var geometry = new THREE.OctahedronBufferGeometry( 1, 0 );
  112. var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
  113. mesh.name = 'Octahedron';
  114. editor.execute( new AddObjectCommand( editor, mesh ) );
  115. } );
  116. options.add( option );
  117. // Plane
  118. var option = new UI.Row();
  119. option.setClass( 'option' );
  120. option.setTextContent( strings.getKey( 'menubar/add/plane' ) );
  121. option.onClick( function () {
  122. var geometry = new THREE.PlaneBufferGeometry( 1, 1, 1, 1 );
  123. var material = new THREE.MeshStandardMaterial();
  124. var mesh = new THREE.Mesh( geometry, material );
  125. mesh.name = 'Plane';
  126. editor.execute( new AddObjectCommand( editor, mesh ) );
  127. } );
  128. options.add( option );
  129. // Ring
  130. var option = new UI.Row();
  131. option.setClass( 'option' );
  132. option.setTextContent( strings.getKey( 'menubar/add/ring' ) );
  133. option.onClick( function () {
  134. var geometry = new THREE.RingBufferGeometry( 0.5, 1, 8, 1, 0, Math.PI * 2 );
  135. var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
  136. mesh.name = 'Ring';
  137. editor.execute( new AddObjectCommand( editor, mesh ) );
  138. } );
  139. options.add( option );
  140. // Sphere
  141. var option = new UI.Row();
  142. option.setClass( 'option' );
  143. option.setTextContent( strings.getKey( 'menubar/add/sphere' ) );
  144. option.onClick( function () {
  145. var geometry = new THREE.SphereBufferGeometry( 1, 8, 6, 0, Math.PI * 2, 0, Math.PI );
  146. var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
  147. mesh.name = 'Sphere';
  148. editor.execute( new AddObjectCommand( editor, mesh ) );
  149. } );
  150. options.add( option );
  151. // Sprite
  152. var option = new UI.Row();
  153. option.setClass( 'option' );
  154. option.setTextContent( strings.getKey( 'menubar/add/sprite' ) );
  155. option.onClick( function () {
  156. var sprite = new THREE.Sprite( new THREE.SpriteMaterial() );
  157. sprite.name = 'Sprite';
  158. editor.execute( new AddObjectCommand( editor, sprite ) );
  159. } );
  160. options.add( option );
  161. // Tetrahedron
  162. var option = new UI.Row();
  163. option.setClass( 'option' );
  164. option.setTextContent( strings.getKey( 'menubar/add/tetrahedron' ) );
  165. option.onClick( function () {
  166. var geometry = new THREE.TetrahedronBufferGeometry( 1, 0 );
  167. var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
  168. mesh.name = 'Tetrahedron';
  169. editor.execute( new AddObjectCommand( editor, mesh ) );
  170. } );
  171. options.add( option );
  172. // Torus
  173. var option = new UI.Row();
  174. option.setClass( 'option' );
  175. option.setTextContent( strings.getKey( 'menubar/add/torus' ) );
  176. option.onClick( function () {
  177. var geometry = new THREE.TorusBufferGeometry( 1, 0.4, 8, 6, Math.PI * 2 );
  178. var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
  179. mesh.name = 'Torus';
  180. editor.execute( new AddObjectCommand( editor, mesh ) );
  181. } );
  182. options.add( option );
  183. // TorusKnot
  184. var option = new UI.Row();
  185. option.setClass( 'option' );
  186. option.setTextContent( strings.getKey( 'menubar/add/torusknot' ) );
  187. option.onClick( function () {
  188. var geometry = new THREE.TorusKnotBufferGeometry( 1, 0.4, 64, 8, 2, 3 );
  189. var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
  190. mesh.name = 'TorusKnot';
  191. editor.execute( new AddObjectCommand( editor, mesh ) );
  192. } );
  193. options.add( option );
  194. // Tube
  195. var option = new UI.Row();
  196. option.setClass( 'option' );
  197. option.setTextContent( strings.getKey( 'menubar/add/tube' ) );
  198. option.onClick( function () {
  199. var path = new THREE.CatmullRomCurve3( [
  200. new THREE.Vector3( 2, 2, - 2 ),
  201. new THREE.Vector3( 2, - 2, - 0.6666666666666667 ),
  202. new THREE.Vector3( - 2, - 2, 0.6666666666666667 ),
  203. new THREE.Vector3( - 2, 2, 2 )
  204. ] );
  205. var geometry = new THREE.TubeBufferGeometry( path, 64, 1, 8, false );
  206. var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
  207. mesh.name = 'Tube';
  208. editor.execute( new AddObjectCommand( editor, mesh ) );
  209. } );
  210. options.add( option );
  211. /*
  212. // Teapot
  213. var option = new UI.Row();
  214. option.setClass( 'option' );
  215. option.setTextContent( 'Teapot' );
  216. option.onClick( function () {
  217. var size = 50;
  218. var segments = 10;
  219. var bottom = true;
  220. var lid = true;
  221. var body = true;
  222. var fitLid = false;
  223. var blinnScale = true;
  224. var material = new THREE.MeshStandardMaterial();
  225. var geometry = new THREE.TeapotBufferGeometry( size, segments, bottom, lid, body, fitLid, blinnScale );
  226. var mesh = new THREE.Mesh( geometry, material );
  227. mesh.name = 'Teapot';
  228. editor.addObject( mesh );
  229. editor.select( mesh );
  230. } );
  231. options.add( option );
  232. */
  233. //
  234. options.add( new UI.HorizontalRule() );
  235. // AmbientLight
  236. var option = new UI.Row();
  237. option.setClass( 'option' );
  238. option.setTextContent( strings.getKey( 'menubar/add/ambientlight' ) );
  239. option.onClick( function () {
  240. var color = 0x222222;
  241. var light = new THREE.AmbientLight( color );
  242. light.name = 'AmbientLight';
  243. editor.execute( new AddObjectCommand( editor, light ) );
  244. } );
  245. options.add( option );
  246. // DirectionalLight
  247. var option = new UI.Row();
  248. option.setClass( 'option' );
  249. option.setTextContent( strings.getKey( 'menubar/add/directionallight' ) );
  250. option.onClick( function () {
  251. var color = 0xffffff;
  252. var intensity = 1;
  253. var light = new THREE.DirectionalLight( color, intensity );
  254. light.name = 'DirectionalLight';
  255. light.target.name = 'DirectionalLight Target';
  256. light.position.set( 5, 10, 7.5 );
  257. editor.execute( new AddObjectCommand( editor, light ) );
  258. } );
  259. options.add( option );
  260. // HemisphereLight
  261. var option = new UI.Row();
  262. option.setClass( 'option' );
  263. option.setTextContent( strings.getKey( 'menubar/add/hemispherelight' ) );
  264. option.onClick( function () {
  265. var skyColor = 0x00aaff;
  266. var groundColor = 0xffaa00;
  267. var intensity = 1;
  268. var light = new THREE.HemisphereLight( skyColor, groundColor, intensity );
  269. light.name = 'HemisphereLight';
  270. light.position.set( 0, 10, 0 );
  271. editor.execute( new AddObjectCommand( editor, light ) );
  272. } );
  273. options.add( option );
  274. // PointLight
  275. var option = new UI.Row();
  276. option.setClass( 'option' );
  277. option.setTextContent( strings.getKey( 'menubar/add/pointlight' ) );
  278. option.onClick( function () {
  279. var color = 0xffffff;
  280. var intensity = 1;
  281. var distance = 0;
  282. var light = new THREE.PointLight( color, intensity, distance );
  283. light.name = 'PointLight';
  284. editor.execute( new AddObjectCommand( editor, light ) );
  285. } );
  286. options.add( option );
  287. // SpotLight
  288. var option = new UI.Row();
  289. option.setClass( 'option' );
  290. option.setTextContent( strings.getKey( 'menubar/add/spotlight' ) );
  291. option.onClick( function () {
  292. var color = 0xffffff;
  293. var intensity = 1;
  294. var distance = 0;
  295. var angle = Math.PI * 0.1;
  296. var penumbra = 0;
  297. var light = new THREE.SpotLight( color, intensity, distance, angle, penumbra );
  298. light.name = 'SpotLight';
  299. light.target.name = 'SpotLight Target';
  300. light.position.set( 5, 10, 7.5 );
  301. editor.execute( new AddObjectCommand( editor, light ) );
  302. } );
  303. options.add( option );
  304. //
  305. options.add( new UI.HorizontalRule() );
  306. // OrthographicCamera
  307. var option = new UI.Row();
  308. option.setClass( 'option' );
  309. option.setTextContent( strings.getKey( 'menubar/add/orthographiccamera' ) );
  310. option.onClick( function () {
  311. var camera = new THREE.OrthographicCamera();
  312. camera.name = 'OrthographicCamera';
  313. editor.execute( new AddObjectCommand( editor, camera ) );
  314. } );
  315. options.add( option );
  316. // PerspectiveCamera
  317. var option = new UI.Row();
  318. option.setClass( 'option' );
  319. option.setTextContent( strings.getKey( 'menubar/add/perspectivecamera' ) );
  320. option.onClick( function () {
  321. var camera = new THREE.PerspectiveCamera();
  322. camera.name = 'PerspectiveCamera';
  323. editor.execute( new AddObjectCommand( editor, camera ) );
  324. } );
  325. options.add( option );
  326. return container;
  327. };