Editor: Refactored viewport camera code.

yeticgi · Mar 27, 2019 · ec73e0c · ec73e0c
1 parent adc32cf
commit ec73e0c
Show file tree

Hide file tree

Showing 9 changed files with 115 additions and 160 deletions.
diff --git 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
@@ -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
@@ -143,6 +143,7 @@
 		<script src="js/Strings.js"></script>
 		<script src="js/Toolbar.js"></script>
 		<script src="js/Viewport.js"></script>
+		<script src="js/Viewport.Camera.js"></script>
 		<script src="js/Viewport.Info.js"></script>
 
 		<script src="js/Command.js"></script>

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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;
+
+};