Editor.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639
  1. /**
  2. * @author mrdoob / http://mrdoob.com/
  3. */
  4. var Editor = function () {
  5. this.DEFAULT_CAMERA = new THREE.PerspectiveCamera( 50, 1, 0.01, 1000 );
  6. this.DEFAULT_CAMERA.name = 'Camera';
  7. this.DEFAULT_CAMERA.position.set( 0, 5, 10 );
  8. this.DEFAULT_CAMERA.lookAt( new THREE.Vector3() );
  9. var Signal = signals.Signal;
  10. this.signals = {
  11. // script
  12. editScript: new Signal(),
  13. // player
  14. startPlayer: new Signal(),
  15. stopPlayer: new Signal(),
  16. // notifications
  17. editorCleared: new Signal(),
  18. savingStarted: new Signal(),
  19. savingFinished: new Signal(),
  20. transformModeChanged: new Signal(),
  21. snapChanged: new Signal(),
  22. spaceChanged: new Signal(),
  23. rendererChanged: new Signal(),
  24. sceneBackgroundChanged: new Signal(),
  25. sceneFogChanged: new Signal(),
  26. sceneGraphChanged: new Signal(),
  27. cameraChanged: new Signal(),
  28. geometryChanged: new Signal(),
  29. objectSelected: new Signal(),
  30. objectFocused: new Signal(),
  31. objectAdded: new Signal(),
  32. objectChanged: new Signal(),
  33. objectRemoved: new Signal(),
  34. cameraAdded: new Signal(),
  35. cameraRemoved: new Signal(),
  36. helperAdded: new Signal(),
  37. helperRemoved: new Signal(),
  38. materialAdded: new Signal(),
  39. materialChanged: new Signal(),
  40. materialRemoved: new Signal(),
  41. scriptAdded: new Signal(),
  42. scriptChanged: new Signal(),
  43. scriptRemoved: new Signal(),
  44. windowResize: new Signal(),
  45. showGridChanged: new Signal(),
  46. refreshSidebarObject3D: new Signal(),
  47. historyChanged: new Signal(),
  48. viewportCameraChanged: new Signal()
  49. };
  50. this.config = new Config();
  51. this.history = new History( this );
  52. this.storage = new Storage();
  53. this.strings = new Strings( this.config );
  54. this.loader = new Loader( this );
  55. this.camera = this.DEFAULT_CAMERA.clone();
  56. this.scene = new THREE.Scene();
  57. this.scene.name = 'Scene';
  58. this.scene.background = new THREE.Color( 0xaaaaaa );
  59. this.sceneHelpers = new THREE.Scene();
  60. this.object = {};
  61. this.geometries = {};
  62. this.materials = {};
  63. this.textures = {};
  64. this.scripts = {};
  65. this.animations = {};
  66. this.mixer = new THREE.AnimationMixer( this.scene );
  67. this.selected = null;
  68. this.helpers = {};
  69. this.cameras = {};
  70. this.viewportCamera = this.camera;
  71. this.addCamera( this.camera );
  72. };
  73. Editor.prototype = {
  74. setScene: function ( scene ) {
  75. this.scene.uuid = scene.uuid;
  76. this.scene.name = scene.name;
  77. if ( scene.background !== null ) this.scene.background = scene.background.clone();
  78. if ( scene.fog !== null ) this.scene.fog = scene.fog.clone();
  79. this.scene.userData = JSON.parse( JSON.stringify( scene.userData ) );
  80. // avoid render per object
  81. this.signals.sceneGraphChanged.active = false;
  82. while ( scene.children.length > 0 ) {
  83. this.addObject( scene.children[ 0 ] );
  84. }
  85. this.signals.sceneGraphChanged.active = true;
  86. this.signals.sceneGraphChanged.dispatch();
  87. },
  88. //
  89. addObject: function ( object ) {
  90. var scope = this;
  91. object.traverse( function ( child ) {
  92. if ( child.geometry !== undefined ) scope.addGeometry( child.geometry );
  93. if ( child.material !== undefined ) scope.addMaterial( child.material );
  94. scope.addCamera( child );
  95. scope.addHelper( child );
  96. } );
  97. this.scene.add( object );
  98. this.signals.objectAdded.dispatch( object );
  99. this.signals.sceneGraphChanged.dispatch();
  100. },
  101. moveObject: function ( object, parent, before ) {
  102. if ( parent === undefined ) {
  103. parent = this.scene;
  104. }
  105. parent.add( object );
  106. // sort children array
  107. if ( before !== undefined ) {
  108. var index = parent.children.indexOf( before );
  109. parent.children.splice( index, 0, object );
  110. parent.children.pop();
  111. }
  112. this.signals.sceneGraphChanged.dispatch();
  113. },
  114. nameObject: function ( object, name ) {
  115. object.name = name;
  116. this.signals.sceneGraphChanged.dispatch();
  117. },
  118. removeObject: function ( object ) {
  119. if ( object.parent === null ) return; // avoid deleting the camera or scene
  120. var scope = this;
  121. object.traverse( function ( child ) {
  122. scope.removeCamera( child );
  123. scope.removeHelper( child );
  124. } );
  125. object.parent.remove( object );
  126. this.signals.objectRemoved.dispatch( object );
  127. this.signals.sceneGraphChanged.dispatch();
  128. },
  129. addGeometry: function ( geometry ) {
  130. this.geometries[ geometry.uuid ] = geometry;
  131. },
  132. setGeometryName: function ( geometry, name ) {
  133. geometry.name = name;
  134. this.signals.sceneGraphChanged.dispatch();
  135. },
  136. addMaterial: function ( material ) {
  137. this.materials[ material.uuid ] = material;
  138. this.signals.materialAdded.dispatch();
  139. },
  140. removeMaterial: function ( material ) {
  141. delete this.materials[ material.uuid ];
  142. this.signals.materialRemoved.dispatch();
  143. },
  144. getMaterialById: function ( id ) {
  145. var material;
  146. var materials = Object.values( this.materials );
  147. for ( var i = 0; i < materials.length; i ++ ) {
  148. if ( materials[ i ].id === id ) {
  149. material = materials[ i ];
  150. break;
  151. }
  152. }
  153. return material;
  154. },
  155. setMaterialName: function ( material, name ) {
  156. material.name = name;
  157. this.signals.sceneGraphChanged.dispatch();
  158. },
  159. addTexture: function ( texture ) {
  160. this.textures[ texture.uuid ] = texture;
  161. },
  162. addAnimation: function ( object, animations ) {
  163. if ( animations.length > 0 ) {
  164. this.animations[ object.uuid ] = animations;
  165. }
  166. },
  167. //
  168. addCamera: function ( camera ) {
  169. if ( camera.isCamera ) {
  170. this.cameras[ camera.uuid ] = camera;
  171. this.signals.cameraAdded.dispatch( camera );
  172. }
  173. },
  174. removeCamera: function ( camera ) {
  175. if ( this.cameras[ camera.uuid ] !== undefined ) {
  176. delete this.cameras[ camera.uuid ];
  177. this.signals.cameraRemoved.dispatch( camera );
  178. }
  179. },
  180. //
  181. addHelper: function () {
  182. var geometry = new THREE.SphereBufferGeometry( 2, 4, 2 );
  183. var material = new THREE.MeshBasicMaterial( { color: 0xff0000, visible: false } );
  184. return function ( object ) {
  185. var helper;
  186. if ( object.isCamera ) {
  187. helper = new THREE.CameraHelper( object, 1 );
  188. } else if ( object.isPointLight ) {
  189. helper = new THREE.PointLightHelper( object, 1 );
  190. } else if ( object.isDirectionalLight ) {
  191. helper = new THREE.DirectionalLightHelper( object, 1 );
  192. } else if ( object.isSpotLight ) {
  193. helper = new THREE.SpotLightHelper( object, 1 );
  194. } else if ( object.isHemisphereLight ) {
  195. helper = new THREE.HemisphereLightHelper( object, 1 );
  196. } else if ( object.isSkinnedMesh ) {
  197. helper = new THREE.SkeletonHelper( object.skeleton.bones[ 0 ] );
  198. } else {
  199. // no helper for this object type
  200. return;
  201. }
  202. var picker = new THREE.Mesh( geometry, material );
  203. picker.name = 'picker';
  204. picker.userData.object = object;
  205. helper.add( picker );
  206. this.sceneHelpers.add( helper );
  207. this.helpers[ object.id ] = helper;
  208. this.signals.helperAdded.dispatch( helper );
  209. };
  210. }(),
  211. removeHelper: function ( object ) {
  212. if ( this.helpers[ object.id ] !== undefined ) {
  213. var helper = this.helpers[ object.id ];
  214. helper.parent.remove( helper );
  215. delete this.helpers[ object.id ];
  216. this.signals.helperRemoved.dispatch( helper );
  217. }
  218. },
  219. //
  220. addScript: function ( object, script ) {
  221. if ( this.scripts[ object.uuid ] === undefined ) {
  222. this.scripts[ object.uuid ] = [];
  223. }
  224. this.scripts[ object.uuid ].push( script );
  225. this.signals.scriptAdded.dispatch( script );
  226. },
  227. removeScript: function ( object, script ) {
  228. if ( this.scripts[ object.uuid ] === undefined ) return;
  229. var index = this.scripts[ object.uuid ].indexOf( script );
  230. if ( index !== - 1 ) {
  231. this.scripts[ object.uuid ].splice( index, 1 );
  232. }
  233. this.signals.scriptRemoved.dispatch( script );
  234. },
  235. getObjectMaterial: function ( object, slot ) {
  236. var material = object.material;
  237. if ( Array.isArray( material ) ) {
  238. material = material[ slot ];
  239. }
  240. return material;
  241. },
  242. setObjectMaterial: function ( object, slot, newMaterial ) {
  243. if ( Array.isArray( object.material ) ) {
  244. object.material[ slot ] = newMaterial;
  245. } else {
  246. object.material = newMaterial;
  247. }
  248. },
  249. setViewportCamera: function ( uuid ) {
  250. this.viewportCamera = this.cameras[ uuid ];
  251. this.signals.viewportCameraChanged.dispatch( this.viewportCamera );
  252. },
  253. //
  254. select: function ( object ) {
  255. if ( this.selected === object ) return;
  256. var uuid = null;
  257. if ( object !== null ) {
  258. uuid = object.uuid;
  259. }
  260. this.selected = object;
  261. this.config.setKey( 'selected', uuid );
  262. this.signals.objectSelected.dispatch( object );
  263. },
  264. selectById: function ( id ) {
  265. if ( id === this.camera.id ) {
  266. this.select( this.camera );
  267. return;
  268. }
  269. this.select( this.scene.getObjectById( id, true ) );
  270. },
  271. selectByUuid: function ( uuid ) {
  272. var scope = this;
  273. this.scene.traverse( function ( child ) {
  274. if ( child.uuid === uuid ) {
  275. scope.select( child );
  276. }
  277. } );
  278. },
  279. deselect: function () {
  280. this.select( null );
  281. },
  282. focus: function ( object ) {
  283. if ( object !== undefined ) {
  284. this.signals.objectFocused.dispatch( object );
  285. }
  286. },
  287. focusById: function ( id ) {
  288. this.focus( this.scene.getObjectById( id, true ) );
  289. },
  290. clear: function () {
  291. this.history.clear();
  292. this.storage.clear();
  293. this.camera.copy( this.DEFAULT_CAMERA );
  294. this.scene.name = "Scene";
  295. this.scene.userData = {};
  296. this.scene.background.setHex( 0xaaaaaa );
  297. this.scene.fog = null;
  298. var objects = this.scene.children;
  299. while ( objects.length > 0 ) {
  300. this.removeObject( objects[ 0 ] );
  301. }
  302. this.geometries = {};
  303. this.materials = {};
  304. this.textures = {};
  305. this.scripts = {};
  306. this.animations = {};
  307. this.mixer.stopAllAction();
  308. this.deselect();
  309. this.signals.editorCleared.dispatch();
  310. },
  311. //
  312. fromJSON: function ( json ) {
  313. var loader = new THREE.ObjectLoader();
  314. // backwards
  315. if ( json.scene === undefined ) {
  316. this.setScene( loader.parse( json ) );
  317. return;
  318. }
  319. var camera = loader.parse( json.camera );
  320. this.camera.copy( camera );
  321. this.camera.aspect = this.DEFAULT_CAMERA.aspect;
  322. this.camera.updateProjectionMatrix();
  323. this.history.fromJSON( json.history );
  324. this.scripts = json.scripts;
  325. this.setScene( loader.parse( json.scene ) );
  326. },
  327. toJSON: function () {
  328. // scripts clean up
  329. var scene = this.scene;
  330. var scripts = this.scripts;
  331. for ( var key in scripts ) {
  332. var script = scripts[ key ];
  333. if ( script.length === 0 || scene.getObjectByProperty( 'uuid', key ) === undefined ) {
  334. delete scripts[ key ];
  335. }
  336. }
  337. //
  338. return {
  339. metadata: {},
  340. project: {
  341. shadows: this.config.getKey( 'project/renderer/shadows' ),
  342. vr: this.config.getKey( 'project/vr' )
  343. },
  344. camera: this.camera.toJSON(),
  345. scene: this.scene.toJSON(),
  346. scripts: this.scripts,
  347. history: this.history.toJSON()
  348. };
  349. },
  350. objectByUuid: function ( uuid ) {
  351. return this.scene.getObjectByProperty( 'uuid', uuid, true );
  352. },
  353. execute: function ( cmd, optionalName ) {
  354. this.history.execute( cmd, optionalName );
  355. },
  356. undo: function () {
  357. this.history.undo();
  358. },
  359. redo: function () {
  360. this.history.redo();
  361. }
  362. };