Editor: Added project title.

editor/js/Config.js

@@ -8,13 +8,15 @@ var Config = function ( name ) {
 		'autosave': true,
 		'theme': 'css/light.css',
 
+		'project/title': '',
+		'project/editable': false,
+
 		'project/renderer': 'WebGLRenderer',
 		'project/renderer/antialias': true,
 		'project/renderer/gammaInput': false,
 		'project/renderer/gammaOutput': false,
 		'project/renderer/shadows': true,
 
-		'project/editable': false,
 		'project/vr': false,
 
 		'settings/history': false

editor/js/Menubar.File.js

@@ -14,6 +14,8 @@ Menubar.File = function ( editor ) {
 
 	//
 
+	var config = editor.config;
+
 	var container = new UI.Panel();
 	container.setClass( 'menu' );
 
@@ -266,15 +268,19 @@ Menubar.File = function ( editor ) {
 
 		//
 
+		var title = config.getKey( 'project/title' );
+
 		var manager = new THREE.LoadingManager( function () {
 
-			save( zip.generate( { type: 'blob' } ), 'download.zip' );
+			save( zip.generate( { type: 'blob' } ), ( title !== '' ? title : 'untitled' ) + '.zip' );
 
 		} );
 
 		var loader = new THREE.FileLoader( manager );
 		loader.load( 'js/libs/app/index.html', function ( content ) {
 
+			content = content.replace( '<!-- title -->', title );
+
 			var includes = [];
 
 			if ( vr ) {
@@ -287,12 +293,12 @@ Menubar.File = function ( editor ) {
 
 			var editButton = '';
 
-			if ( editor.config.getKey( 'project/editable' ) ) {
+			if ( config.getKey( 'project/editable' ) ) {
 
 				editButton = `
 			var button = document.createElement( 'a' );
 			button.href = 'https://threejs.org/editor/#file=' + location.href.split( '/' ).slice( 0, - 1 ).join( '/' ) + '/app.json';
-			button.style.cssText = 'position: absolute; bottom: 20px; right: 20px; padding: 7px 10px 6px 10px; color: #fff; border: 1px solid #fff; text-decoration: none;';
+			button.style.cssText = 'position: absolute; bottom: 20px; right: 20px; padding: 12px 14px; color: #fff; border: 1px solid #fff; border-radius: 4px; text-decoration: none;';
 			button.target = '_blank';
 			button.textContent = 'EDIT';
 			document.body.appendChild( button );

editor/js/Sidebar.Project.js

@@ -21,7 +21,49 @@ Sidebar.Project = function ( editor ) {
 	container.setBorderTop( '0' );
 	container.setPaddingTop( '20px' );
 
-	// class
+	// Title
+
+	var titleRow = new UI.Row();
+	var title = new UI.Input( config.getKey( 'project/title' ) ).setLeft( '100px' ).onChange( function () {
+
+		config.setKey( 'project/title', this.getValue() );
+
+	} );
+
+	titleRow.add( new UI.Text( 'Title' ).setWidth( '90px' ) );
+	titleRow.add( title );
+
+	container.add( titleRow );
+
+	// Editable
+
+	var editableRow = new UI.Row();
+	var editable = new UI.Checkbox( config.getKey( 'project/editable' ) ).setLeft( '100px' ).onChange( function () {
+
+		config.setKey( 'project/editable', this.getValue() );
+
+	} );
+
+	editableRow.add( new UI.Text( 'Editable' ).setWidth( '90px' ) );
+	editableRow.add( editable );
+
+	container.add( editableRow );
+
+	// VR
+
+	var vrRow = new UI.Row();
+	var vr = new UI.Checkbox( config.getKey( 'project/vr' ) ).setLeft( '100px' ).onChange( function () {
+
+		config.setKey( 'project/vr', this.getValue() );
+
+	} );
+
+	vrRow.add( new UI.Text( 'VR' ).setWidth( '90px' ) );
+	vrRow.add( vr );
+
+	container.add( vrRow );
+
+	// Renderer
 
 	var options = {};
 
@@ -55,7 +97,7 @@ Sidebar.Project = function ( editor ) {
 
 	}
 
-	// antialiasing
+	// Renderer / Antialias
 
 	var rendererPropertiesRow = new UI.Row().setMarginLeft( '90px' );
 
@@ -67,7 +109,7 @@ Sidebar.Project = function ( editor ) {
 	} );
 	rendererPropertiesRow.add( rendererAntialias );
 
-	// shadow
+	// Renderer / Shadows
 
 	var rendererShadows = new UI.THREE.Boolean( config.getKey( 'project/renderer/shadows' ), 'shadows' ).onChange( function () {
 
@@ -79,7 +121,7 @@ Sidebar.Project = function ( editor ) {
 
 	rendererPropertiesRow.add( new UI.Break() );
 
-	// gamma input
+	// Renderer / Gamma input
 
 	var rendererGammaInput = new UI.THREE.Boolean( config.getKey( 'project/renderer/gammaInput' ), 'γ input' ).onChange( function () {
 
@@ -89,7 +131,7 @@ Sidebar.Project = function ( editor ) {
 	} );
 	rendererPropertiesRow.add( rendererGammaInput );
 
-	// gamma output
+	// Renderer / Gamma output
 
 	var rendererGammaOutput = new UI.THREE.Boolean( config.getKey( 'project/renderer/gammaOutput' ), 'γ output' ).onChange( function () {
 
@@ -101,34 +143,6 @@ Sidebar.Project = function ( editor ) {
 
 	container.add( rendererPropertiesRow );
 
-	// Editable
-
-	var editableRow = new UI.Row();
-	var editable = new UI.Checkbox( config.getKey( 'project/editable' ) ).setLeft( '100px' ).onChange( function () {
-
-		config.setKey( 'project/editable', this.getValue() );
-
-	} );
-
-	editableRow.add( new UI.Text( 'Editable' ).setWidth( '90px' ) );
-	editableRow.add( editable );
-
-	container.add( editableRow );
-
-	// VR
-
-	var vrRow = new UI.Row();
-	var vr = new UI.Checkbox( config.getKey( 'project/vr' ) ).setLeft( '100px' ).onChange( function () {
-
-		config.setKey( 'project/vr', this.getValue() );
-
-	} );
-
-	vrRow.add( new UI.Text( 'VR' ).setWidth( '90px' ) );
-	vrRow.add( vr );
-
-	container.add( vrRow );
-
 	//
 
 	function updateRenderer() {

editor/js/libs/app/index.html

 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js</title>
+		<title><!-- title --></title>
 		<meta charset="utf-8">
 		<meta name="generator" content="Three.js Editor">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<style>
 			body {
-				font-family: Helvetica, Arial, sans-serif;
-				font-size: 12px;
+				font-family: sans-serif;
+				font-size: 13px;
 				background-color: #000;
 				margin: 0px;
 				overflow: hidden;