Menubar.Add.js 12 KB

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