Domovská stránka Prehľadávať Pomoc
Prihlásiť sa
javascript
/
three.js
zrkadlo https://github.com/tazdij/three.js.git
2
0
Fork 0
Súbory Issues 0 Wiki
Prechádzať zdrojové kódy

Editor: Scripting working again.

Mr.doob 10 rokov pred
rodič
037cccf05f
commit
7431f1a3e0
8 zmenil súbory, kde vykonal 133 pridanie a 113 odobranie
Rozdelené zobrazenie Ukázať štatistiku rozdielnych dát
  1. 2 5
      editor/index.html
  2. 46 1
      editor/js/Editor.js
  3. 14 41
      editor/js/Menubar.File.js
  4. 1 1
      editor/js/Menubar.Play.js
  5. 2 3
      editor/js/Player.js
  6. 23 1
      editor/js/Sidebar.Script.Editor.js
  7. 0 14
      editor/js/Sidebar.Script.js
  8. 45 47
      editor/js/libs/app.js

+ 2 - 5
editor/index.html
Zobraziť súbor 

@@ -123,10 +123,7 @@
 
 
 					if ( state !== undefined ) {
 
 
-						var loader = new THREE.ObjectLoader();
 
-						var scene = loader.parse( state );
 
-
 
-						editor.setScene( scene );
 
+						editor.fromJSON( state );
 
 
 					}
 
 
@@ -160,7 +157,7 @@
 
 
 						timeout = setTimeout( function () {
 
 
-							editor.storage.set( editor.scene.toJSON() );
 
+							editor.storage.set( editor.toJSON() );
 
 
 							editor.signals.savingFinished.dispatch();

+ 46 - 1
editor/js/Editor.js
Zobraziť súbor 

@@ -74,7 +74,7 @@ var Editor = function () {
 
 	this.geometries = {};
 
 	this.materials = {};
 
 	this.textures = {};
 
-	// this.scripts = {};
 
+	this.scripts = {};
 
 
 	this.selected = null;
 
 	this.helpers = {};
 
@@ -355,6 +355,51 @@ Editor.prototype = {
 
 
 		this.focus( this.scene.getObjectById( id, true ) );
 
 
+	},
 
+
 
+	//
 
+
 
+	fromJSON: function ( json ) {
 
+
 
+		var loader = new THREE.ObjectLoader();
 
+
 
+		// backwards
 
+
 
+		if ( json.scene === undefined ) {
 
+
 
+			var scene = loader.parse( json );
 
+
 
+			this.setScene( scene );
 
+
 
+			return;
 
+
 
+		}
 
+
 
+		// TODO: Clean this up somehow
 
+
 
+		var camera = loader.parse( json.camera );
 
+
 
+		this.camera.position.copy( camera.position );
 
+		this.camera.rotation.copy( camera.rotation );
 
+		this.camera.aspect = camera.aspect;
 
+		this.camera.near = camera.near;
 
+		this.camera.far = camera.far;
 
+		
+		this.setScene( loader.parse( json.scene ) );
 
+		this.scripts = json.scripts;
 
+
 
+	},
 
+
 
+	toJSON: function () {
 
+
 
+		return {
 
+
 
+			camera: this.camera.toJSON(),
 
+			scene: this.scene.toJSON(),
 
+			scripts: this.scripts
 
+
 
+		};
 
+
 
 	}
 
 
 }

+ 14 - 41
editor/js/Menubar.File.js
Zobraziť súbor 

@@ -213,48 +213,21 @@ Menubar.File = function ( editor ) {
 
 			'	</head>',
 
 			'	<body ontouchstart="">',
 
 			'		<script src="js/three.min.js"></script>',
 
-			'		<script src="js/OrbitControls.js"></script>',
 
+			'		<script src="js/app.js"></script>',
 
 			'		<script>',
 
 			'',
 
-			'			var camera, controls, scene, renderer;',
 
+			'			var loader = new THREE.XHRLoader();',
 
+			'			loader.load( \'app.json\', function ( text ) {',
 
 			'',
 
-			'			var loader = new THREE.ObjectLoader();',
 
-			'			loader.load( \'scene.json\', function ( object ) {',
 
+			'				var player = new APP.Player();',
 
+			'				player.load( JSON.parse( text ) );',
 
+			'				player.setSize( window.innerWidth, window.innerHeight );',
 
+			'				player.play();',
 
 			'',
 
-			'				scene = object;',
 
-			'',
 
-			'				camera = new THREE.PerspectiveCamera( ' + camera.fov + ', 1, ' + camera.near + ', ' + camera.far + ' );',
 
-			'				camera.position.set( ' + camera.position.x + ', ' + camera.position.y + ', ' + camera.position.z + ' );',
 
-			'				camera.rotation.set( ' + camera.rotation.x + ', ' + camera.rotation.y + ', ' + camera.rotation.z + ' );',
 
-			'',
 
-			'				controls = new THREE.OrbitControls( camera );',
 
-			'				controls.addEventListener( \'change\', render );',
 
-			'',
 
-			'				renderer = new THREE.WebGLRenderer();',
 
-			'				renderer.setSize( window.innerWidth, window.innerHeight );',
 
-			'				document.body.appendChild( renderer.domElement );',
 
-			'',
 
-			'				camera.aspect = window.innerWidth / window.innerHeight;',
 
-			'				camera.updateProjectionMatrix();',
 
-			'',
 
-			'				animate();',
 
-			'				render();',
 
+			'				document.body.appendChild( player.dom );',
 
 			'',
 
 			'			} );',
 
 			'',
 
-			'			var render = function () {',
 
-			'',
 
-			'				renderer.render( scene, camera );',
 
-			'',
 
-			'			};',
 
-			'',
 
-			'			var animate = function () {',
 
-			'',
 
-			'				requestAnimationFrame( animate );',
 
-			'				controls.update();',
 
-			'',
 
-			'			};',
 
-			'',
 
 			'		</script>',
 
 			'	</body>',
 
 			'</html>'
 
@@ -263,11 +236,11 @@ Menubar.File = function ( editor ) {
 
 
 		//
 
 
-		var output = editor.scene.toJSON();
 
+		var output = editor.toJSON();
 
 		output = JSON.stringify( output, null, '\t' );
 
 		output = output.replace( /[\n\t]+([\d\.e\-\[\]]+)/g, '$1' );
 
 
-		zip.file( 'scene.json', output );
 
+		zip.file( 'app.json', output );
 
 
 		//
 
 
@@ -278,14 +251,14 @@ Menubar.File = function ( editor ) {
 
 		} );
 
 
 		var loader = new THREE.XHRLoader( manager );
 
-		loader.load( '../build/three.min.js', function ( content ) {
 
+		loader.load( 'js/libs/app.js', function ( content ) {
 
 
-			zip.file( 'js/three.min.js', content );
 
+			zip.file( 'js/app.js', content );
 
 
 		} );
 
-		loader.load( '../examples/js/controls/OrbitControls.js', function ( content ) {
 
+		loader.load( '../build/three.min.js', function ( content ) {
 
 
-			zip.file( 'js/OrbitControls.js', content );
 
+			zip.file( 'js/three.min.js', content );
 
 
 		} );

+ 1 - 1
editor/js/Menubar.Play.js
Zobraziť súbor 

@@ -20,7 +20,7 @@ Menubar.Play = function ( editor ) {
 
 
 			isPlaying = true;
 
 			title.setTextContent( 'Stop' );
 
-			signals.startPlayer.dispatch( editor.scene.toJSON() );
 
+			signals.startPlayer.dispatch();
 
 
 		} else {

+ 2 - 3
editor/js/Player.js
Zobraziť súbor 

@@ -15,12 +15,11 @@ var Player = function ( editor ) {
 
 
 	var player = new APP.Player();
 
 
-	signals.startPlayer.add( function ( json ) {
 
+	signals.startPlayer.add( function () {
 
 
 		container.setDisplay( '' );
 
 
-		player.load( json );
 
-		player.setCamera( editor.camera );
 
+		player.load( editor.toJSON() );
 
 		player.setSize( container.dom.offsetWidth, container.dom.offsetHeight );
 
 		player.play();

+ 23 - 1
editor/js/Sidebar.Script.Editor.js
Zobraziť súbor 

@@ -4,6 +4,8 @@
 
 
 Sidebar.Script.Editor = function ( editor ) {
 
 
+	var signals = editor.signals;
 
+
 
 	var timeout;
 
 
 	var scriptSource = new UI.TextArea( 'javascript' ).setWidth( '240px' ).setHeight( '180px' ).setFontSize( '12px' );
 
@@ -33,7 +35,7 @@ Sidebar.Script.Editor = function ( editor ) {
 
 
 			}
 
 
-			editor.scripts[ object.uuid ] = [ source ];
 
+			editor.scripts[ object.uuid ] = source;
 
 
 			editor.signals.objectChanged.dispatch( object );
 
 
@@ -41,6 +43,26 @@ Sidebar.Script.Editor = function ( editor ) {
 
 
 	} );
 
 
+	signals.objectSelected.add( function ( object ) {
 
+
 
+		if ( object !== null ) {
 
+
 
+			var script = editor.scripts[ object.uuid ];
 
+
 
+			if ( script !== undefined ) {
 
+
 
+				scriptSource.setValue( script );
 
+
 
+			} else {
 
+
 
+				scriptSource.setValue( '' );
 
+
 
+			}
 
+
 
+		}
 
+
 
+	} );
 
+
 
 	return scriptSource;
 
 
 }

+ 0 - 14
editor/js/Sidebar.Script.js
Zobraziť súbor 

@@ -27,20 +27,6 @@ Sidebar.Script = function ( editor ) {
 
 
 			container.setDisplay( 'block' );
 
 
-			/*
 
-			var scripts = editor.scripts[ object.uuid ];
 
-
 
-			if ( scripts !== undefined ) {
 
-
 
-				scriptSource.setValue( scripts[ 0 ] );
 
-
 
-			} else {
 
-
 
-				scriptSource.setValue( '' );
 
-
 
-			}
 
-			*/
 
-
 
 		} else {
 
 
 			container.setDisplay( 'none' );

+ 45 - 47
editor/js/libs/app.js
Zobraziť súbor 

@@ -2,88 +2,86 @@
 
  * @author mrdoob / http://mrdoob.com/
 
  */
 
 
-var APP = {};
 
+var APP = {
 
 
-APP.Player = function () {
 
+	Player: function () {
 
 
-	var loader = new THREE.ObjectLoader();
 
-	var camera, scene, renderer;
 
-	var scripts;
 
-	
-	this.dom = undefined;
 
+		var loader = new THREE.ObjectLoader();
 
+		var camera, scene, renderer;
 
 
-	this.load = function ( json ) {
 
+		var scripts = {
 
+			update: []
 
+		};
 
+	
+		this.dom = undefined;
 
 
-		renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+		this.load = function ( json ) {
 
 
-		scene = loader.parse( json );
 
+			renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+			renderer.setPixelRatio( window.devicePixelRatio );
 
 
-		/*
 
-		scripts = [];
 
+			camera = loader.parse( json.camera );
 
 
-		scene.traverse( function ( child ) {
 
+			scene = loader.parse( json.scene );
 
 
-			if ( child.script !== undefined ) {
 
+			scripts.update = [];
 
 
-				var script = new Function( 'scene', 'time', child.script.source ).bind( child );
 
-				scripts.push( script );
 
+			for ( var uuid in json.scripts ) {
 
 
-			}
 
+				var source = json.scripts[ uuid ];
 
+				var object = scene.getObjectByProperty( 'uuid', uuid, true );
 
 
-		} );
 
-		*/
 
+				var script = ( new Function( 'scene', 'time', source ).bind( object ) )();
 
 
-		this.dom = renderer.domElement;
 
+				if ( script.update !== undefined ) {
 
 
-	};
 
+					scripts.update.push( script.update );
 
 
-	this.setCamera = function ( master ) {
 
+				}
 
 
-		camera = master.clone();
 
+			}
 
 
-	};
 
+			this.dom = renderer.domElement;
 
 
-	this.setSize = function ( width, height ) {
 
+		};
 
 
-		renderer.setSize( width, height );
 
+		this.setSize = function ( width, height ) {
 
 
-	};
 
+			camera.aspect = width / height;
 
+			camera.updateProjectionMatrix();
 
 
-	var request;
 
+			renderer.setSize( width, height );
 
 
-	var animate = function ( time ) {
 
+		};
 
 
-		request = requestAnimationFrame( animate );
 
+		var request;
 
 
-		/*
 
-		for ( var i = 0; i < scripts.length; i ++ ) {
 
+		var animate = function ( time ) {
 
 
-			scripts[ i ]( scene, time );
 
+			request = requestAnimationFrame( animate );
 
 
-		}
 
-		*/
 
+			for ( var i = 0, l = scripts.update.length; i < l; i ++ ) {
 
 
-		renderer.render( scene, camera );
 
+				scripts.update[ i ]( scene, time );
 
 
-	};
 
+			}
 
 
-	this.play = function () {
 
+			renderer.render( scene, camera );
 
 
-		request = requestAnimationFrame( animate );
 
+		};
 
 
-	};
 
+		this.play = function () {
 
 
-	this.stop = function () {
 
+			request = requestAnimationFrame( animate );
 
 
-		cancelAnimationFrame( request );
 
+		};
 
 
-	};
 
+		this.stop = function () {
 
 
-};
 
+			cancelAnimationFrame( request );
 
 
-APP.Script = function ( source ) {
 
+		};
 
 
-	this.uuid = THREE.Math.generateUUID();
 
-	this.source = source;
 
+	}
 
 
 };