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 css3d sprites example.

Mr.doob 12 years ago
parent
df3a002759
commit
ff294511e6
2 changed files with 232 additions and 0 deletions
Split View Show Diff Stats
  1. 232 0
      examples/css3d_sprites.html
  2. BIN
      examples/textures/sprite.png

+ 232 - 0
examples/css3d_sprites.html
View File 

@@ -0,0 +1,232 @@
 
+<!DOCTYPE html>
 
+<html>
 
+	<head>
 
+		<meta charset="utf-8">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+		<title>three.js css3d - sprites</title>
 
+		<style>
 
+			html, body {
 
+				height: 100%;
 
+			}
 
+
 
+			body {
 
+				background-color: #ffffff;
 
+				margin: 0;
 
+				font-family: Arial;
 
+				overflow: hidden;
 
+			}
 
+
 
+			a {
 
+				color: #8888ff;
 
+			}
 
+
 
+			#info {
 
+				position: absolute;
 
+				width: 100%;
 
+				color: #000000;
 
+				padding: 5px;
 
+				font-family: Monospace;
 
+				font-size: 13px;
 
+				font-weight: bold;
 
+				text-align: center;
 
+				z-index: 1;
 
+			}
 
+		</style>
 
+	</head>
 
+	<body>
 
+		<script src="../build/three.min.js"></script>
 
+		<script src="js/libs/tween.min.js"></script>
 
+		<script src="js/controls/TrackballControls.js"></script>
 
+		<script src="js/renderers/CSS3DRenderer.js"></script>
 
+
 
+		<div id="container"></div>
 
+		<div id="info"><a href="http://threejs.org" target="_blank">three.js css3d</a> - sprites.</div>
 
+
 
+		<script>
 
+
 
+			var camera, scene, renderer;
 
+			var controls;
 
+
 
+			var particlesTotal = 512;
 
+			var positions = [];
 
+			var objects = [];
 
+			var current = 0;
 
+
 
+			init();
 
+			animate();
 
+
 
+			function init() {
 
+
 
+				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 5000 );
 
+				camera.position.set( 600, 400, 1200 );
 
+				camera.lookAt( new THREE.Vector3() );
 
+
 
+				scene = new THREE.Scene();
 
+
 
+				var sprite = document.createElement( 'img' );
 
+				sprite.addEventListener( 'load', function ( event ) {
 
+
 
+					for ( var i = 0, j = 0; i < particlesTotal; i ++, j += 3 ) {
 
+
 
+						var canvas = document.createElement( 'canvas' );
 
+						canvas.width = sprite.width;
 
+						canvas.height = sprite.height;
 
+
 
+						var context = canvas.getContext( '2d' );
 
+						context.drawImage( sprite, 0, 0 );
 
+
 
+						var object = new THREE.CSS3DSprite( canvas );
 
+						scene.add( object );
 
+
 
+						objects.push( object );
 
+
 
+					}
 
+
 
+					transition();
 
+
 
+				}, false );
 
+				sprite.src = 'textures/sprite.png';
 
+
 
+				// Plane
 
+
 
+				var amountX = 16;
 
+				var amountZ = 32;
 
+				var separation = 150;
 
+				var offsetX = ( ( amountX - 1 ) * separation ) / 2;
 
+				var offsetZ = ( ( amountZ - 1 ) * separation ) / 2;
 
+
 
+				for ( var i = 0; i < particlesTotal; i ++ ) {
 
+
 
+					var x = ( i % amountX ) * separation;
 
+					var z = Math.floor( i / amountX ) * separation;
 
+					var y = ( Math.sin( x * 0.5 ) + Math.sin( z * 0.5 ) ) * 200;
 
+
 
+					positions.push( x - offsetX, y, z - offsetZ );
 
+
 
+				}
 
+
 
+				// Cube
 
+
 
+				var amount = 8;
 
+				var separation = 150;
 
+				var offset = ( ( amount - 1 ) * separation ) / 2;
 
+
 
+				for ( var i = 0; i < particlesTotal; i ++ ) {
 
+
 
+					var x = ( i % amount ) * separation;
 
+					var y = Math.floor( ( i / amount ) % amount ) * separation;
 
+					var z = Math.floor( i / ( amount * amount ) ) * separation;
 
+
 
+					positions.push( x - offset, y - offset, z - offset );
 
+
 
+				}
 
+
 
+				// Random
 
+
 
+				for ( var i = 0; i < particlesTotal; i ++ ) {
 
+
 
+					positions.push(
 
+						Math.random() * 4000 - 2000,
 
+						Math.random() * 4000 - 2000,
 
+						Math.random() * 4000 - 2000
 
+					);
 
+
 
+				}
 
+
 
+				// Sphere
 
+
 
+				var radius = 750;
 
+
 
+				for ( var i = 0; i < particlesTotal; i ++ ) {
 
+
 
+					var phi = Math.acos( -1 + ( 2 * i ) / particlesTotal );
 
+					var theta = Math.sqrt( particlesTotal * Math.PI ) * phi;
 
+
 
+					positions.push(
 
+						radius * Math.cos( theta ) * Math.sin( phi ),
 
+						radius * Math.sin( theta ) * Math.sin( phi ),
 
+						radius * Math.cos( phi )
 
+					);
 
+
 
+				}
 
+
 
+				//
 
+
 
+				renderer = new THREE.CSS3DRenderer();
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
+				renderer.domElement.style.position = 'absolute';
 
+				document.getElementById( 'container' ).appendChild( renderer.domElement );
 
+
 
+				//
 
+
 
+				controls = new THREE.TrackballControls( camera, renderer.domElement );
 
+				controls.rotateSpeed = 0.5;
 
+
 
+				//
 
+
 
+				window.addEventListener( 'resize', onWindowResize, false );
 
+
 
+			}
 
+
 
+			function onWindowResize() {
 
+
 
+				camera.aspect = window.innerWidth / window.innerHeight;
 
+				camera.updateProjectionMatrix();
 
+
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
+
 
+			}
 
+
 
+			function transition() {
 
+
 
+				var offset = current * particlesTotal * 3;
 
+				var duration = 2000;
 
+
 
+				for ( var i = 0, j = offset; i < particlesTotal; i ++, j += 3 ) {
 
+
 
+					var object = objects[ i ];
 
+
 
+					new TWEEN.Tween( object.position )
 
+						.to( {
 
+							x: positions[ j ],
 
+							y: positions[ j + 1 ],
 
+							z: positions[ j + 2 ]
 
+						}, Math.random() * duration + duration )
 
+						.easing( TWEEN.Easing.Exponential.InOut )
 
+						.start();
 
+
 
+				}
 
+
 
+				new TWEEN.Tween( this )
 
+					.to( {}, duration * 3 )
 
+					.onComplete( transition )
 
+					.start();
 
+
 
+				current = ( current + 1 ) % 4;
 
+
 
+			}
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				TWEEN.update();
 
+				controls.update();
 
+
 
+				var time = performance.now();
 
+
 
+				for ( var i = 0, l = objects.length; i < l; i ++ ) {
 
+
 
+					var object = objects[ i ];
 
+					var scale = Math.sin( ( Math.floor( object.position.x ) + time ) * 0.002 ) * 0.3 + 1;
 
+					object.scale.set( scale, scale, scale );
 
+
 
+				}
 
+
 
+				renderer.render( scene, camera );
 
+
 
+			}
 
+
 
+		</script>
 
+	</body>
 
+</html>

BIN
examples/textures/sprite.png
View File