Home Explore Help
Sign In
javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Added a variation of the interactive example (using Tween.js)

Mr.doob 14 years ago
parent
5e4476bde8
commit
b449fdf5a8
6 changed files with 167 additions and 46 deletions
Unified View Show Diff Stats
  1. 140 0
      examples/interactive_cubes_tween.html
  2. 0 0
      examples/js/Stats.js
  3. 12 0
      examples/js/Tween.js
  4. 3 11
      examples/particles_floor.html
  5. 5 17
      examples/particles_random.html
  6. 7 18
      examples/particles_waves.html

+ 140 - 0
examples/interactive_cubes_tween.html
View File 

@@ -0,0 +1,140 @@
 
+<!DOCTYPE HTML>
 
+<html lang="en">
 
+	<head>
 
+		<title>three.js - interactive - cubes tween</title>
 
+		<meta charset="utf-8">
 
+		<style type="text/css">
 
+			body {
 
+				font-family: Monospace;
 
+				background-color: #f0f0f0;
 
+				margin: 0px;
 
+				overflow: hidden;
 
+			}
 
+		</style>
 
+	</head>
 
+	<body>
 
+
 
+		<script type="text/javascript" src="../build/Three.js"></script>
 
+		<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
 
+
 
+		<script type="text/javascript" src="js/Tween.js"></script>
 
+		<script type="text/javascript" src="js/Stats.js"></script>
 
+
 
+		<script type="text/javascript">
 
+
 
+			var container, stats;
 
+			var camera, scene, projector, renderer;
 
+
 
+			init();
 
+			setInterval( loop, 1000 / 60 );
 
+
 
+			function init() {
 
+
 
+				container = document.createElement( 'div' );
 
+				document.body.appendChild( container );
 
+
 
+				var info = document.createElement( 'div' );
 
+				info.style.position = 'absolute';
 
+				info.style.top = '10px';
 
+				info.style.width = '100%';
 
+				info.style.textAlign = 'center';
 
+				info.innerHTML = '<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - clickable objects';
 
+				container.appendChild( info );
 
+
 
+				camera = new THREE.Camera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
 
+				camera.position.y = 300;
 
+				camera.position.z = 500;
 
+
 
+				scene = new THREE.Scene();
 
+
 
+				var geometry = new Cube( 100, 100, 100 );
 
+
 
+				for ( var i = 0; i < 20; i ++ ) {
 
+
 
+					var object = new THREE.Mesh( geometry, [ new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, opacity: 0.5 } ), new THREE.MeshBasicMaterial( { color: 0xffffff, opacity: 0.5, wireframe: true } ) ] );
 
+					object.position.x = Math.random() * 800 - 400;
 
+					object.position.y = Math.random() * 800 - 400;
 
+					object.position.z = Math.random() * 800 - 400;
 
+					object.scale.x = Math.random() * 2 + 1;
 
+					object.scale.y = Math.random() * 2 + 1;
 
+					object.scale.z = Math.random() * 2 + 1;
 
+					object.rotation.x = ( Math.random() * 360 ) * Math.PI / 180;
 
+					object.rotation.y = ( Math.random() * 360 ) * Math.PI / 180;
 
+					object.rotation.z = ( Math.random() * 360 ) * Math.PI / 180;
 
+					scene.addObject( object );
 
+
 
+				}
 
+
 
+				projector = new THREE.Projector();
 
+
 
+				renderer = new THREE.CanvasRenderer();
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
+
 
+				container.appendChild(renderer.domElement);
 
+
 
+				stats = new Stats();
 
+				stats.domElement.style.position = 'absolute';
 
+				stats.domElement.style.top = '0px';
 
+				container.appendChild( stats.domElement );
 
+
 
+				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
 
+
 
+			}
 
+
 
+			function onDocumentMouseDown( event ) {
 
+
 
+				event.preventDefault();
 
+
 
+				var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
 
+				projector.unprojectVector( vector, camera );
 
+
 
+				var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
 
+
 
+				var intersects = ray.intersectScene( scene );
 
+
 
+				if ( intersects.length > 0 ) {
 
+
 
+					new TWEEN.Tween( intersects[ 0 ].object.position ).to( {
 
+						x: Math.random() * 800 - 400,
 
+						y: Math.random() * 800 - 400,
 
+						z: Math.random() * 800 - 400 }, 2000 )
 
+					.easing( TWEEN.Easing.Elastic.EaseOut).start();
 
+
 
+					new TWEEN.Tween( intersects[ 0 ].object.rotation ).to( {
 
+						x: ( Math.random() * 360 ) * Math.PI / 180,
 
+						y: ( Math.random() * 360 ) * Math.PI / 180,
 
+						z: ( Math.random() * 360 ) * Math.PI / 180 }, 2000 )
 
+					.easing( TWEEN.Easing.Elastic.EaseOut).start();
 
+
 
+				}
 
+
 
+				/*
 
+				// Parse all the faces
 
+				for ( var i in intersects ) {
 
+
 
+					intersects[ i ].face.material[ 0 ].color.setHex( Math.random() * 0xffffff | 0x80000000 );
 
+
 
+				}
 
+				*/
 
+			}
 
+
 
+			var radius = 600;
 
+			var theta = 0;
 
+
 
+			function loop() {
 
+
 
+				TWEEN.update();
 
+
 
+				theta += 0.2;
 
+				camera.position.x = radius * Math.sin( theta * Math.PI / 360 );
 
+				camera.position.y = radius * Math.sin( theta * Math.PI / 360 );
 
+				camera.position.z = radius * Math.cos( theta * Math.PI / 360 );
 
+
 
+				renderer.render(scene, camera);
 
+				stats.update();
 
+			}
 
+
 
+		</script>
 
+
 
+	</body>
 
+</html>

File diff suppressed because it is too large
+ 0 - 0
examples/js/Stats.js


+ 12 - 0
examples/js/Tween.js
View File 

@@ -0,0 +1,12 @@
 
+// Tween.js - http://github.com/sole/tween.js
 
+var TWEEN=TWEEN||function(){var a,e,d,b=[];this.add=function(h){b.push(h)};this.remove=function(h){a=b.indexOf(h);a!==-1&&b.splice(a,1)};this.update=function(){a=0;e=b.length;for(d=(new Date).getTime();a<e;)if(b[a].update(d))a++;else{b.splice(a,1);e--}};return this}();
 
+TWEEN.Tween=function(a){var e={},d={},b={},h=1E3,m=0,i=null,n=TWEEN.Easing.Linear.EaseNone,j=null,k=null,l=null;this.to=function(c,f){if(f!==null)h=f;for(var g in c)if(a[g]!==null)b[g]=c[g];return this};this.start=function(){TWEEN.add(this);i=(new Date).getTime()+m;for(var c in b)if(a[c]!==null){e[c]=a[c];d[c]=b[c]-a[c]}return this};this.stop=function(){TWEEN.remove(this);return this};this.delay=function(c){m=c;return this};this.easing=function(c){n=c;return this};this.chain=function(c){j=c};this.onUpdate=
 
+function(c){k=c;return this};this.onComplete=function(c){l=c;return this};this.update=function(c){var f,g;if(c<i)return true;c=(c-i)/h;c=c>1?1:c;g=n(c);for(f in d)a[f]=e[f]+d[f]*g;k!==null&&k.call(a,g);if(c==1){l!==null&&l.call(a);j!==null&&j.start();return false}return true}};TWEEN.Easing={Linear:{},Quadratic:{},Cubic:{},Quartic:{},Quintic:{},Sinusoidal:{},Exponential:{},Circular:{},Elastic:{},Back:{},Bounce:{}};TWEEN.Easing.Linear.EaseNone=function(a){return a};
 
+TWEEN.Easing.Quadratic.EaseIn=function(a){return a*a};TWEEN.Easing.Quadratic.EaseOut=function(a){return-a*(a-2)};TWEEN.Easing.Quadratic.EaseInOut=function(a){if((a*=2)<1)return 0.5*a*a;return-0.5*(--a*(a-2)-1)};TWEEN.Easing.Cubic.EaseIn=function(a){return a*a*a};TWEEN.Easing.Cubic.EaseOut=function(a){return--a*a*a+1};TWEEN.Easing.Cubic.EaseInOut=function(a){if((a*=2)<1)return 0.5*a*a*a;return 0.5*((a-=2)*a*a+2)};TWEEN.Easing.Quartic.EaseIn=function(a){return a*a*a*a};
 
+TWEEN.Easing.Quartic.EaseOut=function(a){return-(--a*a*a*a-1)};TWEEN.Easing.Quartic.EaseInOut=function(a){if((a*=2)<1)return 0.5*a*a*a*a;return-0.5*((a-=2)*a*a*a-2)};TWEEN.Easing.Quintic.EaseIn=function(a){return a*a*a*a*a};TWEEN.Easing.Quintic.EaseOut=function(a){return(a-=1)*a*a*a*a+1};TWEEN.Easing.Quintic.EaseInOut=function(a){if((a*=2)<1)return 0.5*a*a*a*a*a;return 0.5*((a-=2)*a*a*a*a+2)};TWEEN.Easing.Sinusoidal.EaseIn=function(a){return-Math.cos(a*Math.PI/2)+1};
 
+TWEEN.Easing.Sinusoidal.EaseOut=function(a){return Math.sin(a*Math.PI/2)};TWEEN.Easing.Sinusoidal.EaseInOut=function(a){return-0.5*(Math.cos(Math.PI*a)-1)};TWEEN.Easing.Exponential.EaseIn=function(a){return a==0?0:Math.pow(2,10*(a-1))};TWEEN.Easing.Exponential.EaseOut=function(a){return a==1?1:-Math.pow(2,-10*a)+1};TWEEN.Easing.Exponential.EaseInOut=function(a){if(a==0)return 0;if(a==1)return 1;if((a*=2)<1)return 0.5*Math.pow(2,10*(a-1));return 0.5*(-Math.pow(2,-10*(a-1))+2)};
 
+TWEEN.Easing.Circular.EaseIn=function(a){return-(Math.sqrt(1-a*a)-1)};TWEEN.Easing.Circular.EaseOut=function(a){return Math.sqrt(1- --a*a)};TWEEN.Easing.Circular.EaseInOut=function(a){if((a/=0.5)<1)return-0.5*(Math.sqrt(1-a*a)-1);return 0.5*(Math.sqrt(1-(a-=2)*a)+1)};TWEEN.Easing.Elastic.EaseIn=function(a){var e,d=0.1,b=0.4;if(a==0)return 0;if(a==1)return 1;b||(b=0.3);if(!d||d<1){d=1;e=b/4}else e=b/(2*Math.PI)*Math.asin(1/d);return-(d*Math.pow(2,10*(a-=1))*Math.sin((a-e)*2*Math.PI/b))};
 
+TWEEN.Easing.Elastic.EaseOut=function(a){var e,d=0.1,b=0.4;if(a==0)return 0;if(a==1)return 1;b||(b=0.3);if(!d||d<1){d=1;e=b/4}else e=b/(2*Math.PI)*Math.asin(1/d);return d*Math.pow(2,-10*a)*Math.sin((a-e)*2*Math.PI/b)+1};
 
+TWEEN.Easing.Elastic.EaseInOut=function(a){var e,d=0.1,b=0.4;if(a==0)return 0;if(a==1)return 1;b||(b=0.3);if(!d||d<1){d=1;e=b/4}else e=b/(2*Math.PI)*Math.asin(1/d);if((a*=2)<1)return-0.5*d*Math.pow(2,10*(a-=1))*Math.sin((a-e)*2*Math.PI/b);return d*Math.pow(2,-10*(a-=1))*Math.sin((a-e)*2*Math.PI/b)*0.5+1};TWEEN.Easing.Back.EaseIn=function(a){return a*a*(2.70158*a-1.70158)};TWEEN.Easing.Back.EaseOut=function(a){return(a-=1)*a*(2.70158*a+1.70158)+1};
 
+TWEEN.Easing.Back.EaseInOut=function(a){if((a*=2)<1)return 0.5*a*a*(3.5949095*a-2.5949095);return 0.5*((a-=2)*a*(3.5949095*a+2.5949095)+2)};TWEEN.Easing.Bounce.EaseIn=function(a){return 1-TWEEN.Easing.Bounce.EaseOut(1-a)};TWEEN.Easing.Bounce.EaseOut=function(a){return(a/=1)<1/2.75?7.5625*a*a:a<2/2.75?7.5625*(a-=1.5/2.75)*a+0.75:a<2.5/2.75?7.5625*(a-=2.25/2.75)*a+0.9375:7.5625*(a-=2.625/2.75)*a+0.984375};
 
+TWEEN.Easing.Bounce.EaseInOut=function(a){if(a<0.5)return TWEEN.Easing.Bounce.EaseIn(a*2)*0.5;return TWEEN.Easing.Bounce.EaseOut(a*2-1)*0.5+0.5};

+ 3 - 11
examples/particles_floor.html
View File 

@@ -27,17 +27,9 @@
 
 			var AMOUNTX = 50;
 
 			var AMOUNTX = 50;
 
 			var AMOUNTY = 50;
 
 			var AMOUNTY = 50;
 
 
 
-			var container;
 
-			var stats;
 
-
 
-			var particle;
 
-
 
-			var camera;
 
-			var scene;
 
-			var renderer;
 
-
 
-			var mouseX = 0;
 
-			var mouseY = 0;
 
+			var container, stats;
 
+			var camera, scene, renderer, particle;
 
+			var mouseX = 0, mouseY = 0;
 
 
 
 			var windowHalfX = window.innerWidth / 2;
 
 			var windowHalfX = window.innerWidth / 2;
 
 			var windowHalfY = window.innerHeight / 2;
 
 			var windowHalfY = window.innerHeight / 2;

+ 5 - 17
examples/particles_random.html
View File 

@@ -24,25 +24,13 @@
 
 
 
 		<script type="text/javascript">
 
 		<script type="text/javascript">
 
 
 
-			var SCREEN_WIDTH = window.innerWidth;
 
-			var SCREEN_HEIGHT = window.innerHeight;
 
-
 
-			var stats;
 
-			var container;
 
-
 
-			var particle;
 
-
 
-			var camera;
 
-			var scene;
 
-			var renderer;
 
-
 
-			var mouseX = 0;
 
-			var mouseY = 0;
 
+			var container, stats;
 
+			var camera, scene, renderer, particle;
 
+			var mouseX = 0, mouseY = 0;
 
 
 
 			var windowHalfX = window.innerWidth / 2;
 
 			var windowHalfX = window.innerWidth / 2;
 
 			var windowHalfY = window.innerHeight / 2;
 
 			var windowHalfY = window.innerHeight / 2;
 
 
 
-
 
 			init();
 
 			init();
 
 			setInterval( loop, 1000 / 60 );
 
 			setInterval( loop, 1000 / 60 );
 
 
 
@@ -51,13 +39,13 @@
 
 				container = document.createElement('div');
 
 				container = document.createElement('div');
 
 				document.body.appendChild(container);
 
 				document.body.appendChild(container);
 
 
 
-				camera = new THREE.Camera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
 
+				camera = new THREE.Camera( 75, window.innerWidth / window.innerHeight, 1, 3000 );
 
 				camera.position.z = 1000;
 
 				camera.position.z = 1000;
 
 
 
 				scene = new THREE.Scene();
 
 				scene = new THREE.Scene();
 
 
 
 				renderer = new THREE.CanvasRenderer();
 
 				renderer = new THREE.CanvasRenderer();
 
-				renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
 
 
 				for ( var i = 0; i < 1000; i++ ) {
 
 				for ( var i = 0; i < 1000; i++ ) {

+ 7 - 18
examples/particles_waves.html
View File 

@@ -22,25 +22,14 @@
 
 
 
 		<script type="text/javascript">
 
 		<script type="text/javascript">
 
 
 
-			var SCREEN_WIDTH = window.innerWidth;
 
-			var SCREEN_HEIGHT = window.innerHeight;
 
+			var SEPARATION = 100, AMOUNTX = 50, AMOUNTY = 50;
 
 
 
-			var SEPARATION = 100;
 
-			var AMOUNTX = 50;
 
-			var AMOUNTY = 50;
 
+			var container, stats;
 
+			var camera, scene, renderer;
 
 
 
-			var stats;
 
-			var container;
 
+			var particles, particle, count;
 
 
 
-			var particles, particle;
 
-			var count;
 
-
 
-			var camera;
 
-			var scene;
 
-			var renderer;
 
-
 
-			var mouseX = 0;
 
-			var mouseY = 0;
 
+			var mouseX = 0, mouseY = 0;
 
 
 
 			var windowHalfX = window.innerWidth / 2;
 
 			var windowHalfX = window.innerWidth / 2;
 
 			var windowHalfY = window.innerHeight / 2;
 
 			var windowHalfY = window.innerHeight / 2;
 
@@ -53,13 +42,13 @@
 
 				container = document.createElement( 'div' );
 
 				container = document.createElement( 'div' );
 
 				document.body.appendChild( container );
 
 				document.body.appendChild( container );
 
 
 
-				camera = new THREE.Camera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
 
+				camera = new THREE.Camera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
 
 				camera.position.z = 1000;
 
 				camera.position.z = 1000;
 
 
 
 				scene = new THREE.Scene();
 
 				scene = new THREE.Scene();
 
 
 
 				renderer = new THREE.CanvasRenderer();
 
 				renderer = new THREE.CanvasRenderer();
 
-				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
 
 
 				particles = new Array();
 
 				particles = new Array();

Some files were not shown because too many files changed in this diff