Viewport.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586
  1. var Viewport = function ( editor ) {
  2. var signals = editor.signals;
  3. var container = new UI.Panel();
  4. container.setPosition( 'absolute' );
  5. var info = new UI.Text();
  6. info.setPosition( 'absolute' );
  7. info.setRight( '5px' );
  8. info.setBottom( '5px' );
  9. info.setFontSize( '12px' );
  10. info.setColor( '#ffffff' );
  11. info.setValue( 'objects: 0, vertices: 0, faces: 0' );
  12. container.add( info );
  13. var scene = editor.scene;
  14. var sceneHelpers = editor.sceneHelpers;
  15. var objects = [];
  16. // helpers
  17. var grid = new THREE.GridHelper( 500, 25 );
  18. sceneHelpers.add( grid );
  19. //
  20. var camera = new THREE.PerspectiveCamera( 50, 1, 1, 5000 );
  21. camera.position.fromArray( editor.config.getKey( 'camera' ).position );
  22. camera.lookAt( new THREE.Vector3().fromArray( editor.config.getKey( 'camera' ).target ) );
  23. //
  24. var selectionBox = new THREE.BoxHelper();
  25. selectionBox.material.depthTest = false;
  26. selectionBox.material.transparent = true;
  27. selectionBox.visible = false;
  28. sceneHelpers.add( selectionBox );
  29. var transformControls = new THREE.TransformControls( camera, container.dom );
  30. transformControls.addEventListener( 'change', function () {
  31. controls.enabled = true;
  32. if ( transformControls.axis !== undefined ) {
  33. controls.enabled = false;
  34. }
  35. if ( editor.selected !== null ) {
  36. signals.objectChanged.dispatch( editor.selected );
  37. }
  38. } );
  39. sceneHelpers.add( transformControls );
  40. // fog
  41. var oldFogType = "None";
  42. var oldFogColor = 0xaaaaaa;
  43. var oldFogNear = 1;
  44. var oldFogFar = 5000;
  45. var oldFogDensity = 0.00025;
  46. // object picking
  47. var ray = new THREE.Raycaster();
  48. var projector = new THREE.Projector();
  49. // events
  50. var getIntersects = function ( event, object ) {
  51. var rect = container.dom.getBoundingClientRect();
  52. x = ( event.clientX - rect.left ) / rect.width;
  53. y = ( event.clientY - rect.top ) / rect.height;
  54. var vector = new THREE.Vector3( ( x ) * 2 - 1, - ( y ) * 2 + 1, 0.5 );
  55. projector.unprojectVector( vector, camera );
  56. ray.set( camera.position, vector.sub( camera.position ).normalize() );
  57. if ( object instanceof Array ) {
  58. return ray.intersectObjects( object );
  59. }
  60. return ray.intersectObject( object );
  61. };
  62. var onMouseDownPosition = new THREE.Vector2();
  63. var onMouseUpPosition = new THREE.Vector2();
  64. var onMouseDown = function ( event ) {
  65. event.preventDefault();
  66. var rect = container.dom.getBoundingClientRect();
  67. x = (event.clientX - rect.left) / rect.width;
  68. y = (event.clientY - rect.top) / rect.height;
  69. onMouseDownPosition.set( x, y );
  70. document.addEventListener( 'mouseup', onMouseUp, false );
  71. };
  72. var onMouseUp = function ( event ) {
  73. var rect = container.dom.getBoundingClientRect();
  74. x = (event.clientX - rect.left) / rect.width;
  75. y = (event.clientY - rect.top) / rect.height;
  76. onMouseUpPosition.set( x, y );
  77. if ( onMouseDownPosition.distanceTo( onMouseUpPosition ) == 0 ) {
  78. var intersects = getIntersects( event, objects );
  79. if ( intersects.length > 0 ) {
  80. var object = intersects[ 0 ].object;
  81. if ( object.userData.object !== undefined ) {
  82. // helper
  83. editor.select( object.userData.object );
  84. } else {
  85. editor.select( object );
  86. }
  87. } else {
  88. editor.select( null );
  89. }
  90. render();
  91. }
  92. document.removeEventListener( 'mouseup', onMouseUp );
  93. };
  94. var onDoubleClick = function ( event ) {
  95. var intersects = getIntersects( event, objects );
  96. if ( intersects.length > 0 && intersects[ 0 ].object === editor.selected ) {
  97. controls.focus( editor.selected );
  98. }
  99. };
  100. container.dom.addEventListener( 'mousedown', onMouseDown, false );
  101. container.dom.addEventListener( 'dblclick', onDoubleClick, false );
  102. // controls need to be added *after* main logic,
  103. // otherwise controls.enabled doesn't work.
  104. var controls = new THREE.EditorControls( camera, container.dom );
  105. controls.center.fromArray( editor.config.getKey( 'camera' ).target )
  106. controls.addEventListener( 'change', function () {
  107. transformControls.update();
  108. signals.cameraChanged.dispatch( camera );
  109. } );
  110. // signals
  111. signals.themeChanged.add( function ( value ) {
  112. switch ( value ) {
  113. case 'css/light.css':
  114. grid.setColors( 0x444444, 0x888888 );
  115. clearColor = 0xaaaaaa;
  116. break;
  117. case 'css/dark.css':
  118. grid.setColors( 0xbbbbbb, 0x888888 );
  119. clearColor = 0x333333;
  120. break;
  121. }
  122. renderer.setClearColor( clearColor );
  123. render();
  124. } );
  125. signals.transformModeChanged.add( function ( mode ) {
  126. transformControls.setMode( mode );
  127. } );
  128. signals.snapChanged.add( function ( dist ) {
  129. transformControls.setSnap( dist );
  130. } );
  131. signals.spaceChanged.add( function ( space ) {
  132. transformControls.setSpace( space );
  133. } );
  134. signals.rendererChanged.add( function ( type ) {
  135. container.dom.removeChild( renderer.domElement );
  136. renderer = new THREE[ type ]( { antialias: true } );
  137. renderer.autoClear = false;
  138. renderer.autoUpdateScene = false;
  139. renderer.setClearColor( clearColor );
  140. renderer.setSize( container.dom.offsetWidth, container.dom.offsetHeight );
  141. container.dom.appendChild( renderer.domElement );
  142. render();
  143. } );
  144. signals.sceneGraphChanged.add( function () {
  145. render();
  146. updateInfo();
  147. } );
  148. var saveTimeout;
  149. signals.cameraChanged.add( function () {
  150. if ( saveTimeout !== undefined ) {
  151. clearTimeout( saveTimeout );
  152. }
  153. saveTimeout = setTimeout( function () {
  154. editor.config.setKey( 'camera', {
  155. position: camera.position.toArray(),
  156. target: controls.center.toArray()
  157. } );
  158. }, 1000 );
  159. render();
  160. } );
  161. signals.objectSelected.add( function ( object ) {
  162. selectionBox.visible = false;
  163. transformControls.detach();
  164. if ( object !== null ) {
  165. if ( object.geometry !== undefined &&
  166. object instanceof THREE.Sprite === false ) {
  167. selectionBox.update( object );
  168. selectionBox.visible = true;
  169. }
  170. if ( object instanceof THREE.PerspectiveCamera === false ) {
  171. transformControls.attach( object );
  172. }
  173. }
  174. render();
  175. } );
  176. signals.objectAdded.add( function ( object ) {
  177. var materialsNeedUpdate = false;
  178. object.traverse( function ( child ) {
  179. if ( child instanceof THREE.Light ) materialsNeedUpdate = true;
  180. objects.push( child );
  181. } );
  182. if ( materialsNeedUpdate === true ) updateMaterials();
  183. } );
  184. signals.objectChanged.add( function ( object ) {
  185. transformControls.update();
  186. if ( object !== camera ) {
  187. if ( object.geometry !== undefined ) {
  188. selectionBox.update( object );
  189. }
  190. if ( editor.helpers[ object.id ] !== undefined ) {
  191. editor.helpers[ object.id ].update();
  192. }
  193. updateInfo();
  194. }
  195. render();
  196. } );
  197. signals.objectRemoved.add( function ( object ) {
  198. var materialsNeedUpdate = false;
  199. object.traverse( function ( child ) {
  200. if ( child instanceof THREE.Light ) materialsNeedUpdate = true;
  201. objects.splice( objects.indexOf( child ), 1 );
  202. } );
  203. if ( materialsNeedUpdate === true ) updateMaterials();
  204. } );
  205. signals.helperAdded.add( function ( object ) {
  206. objects.push( object.getObjectByName( 'picker' ) );
  207. } );
  208. signals.helperRemoved.add( function ( object ) {
  209. objects.splice( objects.indexOf( object.getObjectByName( 'picker' ) ), 1 );
  210. } );
  211. signals.materialChanged.add( function ( material ) {
  212. render();
  213. } );
  214. signals.fogTypeChanged.add( function ( fogType ) {
  215. if ( fogType !== oldFogType ) {
  216. if ( fogType === "None" ) {
  217. scene.fog = null;
  218. } else if ( fogType === "Fog" ) {
  219. scene.fog = new THREE.Fog( oldFogColor, oldFogNear, oldFogFar );
  220. } else if ( fogType === "FogExp2" ) {
  221. scene.fog = new THREE.FogExp2( oldFogColor, oldFogDensity );
  222. }
  223. updateMaterials();
  224. oldFogType = fogType;
  225. }
  226. render();
  227. } );
  228. signals.fogColorChanged.add( function ( fogColor ) {
  229. oldFogColor = fogColor;
  230. updateFog( scene );
  231. render();
  232. } );
  233. signals.fogParametersChanged.add( function ( near, far, density ) {
  234. oldFogNear = near;
  235. oldFogFar = far;
  236. oldFogDensity = density;
  237. updateFog( scene );
  238. render();
  239. } );
  240. signals.windowResize.add( function () {
  241. camera.aspect = container.dom.offsetWidth / container.dom.offsetHeight;
  242. camera.updateProjectionMatrix();
  243. renderer.setSize( container.dom.offsetWidth, container.dom.offsetHeight );
  244. render();
  245. } );
  246. signals.playAnimations.add( function (animations) {
  247. function animate() {
  248. requestAnimationFrame( animate );
  249. for ( var i = 0; i < animations.length ; i ++ ) {
  250. animations[i].update(0.016);
  251. }
  252. render();
  253. }
  254. animate();
  255. } );
  256. //
  257. var clearColor, renderer;
  258. if ( editor.config.getKey( 'renderer' ) !== undefined ) {
  259. renderer = new THREE[ editor.config.getKey( 'renderer' ) ]( { antialias: true } );
  260. } else {
  261. if ( System.support.webgl === true ) {
  262. renderer = new THREE.WebGLRenderer( { antialias: true } );
  263. } else {
  264. renderer = new THREE.CanvasRenderer();
  265. }
  266. }
  267. renderer.autoClear = false;
  268. renderer.autoUpdateScene = false;
  269. container.dom.appendChild( renderer.domElement );
  270. animate();
  271. //
  272. function updateInfo() {
  273. var objects = 0;
  274. var vertices = 0;
  275. var faces = 0;
  276. scene.traverse( function ( object ) {
  277. if ( object instanceof THREE.Mesh ) {
  278. objects ++;
  279. var geometry = object.geometry;
  280. if ( geometry instanceof THREE.Geometry ) {
  281. vertices += geometry.vertices.length;
  282. faces += geometry.faces.length;
  283. } else if ( geometry instanceof THREE.Geometry2 ) {
  284. vertices += geometry.vertices.length / 3;
  285. faces += geometry.vertices.length / 9;
  286. } else if ( geometry instanceof THREE.BufferGeometry ) {
  287. vertices += geometry.attributes.position.array.length / 3;
  288. if ( geometry.attributes.index !== undefined ) {
  289. faces += geometry.attributes.index.array.length / 3;
  290. } else {
  291. faces += geometry.attributes.position.array.length / 9;
  292. }
  293. }
  294. }
  295. } );
  296. info.setValue( 'objects: ' + objects + ', vertices: ' + vertices + ', faces: ' + faces );
  297. }
  298. function updateMaterials() {
  299. editor.scene.traverse( function ( node ) {
  300. if ( node.material ) {
  301. node.material.needsUpdate = true;
  302. if ( node.material instanceof THREE.MeshFaceMaterial ) {
  303. for ( var i = 0; i < node.material.materials.length; i ++ ) {
  304. node.material.materials[ i ].needsUpdate = true;
  305. }
  306. }
  307. }
  308. } );
  309. }
  310. function updateFog( root ) {
  311. if ( root.fog ) {
  312. root.fog.color.setHex( oldFogColor );
  313. if ( root.fog.near !== undefined ) root.fog.near = oldFogNear;
  314. if ( root.fog.far !== undefined ) root.fog.far = oldFogFar;
  315. if ( root.fog.density !== undefined ) root.fog.density = oldFogDensity;
  316. }
  317. }
  318. function animate() {
  319. requestAnimationFrame( animate );
  320. }
  321. function render() {
  322. sceneHelpers.updateMatrixWorld();
  323. scene.updateMatrixWorld();
  324. renderer.clear();
  325. renderer.render( scene, camera );
  326. renderer.render( sceneHelpers, camera );
  327. }
  328. return container;
  329. }