Editor: Player refactoring.

editor/css/dark.css

@@ -117,6 +117,14 @@ input.Number {
 	bottom: 32px;
 }
 
+#player {
+	position: absolute;
+	top: 32px;
+	left: 0px;
+	right: 300px;
+	bottom: 32px;
+}
+
 #menubar {
 	position: absolute;
 	width: 100%;

editor/css/light.css

@@ -91,6 +91,14 @@ input.Number {
 	bottom: 32px;
 }
 
+#player {
+	position: absolute;
+	top: 32px;
+	left: 0px;
+	right: 300px;
+	bottom: 32px;
+}
+
 #menubar {
 	position: absolute;
 	width: 100%;

editor/index.html

@@ -86,6 +86,9 @@
 			var viewport = new Viewport( editor ).setId( 'viewport' );
 			document.body.appendChild( viewport.dom );
 
+			var player = new Player( editor ).setId( 'player' );
+			document.body.appendChild( player.dom );
+
 			var toolbar = new Toolbar( editor ).setId( 'toolbar' )
 			document.body.appendChild( toolbar.dom );
 

editor/js/Editor.js

@@ -4,6 +4,11 @@ var Editor = function () {
 
 	this.signals = {
 
+		// player
+
+		startPlayer: new SIGNALS.Signal(),
+		stopPlayer: new SIGNALS.Signal(),
+
 		// actions
 
 		playAnimation: new SIGNALS.Signal(),
@@ -46,6 +51,7 @@ var Editor = function () {
 	this.storage = new Storage();
 	this.loader = new Loader( this );
 
+	this.camera = new THREE.PerspectiveCamera( 50, 1, 1, 5000 );
 	this.scene = new THREE.Scene();
 	this.scene.name = 'Scene';
 	

editor/js/Menubar.Play.js

@@ -1,25 +1,30 @@
 Menubar.Play = function ( editor ) {
 
+	var signals = editor.signals;
+
 	var container = new UI.Panel();
 	container.setClass( 'menu' );
 
-	var player = new Player();
+	var isPlaying = false;
 
 	var title = new UI.Panel();
 	title.setClass( 'title' );
 	title.setTextContent( 'Play' );
 	title.onClick( function () {
 
-		player.load( editor.scene.toJSON() );
-		player.setSize( 800, 600 );
-		player.play();
+		if ( isPlaying === false ) {
+
+			isPlaying = true;
+			title.setTextContent( 'Stop' );
+			signals.startPlayer.dispatch( editor.scene.toJSON() );
+
+		} else {
+
+			isPlaying = false;
+			title.setTextContent( 'Play' );
+			signals.stopPlayer.dispatch();
 
-		var popup = window.open( '', 'preview', 'width=800,height=600' );
-		popup.addEventListener( 'beforeunload', function () {
-			player.stop();
-		} );
-		popup.document.body.style.margin = 0;
-		popup.document.body.appendChild( player.dom );
+		}
 
 	} );
 	container.add( title );

editor/js/Player.js

@@ -1,21 +1,33 @@
-var Player = function () {
+var Player = function ( editor ) {
 
-	var camera = new THREE.PerspectiveCamera( 50, 1, 1, 1000 );
-	camera.position.set( 500, 250, 500 );
-	camera.lookAt( new THREE.Vector3() );
+	var signals = editor.signals;
 
-	var loader = new THREE.ObjectLoader();
-	var scene = new THREE.Scene();
+	var container = new UI.Panel();
+	container.setPosition( 'absolute' );
+	container.setDisplay( 'none' );
 
-	var scripts;
+	//
 
-	var renderer = new THREE.WebGLRenderer( { antialias: true } );
+	var camera, scene, renderer;
+	var scripts;
 
 	//
 
 	var load = function ( json ) {
 
-		scene = loader.parse( json );
+		if ( renderer !== undefined ) {
+
+			container.dom.removeChild( renderer.domElement );
+
+		}
+
+		renderer = new THREE.WebGLRenderer( { antialias: true } );
+		renderer.setSize( container.dom.offsetWidth, container.dom.offsetHeight );
+		container.dom.appendChild( renderer.domElement );
+
+		camera = editor.camera.clone();
+
+		scene = new THREE.ObjectLoader().parse( json );
 
 		//
 
@@ -39,7 +51,9 @@ var Player = function () {
 	var play = function () {
 
 		request = requestAnimationFrame( play );
+
 		update();
+		render();
 
 	};
 
@@ -49,12 +63,9 @@ var Player = function () {
 
 	};
 
-	var setSize = function ( width, height ) {
-
-		camera.aspect = width / height;
-		camera.updateProjectionMatrix();
+	var render = function () {
 
-		renderer.setSize( width, height );
+		renderer.render( scene, camera );
 
 	};
 
@@ -66,16 +77,27 @@ var Player = function () {
 
 		}
 
-		renderer.render( scene, camera );
+		render();
 
 	};
 
-	return {
-		dom: renderer.domElement,
-		load: load,
-		play: play,
-		stop: stop,
-		setSize: setSize
-	}
+	signals.startPlayer.add( function ( json ) {
+
+		container.setDisplay( '' );
+
+		load( json );
+		play();
+
+	} );
+
+	signals.stopPlayer.add( function () {
+
+		container.setDisplay( 'none' );
+
+		stop();
+
+	} );
+
+	return container;
 
 };

editor/js/Viewport.js

@@ -26,7 +26,7 @@ var Viewport = function ( editor ) {
 
 	//
 
-	var camera = new THREE.PerspectiveCamera( 50, 1, 1, 5000 );
+	var camera = editor.camera;
 	camera.position.fromArray( editor.config.getKey( 'camera/position' ) );
 	camera.lookAt( new THREE.Vector3().fromArray( editor.config.getKey( 'camera/target' ) ) );