diff --git a/editor/css/dark.css b/editor/css/dark.css index 01bca251413897..ed99bf851de229 100644 --- a/editor/css/dark.css +++ b/editor/css/dark.css @@ -225,23 +225,6 @@ select { height: 24px; } -#cameraSelect { - position: absolute; - z-index: 1; - padding: 10px; -} - - #cameraSelect * { - width: 100%; - } - - #cameraSelect{ - margin-top: 32px; - margin-right: 300px; - right: 0; - top : 0; - } - .Outliner { color: #888; background: #222; @@ -311,7 +294,7 @@ select { #toolbar { left: calc(50% - 140px); width: 280px; - top: 52px; + top: 68px; } } diff --git a/editor/css/light.css b/editor/css/light.css index 72ec4d401f337c..13eb2a58faa95c 100644 --- a/editor/css/light.css +++ b/editor/css/light.css @@ -218,24 +218,6 @@ select { height: 24px; } -#cameraSelect { - position: absolute; - z-index: 1; - padding: 10px; -} - - #cameraSelect * { - width: 100%; - } - - #cameraSelect{ - margin-top: 32px; - margin-right: 300px; - right: 0; - top : 0; - } - - .Outliner { color: #444; background-color: #fff; @@ -305,7 +287,7 @@ select { #toolbar { left: calc(50% - 140px); width: 280px; - top: 52px; + top: 68px; } } diff --git a/editor/index.html b/editor/index.html index e260d3f8f18d0a..d0e950a5e2beab 100644 --- a/editor/index.html +++ b/editor/index.html @@ -143,6 +143,7 @@ + diff --git a/editor/js/Config.js b/editor/js/Config.js index 3ee53053d56f29..68094fbeef495c 100644 --- a/editor/js/Config.js +++ b/editor/js/Config.js @@ -18,8 +18,6 @@ var Config = function () { 'project/renderer': 'WebGLRenderer', 'project/renderer/antialias': true, 'project/renderer/shadows': true, - 'project/renderer/showHelpers': true, - 'project/renderer/showSceneCameras': true, 'project/vr': false, @@ -29,7 +27,7 @@ var Config = function () { 'settings/shortcuts/rotate': 'e', 'settings/shortcuts/scale': 'r', 'settings/shortcuts/undo': 'z', - 'settings/shortcuts/focus': 'f', + 'settings/shortcuts/focus': 'f' }; if ( window.localStorage[ name ] === undefined ) { diff --git a/editor/js/Editor.js b/editor/js/Editor.js index f0fda14e7df73d..3c80c3cab4cf9a 100644 --- a/editor/js/Editor.js +++ b/editor/js/Editor.js @@ -51,6 +51,9 @@ var Editor = function () { objectChanged: new Signal(), objectRemoved: new Signal(), + cameraAdded: new Signal(), + cameraRemoved: new Signal(), + helperAdded: new Signal(), helperRemoved: new Signal(), @@ -66,7 +69,7 @@ var Editor = function () { refreshSidebarObject3D: new Signal(), historyChanged: new Signal(), - sceneCamerasChanged: new Signal() + viewportCameraChanged: new Signal() }; @@ -97,6 +100,11 @@ var Editor = function () { this.selected = null; this.helpers = {}; + this.cameras = {}; + this.viewportCamera = this.camera; + + this.addCamera( this.camera ); + }; Editor.prototype = { @@ -147,6 +155,7 @@ Editor.prototype = { if ( child.geometry !== undefined ) scope.addGeometry( child.geometry ); if ( child.material !== undefined ) scope.addMaterial( child.material ); + scope.addCamera( child ); scope.addHelper( child ); } ); @@ -197,6 +206,7 @@ Editor.prototype = { object.traverse( function ( child ) { + scope.removeCamera( child ); scope.removeHelper( child ); } ); @@ -252,6 +262,32 @@ Editor.prototype = { // + addCamera: function ( camera ) { + + if ( camera.isCamera ) { + + this.cameras[ camera.uuid ] = camera; + + this.signals.cameraAdded.dispatch( camera ); + + } + + }, + + removeCamera: function ( camera ) { + + if ( this.cameras[ camera.uuid ] !== undefined ) { + + delete this.cameras[ camera.uuid ]; + + this.signals.cameraRemoved.dispatch( camera ); + + } + + }, + + // + addHelper: function () { var geometry = new THREE.SphereBufferGeometry( 2, 4, 2 ); @@ -381,6 +417,13 @@ Editor.prototype = { }, + setViewportCamera: function ( uuid ) { + + this.viewportCamera = this.cameras[ uuid ]; + this.signals.viewportCameraChanged.dispatch( this.viewportCamera ); + + }, + // select: function ( object ) { diff --git a/editor/js/Sidebar.Settings.js b/editor/js/Sidebar.Settings.js index ec25f4f3b23e47..f4a998639f8b80 100644 --- a/editor/js/Sidebar.Settings.js +++ b/editor/js/Sidebar.Settings.js @@ -72,35 +72,7 @@ Sidebar.Settings = function ( editor ) { themeRow.add( new UI.Text( strings.getKey( 'sidebar/settings/theme' ) ).setWidth( '90px' ) ); themeRow.add( theme ); - container.add( themeRow ); - - // scene camera visible - - var sceneShowCameraRow = new UI.Row(); - container.add( sceneShowCameraRow ); - - var sceneCameraCheckbox = new UI.Checkbox( config.getKey( 'project/renderer/showSceneCameras' ) || false ).onChange( function () { - - config.setKey( 'project/renderer/showSceneCameras', this.getValue() ); - signals.sceneCamerasChanged.dispatch(); - - } ); - - sceneShowCameraRow.add( new UI.Text( strings.getKey( 'sidebar/settings/showSceneCameras' ) ).setWidth( '90px' ), sceneCameraCheckbox ); - - // show helpers - - var showHelpersRow = new UI.Row(); - container.add( showHelpersRow ); - - var showHelpersCheckbox = new UI.Checkbox( config.getKey( 'project/renderer/showHelpers' ) || false ).onChange( function () { - - config.setKey( 'project/renderer/showHelpers', this.getValue() ); - signals.sceneGraphChanged.dispatch(); - - } ); - - showHelpersRow.add( new UI.Text( strings.getKey( 'sidebar/settings/showHelpers' ) ).setWidth( '90px' ), showHelpersCheckbox ); + container.add( themeRow ); container.add( new Sidebar.Settings.Shortcuts( editor ) ); container.add( new Sidebar.Settings.Viewport( editor ) ); diff --git a/editor/js/Strings.js b/editor/js/Strings.js index e8e937b5e1fea1..509293133711b2 100644 --- a/editor/js/Strings.js +++ b/editor/js/Strings.js @@ -242,8 +242,6 @@ var Strings = function ( config ) { 'sidebar/settings/theme': 'Theme', 'sidebar/settings/theme/light': 'light', 'sidebar/settings/theme/dark': 'dark', - 'sidebar/settings/showSceneCameras': 'Cameras', - 'sidebar/settings/showHelpers': 'Helpers', 'sidebar/settings/shortcuts/translate': 'Translate', 'sidebar/settings/shortcuts/rotate': 'Rotate', diff --git a/editor/js/Viewport.Camera.js b/editor/js/Viewport.Camera.js new file mode 100644 index 00000000000000..c8f0f5c521688e --- /dev/null +++ b/editor/js/Viewport.Camera.js @@ -0,0 +1,48 @@ +/** + * @author mrdoob / http://mrdoob.com/ + */ + +Viewport.Camera = function ( editor ) { + + var signals = editor.signals; + + // + + var cameraSelect = new UI.Select(); + cameraSelect.setPosition( 'absolute' ); + cameraSelect.setRight( '10px' ); + cameraSelect.setTop( '10px' ); + cameraSelect.onChange( function () { + + editor.setViewportCamera( this.getValue() ); + + } ); + + signals.cameraAdded.add( update ); + signals.cameraRemoved.add( update ); + + update(); + + // + + function update() { + + var options = {}; + + var cameras = editor.cameras; + + for ( var key in cameras ) { + + var camera = cameras[ key ]; + options[ camera.uuid ] = camera.name; + + } + + cameraSelect.setOptions( options ); + cameraSelect.setValue( editor.viewportCamera.uuid ); + + } + + return cameraSelect; + +}; diff --git a/editor/js/Viewport.js b/editor/js/Viewport.js index abfe190a99443f..24c50b8d08edfa 100644 --- a/editor/js/Viewport.js +++ b/editor/js/Viewport.js @@ -5,12 +5,12 @@ var Viewport = function ( editor ) { var signals = editor.signals; - var config = editor.config; var container = new UI.Panel(); container.setId( 'viewport' ); container.setPosition( 'absolute' ); + container.add( new Viewport.Camera( editor ) ); container.add( new Viewport.Info( editor ) ); // @@ -135,76 +135,6 @@ var Viewport = function ( editor ) { sceneHelpers.add( transformControls ); - // Displaying scene cameras - - var cameras = { - [ camera.uuid ]: 'Main Camera' - }; - - var sceneCameraDisplay = new UI.Row(); - sceneCameraDisplay.setId( 'cameraSelect' ).setDisplay( 'none' ); - document.body.appendChild( sceneCameraDisplay.dom ); - - var cameraSelect = new UI.Select().onChange( render ); - sceneCameraDisplay.add( cameraSelect ); - - signals.objectAdded.add( function ( object ) { - - if ( object !== null ) { - - object.traverse( addCamera ); - cameraSelect.setOptions( cameras ).setValue( camera.uuid ); - sceneCameraDisplay.setDisplay( config.getKey( 'project/renderer/showSceneCameras' ) === true && Object.keys( cameras ).length > 0 ? 'block' : 'none' ); - - } - - } ); - - signals.objectRemoved.add( function ( object ) { - - if ( object !== null ) { - - object.traverse( removeCamera ); - cameraSelect.setOptions( cameras ).setValue( camera.uuid ); - sceneCameraDisplay.setDisplay( config.getKey( 'project/renderer/showSceneCameras' ) === true && Object.keys( cameras ).length > 0 ? 'block' : 'none' ); - - } - - } ); - - signals.sceneCamerasChanged.add( function () { - - var optionSelected = config.getKey( 'project/renderer/showSceneCameras' ) === true; - sceneCameraDisplay.setDisplay( optionSelected && Object.keys( cameras ).length > 0 ? 'block' : 'none' ); - if ( optionSelected === false ) { - - cameraSelect.setValue( camera.uuid ); - render(); - - } - - } ); - - function addCamera( object ) { - - if ( object.isCamera === true ) { - - cameras[ object.uuid ] = object.name; - - } - - } - - function removeCamera( object ) { - - if ( object.isCamera === true ) { - - delete cameras[ object.uuid ]; - - } - - } - // object picking var raycaster = new THREE.Raycaster(); @@ -269,7 +199,7 @@ var Viewport = function ( editor ) { function onMouseDown( event ) { - event.preventDefault(); + // event.preventDefault(); var array = getMousePosition( container.dom, event.clientX, event.clientY ); onDownPosition.fromArray( array ); @@ -570,6 +500,17 @@ var Viewport = function ( editor ) { } ); + signals.viewportCameraChanged.add( function ( viewportCamera ) { + + camera = viewportCamera; + + camera.aspect = editor.camera.aspect; + camera.projectionMatrix.copy( editor.camera.projectionMatrix ); + + render(); + + } ); + // signals.windowResize.add( function () { @@ -622,31 +563,20 @@ var Viewport = function ( editor ) { function render() { - sceneHelpers.updateMatrixWorld(); scene.updateMatrixWorld(); + renderer.render( scene, camera ); - var cam = camera; - var uuid = cameraSelect.getValue(); + if ( renderer instanceof THREE.RaytracingRenderer === false ) { - if ( uuid !== camera.uuid && sceneCameraDisplay.dom.style.display != 'none' ) { + if ( camera === editor.camera ) { - var sceneCamera = scene.getObjectByProperty( 'uuid', uuid ); - if ( sceneCamera !== undefined && sceneCamera.isCamera === true ) { - - cam = sceneCamera; + sceneHelpers.updateMatrixWorld(); + renderer.render( sceneHelpers, camera ); } } - renderer.render( scene, cam ); - - if ( config.getKey( 'project/renderer/showHelpers' ) === true && renderer instanceof THREE.RaytracingRenderer === false ) { - - renderer.render( sceneHelpers, cam ); - - } - } return container;