|
|
@@ -0,0 +1,168 @@
|
|
|
+<!DOCTYPE HTML>
|
|
|
+<html lang="en">
|
|
|
+ <head>
|
|
|
+ <title>three.js - particles - sprites</title>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
|
|
|
+ <style type="text/css">
|
|
|
+ body {
|
|
|
+ background-color: #000000;
|
|
|
+ margin: 0px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ a {
|
|
|
+ color:#0078ff;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+
|
|
|
+ <script type="text/javascript" src="../build/Three.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, renderer, particle;
|
|
|
+ var mouseX = 0, mouseY = 0;
|
|
|
+
|
|
|
+ var windowHalfX = window.innerWidth / 2;
|
|
|
+ var windowHalfY = window.innerHeight / 2;
|
|
|
+
|
|
|
+ init();
|
|
|
+ setInterval( loop, 1000 / 60 );
|
|
|
+
|
|
|
+ function init() {
|
|
|
+
|
|
|
+ container = document.createElement('div');
|
|
|
+ document.body.appendChild(container);
|
|
|
+
|
|
|
+ camera = new THREE.Camera( 75, window.innerWidth / window.innerHeight, 1, 5000 );
|
|
|
+ camera.position.z = 1000;
|
|
|
+
|
|
|
+ scene = new THREE.Scene();
|
|
|
+
|
|
|
+ renderer = new THREE.CanvasRenderer();
|
|
|
+ renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
+
|
|
|
+ var material = new THREE.ParticleBasicMaterial( { map: createSprite(), blending: THREE.AdditiveBlending } );
|
|
|
+
|
|
|
+ for ( var i = 0; i < 1000; i++ ) {
|
|
|
+
|
|
|
+ particle = new THREE.Particle( material );
|
|
|
+
|
|
|
+ initParticle( particle, i * 10 );
|
|
|
+
|
|
|
+ scene.addObject( particle );
|
|
|
+ }
|
|
|
+
|
|
|
+ container.appendChild( renderer.domElement );
|
|
|
+
|
|
|
+ stats = new Stats();
|
|
|
+ stats.domElement.style.position = 'absolute';
|
|
|
+ stats.domElement.style.top = '0px';
|
|
|
+ container.appendChild( stats.domElement );
|
|
|
+
|
|
|
+ document.addEventListener( 'mousemove', onDocumentMouseMove, false );
|
|
|
+ document.addEventListener( 'touchstart', onDocumentTouchStart, false );
|
|
|
+ document.addEventListener( 'touchmove', onDocumentTouchMove, false );
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ function createSprite() {
|
|
|
+
|
|
|
+ var canvas = document.createElement( 'canvas' );
|
|
|
+ canvas.width = 16;
|
|
|
+ canvas.height = 16;
|
|
|
+
|
|
|
+ var context = canvas.getContext( '2d' );
|
|
|
+ var gradient = context.createRadialGradient( canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2 );
|
|
|
+ gradient.addColorStop( 0, 'rgba(255,255,255,1)' );
|
|
|
+ gradient.addColorStop( 0.2, 'rgba(0,255,255,1)' );
|
|
|
+ gradient.addColorStop( 0.4, 'rgba(0,0,64,1)' );
|
|
|
+ gradient.addColorStop( 1, 'rgba(0,0,0,1)' );
|
|
|
+
|
|
|
+ context.fillStyle = gradient;
|
|
|
+ context.fillRect( 0, 0, canvas.width, canvas.height );
|
|
|
+
|
|
|
+ return canvas;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function initParticle( particle, delay ) {
|
|
|
+
|
|
|
+ var particle = this instanceof THREE.Particle ? this : particle;
|
|
|
+ var delay = delay !== undefined ? delay : 0;
|
|
|
+
|
|
|
+ particle.position.x = 0;
|
|
|
+ particle.position.y = 0;
|
|
|
+ particle.position.z = 0;
|
|
|
+ particle.scale.x = particle.scale.y = Math.random() * 3 + 1;
|
|
|
+
|
|
|
+ new TWEEN.Tween( particle )
|
|
|
+ .delay( delay )
|
|
|
+ .to( {}, 10000 )
|
|
|
+ .onComplete( initParticle )
|
|
|
+ .start();
|
|
|
+
|
|
|
+ new TWEEN.Tween( particle.position )
|
|
|
+ .delay( delay )
|
|
|
+ .to( { x: Math.random() * 4000 - 2000, y: Math.random() * 1000 - 500, z: Math.random() * 4000 - 2000 }, 10000 )
|
|
|
+ .start();
|
|
|
+
|
|
|
+ new TWEEN.Tween( particle.scale )
|
|
|
+ .delay( delay )
|
|
|
+ .to( { x: 0, y: 0 }, 10000 )
|
|
|
+ .start();
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ //
|
|
|
+
|
|
|
+ function onDocumentMouseMove( event ) {
|
|
|
+
|
|
|
+ mouseX = event.clientX - windowHalfX;
|
|
|
+ mouseY = event.clientY - windowHalfY;
|
|
|
+ }
|
|
|
+
|
|
|
+ function onDocumentTouchStart( event ) {
|
|
|
+
|
|
|
+ if ( event.touches.length == 1 ) {
|
|
|
+
|
|
|
+ event.preventDefault();
|
|
|
+
|
|
|
+ mouseX = event.touches[ 0 ].pageX - windowHalfX;
|
|
|
+ mouseY = event.touches[ 0 ].pageY - windowHalfY;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function onDocumentTouchMove( event ) {
|
|
|
+
|
|
|
+ if ( event.touches.length == 1 ) {
|
|
|
+
|
|
|
+ event.preventDefault();
|
|
|
+
|
|
|
+ mouseX = event.touches[ 0 ].pageX - windowHalfX;
|
|
|
+ mouseY = event.touches[ 0 ].pageY - windowHalfY;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //
|
|
|
+
|
|
|
+ function loop() {
|
|
|
+
|
|
|
+ TWEEN.update();
|
|
|
+
|
|
|
+ camera.position.x += ( mouseX - camera.position.x ) * 0.05;
|
|
|
+ camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
|
|
|
+
|
|
|
+ renderer.render( scene, camera );
|
|
|
+
|
|
|
+ stats.update();
|
|
|
+ }
|
|
|
+
|
|
|
+ </script>
|
|
|
+ </body>
|
|
|
+</html>
|
Mr.doob