Editor: Added Examples.

editor/examples/fountain.app.json

@@ -0,0 +1,99 @@
+{
+	"camera": {
+		"metadata": {
+			"version": 4.3,
+			"type": "Object",
+			"generator": "ObjectExporter"
+		},
+		"object": {
+			"uuid": "D722B468-8D40-4CAB-82D6-944D2D5A8D35",
+			"type": "PerspectiveCamera",
+			"name": "Camera",
+			"fov": 50,
+			"aspect": 1.2237762237762237,
+			"near": 0.1,
+			"far": 100000,
+			"matrix": [0.7071067690849304,-2.468905080377226e-9,-0.7071068286895752,0,-0.2357022613286972,0.9428090453147888,-0.235702246427536,0,0.6666666865348816,0.3333333134651184,0.6666666269302368,0,500,250,500,1]
+		}
+	},
+	"scene": {
+		"metadata": {
+			"version": 4.3,
+			"type": "Object",
+			"generator": "ObjectExporter"
+		},
+		"geometries": [
+			{
+				"uuid": "5009F17C-E9D3-4D0E-82A6-2E23159128FB",
+				"type": "PlaneGeometry",
+				"width": 600,
+				"height": 600,
+				"widthSegments": 1,
+				"heightSegments": 1
+			},
+			{
+				"uuid": "8693E7B2-0009-4C4C-94C5-8E031557AEC2",
+				"type": "BoxGeometry",
+				"width": 4,
+				"height": 4,
+				"depth": 4,
+				"widthSegments": 1,
+				"heightSegments": 1,
+				"depthSegments": 1
+			}],
+		"materials": [
+			{
+				"uuid": "6EDB0369-7E11-4B0F-BF98-4BD761846D65",
+				"type": "MeshPhongMaterial",
+				"color": 16777215,
+				"ambient": 16777215,
+				"emissive": 0,
+				"specular": 1118481,
+				"shininess": 30
+			},
+			{
+				"uuid": "D586E672-03FC-4C82-9D6E-CCCF899DDDB1",
+				"type": "MeshBasicMaterial",
+				"color": 16777215
+			}],
+		"object": {
+			"uuid": "3741222A-BD8F-401C-A5D2-5A907E891896",
+			"type": "Scene",
+			"name": "Scene",
+			"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],
+			"children": [
+				{
+					"uuid": "05B57416-1BE5-4A96-BB05-9D9CD112D52B",
+					"type": "Mesh",
+					"name": "Ground",
+					"geometry": "5009F17C-E9D3-4D0E-82A6-2E23159128FB",
+					"material": "6EDB0369-7E11-4B0F-BF98-4BD761846D65",
+					"matrix": [1,0,0,0,0,0.0007962886593304574,-0.9999997019767761,0,0,0.9999997019767761,0.0007962886593304574,0,0,-2,0,1]
+				},
+				{
+					"uuid": "9DFA44C6-C85A-4F2F-9252-E9564C2785C5",
+					"type": "Mesh",
+					"name": "Particle",
+					"geometry": "8693E7B2-0009-4C4C-94C5-8E031557AEC2",
+					"material": "D586E672-03FC-4C82-9D6E-CCCF899DDDB1",
+					"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]
+				},
+				{
+					"uuid": "40E5CDA4-0E39-4265-9293-3E9EC3207F61",
+					"type": "PointLight",
+					"name": "PointLight",
+					"color": 16777215,
+					"intensity": 10,
+					"distance": 0,
+					"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]
+				}]
+		}
+	},
+	"scripts": {
+		"3741222A-BD8F-401C-A5D2-5A907E891896": [
+			{
+				"name": "Particle Fountain",
+				"source": "/**\n * @author mrdoob / http://mrdoob.com/\n */\n\nvar original = scene.getObjectByName( 'Particle' );\n\nvar particles = [];\n\nreturn {\n\tupdate: function ( event ) {\n\n\t\tif ( particles.length < 200 ) {\n\n\t\t\tvar velocity = new THREE.Vector3();\n\t\t\tvelocity.x = Math.random() * 10 - 5;\n\t\t\tvelocity.y = Math.random() * 10 + 10;\n\t\t\tvelocity.z = Math.random() * 10 - 5;\n\n\t\t\tvar particle = original.clone();\n\t\t\tparticle.userData.velocity = velocity;\n\t\t\tparticles.push( particle );\n\n\t\t\tscene.add( particle );\n\n\t\t}\n\n\t\tfor ( var i = 0; i < particles.length; i ++ ) {\n\n\t\t\tvar particle = particles[ i ];\n\n\t\t\tvar velocity = particle.userData.velocity;\n\n\t\t\tvelocity.y -= 0.98;\n\n\t\t\tparticle.position.add( velocity );\n\n\t\t\tif ( particle.position.y < 0 ) {\n\n\t\t\t\tparticle.position.y = 0;\n\n\t\t\t\tvelocity.y = - velocity.y;\n\t\t\t\tvelocity.multiplyScalar( 0.6 );\n\n\t\t\t}\n\n\t\t}\n\n\t}\n};"
+			}]
+	}
+}

editor/examples/pong.app.json

@@ -0,0 +1,137 @@
+{
+	"camera": {
+		"metadata": {
+			"version": 4.3,
+			"type": "Object",
+			"generator": "ObjectExporter"
+		},
+		"object": {
+			"uuid": "3A99B129-6210-4568-910C-CA621D987060",
+			"type": "PerspectiveCamera",
+			"name": "Camera",
+			"fov": 50,
+			"aspect": 1.2237762237762237,
+			"near": 0.1,
+			"far": 100000,
+			"matrix": [0.9522120356559753,4.209433246415983e-9,-0.3054378032684326,0,-0.17742955684661865,0.8139731884002686,-0.553142249584198,0,0.24861818552017212,0.5809023976325989,0.7750750780105591,0,186.46363830566406,435.67681884765625,581.3063354492188,1]
+		}
+	},
+	"scene": {
+		"metadata": {
+			"version": 4.3,
+			"type": "Object",
+			"generator": "ObjectExporter"
+		},
+		"geometries": [
+			{
+				"uuid": "77B20ED1-2871-4B14-A652-8F823B2A817E",
+				"type": "PlaneGeometry",
+				"width": 600,
+				"height": 400,
+				"widthSegments": 1,
+				"heightSegments": 1
+			},
+			{
+				"uuid": "7ADE0D01-A56A-4D33-869A-6C360E096EF7",
+				"type": "BoxGeometry",
+				"width": 10,
+				"height": 10,
+				"depth": 10,
+				"widthSegments": 1,
+				"heightSegments": 1,
+				"depthSegments": 1
+			},
+			{
+				"uuid": "E8C064B6-3454-4739-9E02-3B07B8E70B4C",
+				"type": "BoxGeometry",
+				"width": 20,
+				"height": 20,
+				"depth": 100,
+				"widthSegments": 1,
+				"heightSegments": 1,
+				"depthSegments": 1
+			}],
+		"materials": [
+			{
+				"uuid": "7EDF7C08-6325-418A-BBAB-89341C694730",
+				"type": "MeshPhongMaterial",
+				"color": 16777215,
+				"ambient": 16777215,
+				"emissive": 0,
+				"specular": 16777215,
+				"shininess": 30
+			},
+			{
+				"uuid": "B1CAF098-FE36-45E1-BEBE-8D6AC04821CC",
+				"type": "MeshPhongMaterial",
+				"color": 16711680,
+				"ambient": 16777215,
+				"emissive": 0,
+				"specular": 1118481,
+				"shininess": 30
+			},
+			{
+				"uuid": "FBDBE66D-B613-4741-802D-5AE1DE07DE46",
+				"type": "MeshPhongMaterial",
+				"color": 2752767,
+				"ambient": 16777215,
+				"emissive": 0,
+				"specular": 1118481,
+				"shininess": 30
+			}],
+		"object": {
+			"uuid": "31517222-A9A7-4EAF-B5F6-60751C0BABA3",
+			"type": "Scene",
+			"name": "Scene",
+			"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],
+			"children": [
+				{
+					"uuid": "B47D0BFC-D63A-4CBB-985E-9C4DBDF086E4",
+					"type": "Mesh",
+					"name": "Ground",
+					"geometry": "77B20ED1-2871-4B14-A652-8F823B2A817E",
+					"material": "7EDF7C08-6325-418A-BBAB-89341C694730",
+					"matrix": [1,0,0,0,0,0.0007962126983329654,-0.9999997019767761,0,0,0.9999997019767761,0.0007962126983329654,0,0,-10,0,1]
+				},
+				{
+					"uuid": "CE13E58A-4E8B-4F72-9E2E-7DE57C58F989",
+					"type": "Mesh",
+					"name": "Ball",
+					"geometry": "7ADE0D01-A56A-4D33-869A-6C360E096EF7",
+					"material": "B1CAF098-FE36-45E1-BEBE-8D6AC04821CC",
+					"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]
+				},
+				{
+					"uuid": "2AAEA3AA-EC45-492B-B450-10473D1EC6C5",
+					"type": "Mesh",
+					"name": "Pad 1",
+					"geometry": "E8C064B6-3454-4739-9E02-3B07B8E70B4C",
+					"material": "FBDBE66D-B613-4741-802D-5AE1DE07DE46",
+					"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,-240,0,0,1]
+				},
+				{
+					"uuid": "F1DD46A7-6584-4A37-BC76-852C3911077E",
+					"type": "Mesh",
+					"name": "Pad 2",
+					"geometry": "E8C064B6-3454-4739-9E02-3B07B8E70B4C",
+					"material": "FBDBE66D-B613-4741-802D-5AE1DE07DE46",
+					"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,240,0,0,1]
+				},
+				{
+					"uuid": "C62AAE9F-9E51-46A5-BD2B-71BA804FC0B3",
+					"type": "DirectionalLight",
+					"name": "DirectionalLight 3",
+					"color": 16777215,
+					"intensity": 1.5,
+					"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,100,200,150,1]
+				}]
+		}
+	},
+	"scripts": {
+		"31517222-A9A7-4EAF-B5F6-60751C0BABA3": [
+			{
+				"name": "Game logic",
+				"source": "/**\n * @author mrdoob / http://mrdoob.com/\n */\n\nvar ball = scene.getObjectByName( 'Ball' );\n\nvar position = ball.position;\n\nvar direction = new THREE.Vector3();\ndirection.x = Math.random() - 0.5;\ndirection.z = Math.random() - 0.5;\ndirection.normalize();\ndirection.multiplyScalar( 8 );\n\n//\n\nvar pad1 = scene.getObjectByName( 'Pad 1' );\nvar pad2 = scene.getObjectByName( 'Pad 2' );\n\nreturn {\n\tmousemove: function ( event ) {\n\t\tpad1.position.z = ( event.clientX / window.innerWidth ) * 300 - 150;\n\t\tpad2.position.z = - pad1.position.z;\n\t},\n\tupdate: function ( event ) {\n\n\t\tif ( position.x < -300 || position.x > 300 )\n\t\t\tdirection.x = - direction.x;\n\n\t\tif ( position.z < -200 || position.z > 200 )\n\t\t\tdirection.z = - direction.z;\n\n\t\tposition.add( direction );\n\n\t}\n};"
+			}]
+	}
+}

editor/index.html

@@ -56,6 +56,7 @@
 		<script src="js/Menubar.Add.js"></script>
 		<script src="js/Menubar.Play.js"></script>
 		<script src="js/Menubar.View.js"></script>
+		<script src="js/Menubar.Examples.js"></script>
 		<script src="js/Menubar.Help.js"></script>
 		<script src="js/Menubar.Status.js"></script>
 		<script src="js/Sidebar.js"></script>
@@ -212,11 +213,6 @@
 					case 8: // prevent browser back
 						event.preventDefault();
 						break;
-					case 46: // delete
-						var parent = editor.selected.parent;
-						editor.removeObject( editor.selected );
-						editor.select( parent );
-						break;
 
 				}
 

editor/js/Editor.js

@@ -94,16 +94,19 @@ Editor.prototype = {
 
 	},
 
+	/*
 	showDialog: function ( value ) {
 
 		this.signals.showDialog.dispatch( value );
 
 	},
+	*/
 
 	//
 
 	setScene: function ( scene ) {
 
+		this.scene.uuid = scene.uuid;
 		this.scene.name = scene.name;
 		this.scene.userData = JSON.parse( JSON.stringify( scene.userData ) );
 
@@ -155,8 +158,6 @@ Editor.prototype = {
 
 		if ( object.parent === undefined ) return; // avoid deleting the camera or scene
 
-		if ( confirm( 'Delete ' + object.name + '?' ) === false ) return;
-
 		var scope = this;
 
 		object.traverse( function ( child ) {
@@ -360,6 +361,28 @@ Editor.prototype = {
 
 	},
 
+	clear: function () {
+
+		this.camera.position.set( 500, 250, 500 );
+		this.camera.lookAt( new THREE.Vector3() );
+
+		var objects = this.scene.children;
+
+		while ( objects.length > 0 ) {
+
+			this.removeObject( objects[ 0 ] );
+
+		}
+
+		this.geometries = {};
+		this.materials = {};
+		this.textures = {};
+		this.scripts = {};
+
+		this.deselect();
+
+	},
+
 	//
 
 	fromJSON: function ( json ) {

editor/js/Menubar.Edit.js

@@ -41,9 +41,13 @@ Menubar.Edit = function ( editor ) {
 	option.setClass( 'option' );
 	option.setTextContent( 'Delete' );
 	option.onClick( function () {
+	
+		var object = editor.selected;
+
+		if ( confirm( 'Delete ' + object.name + '?' ) === false ) return;
 
-		var parent = editor.selected.parent;
-		editor.removeObject( editor.selected );
+		var parent = object.parent;
+		editor.removeObject( object );
 		editor.select( parent );
 
 	} );

editor/js/Menubar.Examples.js

@@ -0,0 +1,59 @@
+/**
+ * @author mrdoob / http://mrdoob.com/
+ */
+
+Menubar.Examples = function ( editor ) {
+
+	var container = new UI.Panel();
+	container.setClass( 'menu' );
+
+	var title = new UI.Panel();
+	title.setClass( 'title' );
+	title.setTextContent( 'Examples' );
+	container.add( title );
+
+	var options = new UI.Panel();
+	options.setClass( 'options' );
+	container.add( options );
+
+	// Examples
+
+	var items = [
+		{ title: 'Particle Fountain', file: 'fountain.app.json' },
+		{ title: 'Pong', file: 'pong.app.json' }
+	];
+
+	var loader = new THREE.XHRLoader();
+
+	for ( var i = 0; i < items.length; i ++ ) {
+
+		( function ( i ) {
+
+			var item = items[ i ];
+
+			var option = new UI.Panel();
+			option.setClass( 'option' );
+			option.setTextContent( item.title );
+			option.onClick( function () {
+
+				if ( confirm( 'Any unsaved data will be lost. Are you sure?' ) ) {
+
+					loader.load( 'examples/' + item.file, function ( text ) {
+
+						editor.clear();
+						editor.fromJSON( JSON.parse( text ) );
+
+					} );
+
+				}
+
+			} );
+			options.add( option );
+
+		} )( i )
+
+	}
+
+	return container;
+
+};

editor/js/Menubar.File.js

@@ -23,18 +23,9 @@ Menubar.File = function ( editor ) {
 	option.setTextContent( 'New' );
 	option.onClick( function () {
 
-		if ( confirm( 'Are you sure?' ) ) {
+		if ( confirm( 'Any unsaved data will be lost. Are you sure?' ) ) {
 
-			editor.config.setKey(
-				'camera/position', [ 500, 250, 500 ],
-				'camera/target', [ 0, 0, 0 ]
-			);
-
-			editor.storage.clear( function () {
-
-				location.href = location.pathname;
-
-			} );
+			editor.clear();
 
 		}
 

editor/js/Menubar.js

@@ -11,6 +11,7 @@ var Menubar = function ( editor ) {
 	container.add( new Menubar.Edit( editor ) );
 	container.add( new Menubar.Add( editor ) );
 	container.add( new Menubar.Play( editor ) );
+	container.add( new Menubar.Examples( editor ) );
 	container.add( new Menubar.View( editor ) );
 	container.add( new Menubar.Help( editor ) );
 

editor/js/Sidebar.Script.js

@@ -27,7 +27,7 @@ Sidebar.Script = function ( editor ) {
 	newScript.setMarginLeft( '5px' );
 	newScript.onClick( function () {
 
-		var script = new UI.ScriptEditor();
+		var script = new UI.ScriptEditor( editor );
 		script.setValue( { name: '', source: 'return {\n\tupdate: function ( event ) {}\n};' } );
 		script.onChange( function () {
 
@@ -59,7 +59,7 @@ Sidebar.Script = function ( editor ) {
 
 				for ( var i = 0; i < sources.length; i ++ ) {
 
-					var script = new UI.ScriptEditor();
+					var script = new UI.ScriptEditor( editor );
 					script.setValue( sources[ i ] );
 					script.onChange( function () {
 

editor/js/libs/ui.editor.js

@@ -2,7 +2,7 @@
  * @author mrdoob / http://mrdoob.com/
  */
 
-UI.ScriptEditor = function () {
+UI.ScriptEditor = function ( editor ) {
 
 	UI.Panel.call( this );
 
@@ -42,6 +42,9 @@ UI.ScriptEditor = function () {
 
 	this.add( new UI.Break() );
 
+	var object = editor.selected.clone();
+	var scene = editor.scene.clone();
+
 	var timeout;
 
 	var textarea = new UI.TextArea();
@@ -52,14 +55,16 @@ UI.ScriptEditor = function () {
 
 		clearTimeout( timeout );
 
+		textarea.dom.classList.remove( 'success' );
+		textarea.dom.classList.remove( 'fail' );
+
 		timeout = setTimeout( function () {
 
-			var object = editor.selected;
 			var source = textarea.getValue();
 
 			try {
 
-				( new Function( 'scene', source ).bind( object.clone() ) )( new THREE.Scene() );
+				( new Function( 'scene', source ).bind( object ) )( scene );
 
 				textarea.dom.classList.add( 'success' );
 				textarea.dom.classList.remove( 'fail' );