Guest User

Untitled

a guest
Feb 13th, 2018
126
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.67 KB | None | 0 0
  1. var SEPARATION = 80, AMOUNTX = 50, AMOUNTY = 50;
  2. var container, stats;
  3. var camera, scene, renderer;
  4. var startX, startY;
  5. var particles, particle, count = 0;
  6.  
  7.  
  8. var windowHalfX = window.innerWidth / 2;
  9. var windowHalfY = window.innerHeight / 3;
  10. var mouseX = 0, mouseY = 50;
  11.  
  12. init();
  13. animate();
  14.  
  15. function init() {
  16. container = document.createElement( 'div' );
  17. document.body.appendChild( container );
  18. //camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
  19. //camera.position.z = 1000;
  20. camera = new THREE.PerspectiveCamera( 125, window.innerWidth / window.innerHeight, 1, 10000 );
  21. camera.position.z = 1100;
  22.  
  23. scene = new THREE.Scene();
  24.  
  25. particles = new Array();
  26.  
  27. var PI2 = Math.PI * 2;
  28. var material = new THREE.SpriteCanvasMaterial( {
  29.  
  30. color: 0xffffff,
  31. program: function ( context ) {
  32.  
  33. context.beginPath();
  34. context.arc( 0, 0, 0.5, 0, PI2, true );
  35. context.fill();
  36.  
  37. }
  38.  
  39. } );
  40.  
  41. var i = 0;
  42.  
  43. for ( var ix = 0; ix < AMOUNTX; ix ++ ) {
  44.  
  45. for ( var iy = 0; iy < AMOUNTY; iy ++ ) {
  46.  
  47. particle = particles[ i ++ ] = new THREE.Sprite( material );
  48. particle.position.x = ix * SEPARATION - ( ( AMOUNTX * SEPARATION ) / 2 );
  49. particle.position.z = iy * SEPARATION - ( ( AMOUNTY * SEPARATION ) / 2 );
  50. scene.add( particle );
  51.  
  52. }
  53.  
  54. }
  55.  
  56. renderer = new THREE.CanvasRenderer();
  57. renderer.setPixelRatio( window.devicePixelRatio );
  58. renderer.setSize( window.innerWidth, window.innerHeight );
  59. container.appendChild( renderer.domElement );
  60.  
  61. document.addEventListener( 'mousemove', onDocumentMouseMove, false );
  62. document.addEventListener( 'touchstart', onDocumentTouchStart, false );
  63. document.addEventListener( 'touchmove', onDocumentTouchMove, false );
  64.  
  65. //
  66.  
  67. window.addEventListener( 'resize', onWindowResize, false );
  68.  
  69. }
  70.  
  71. function onWindowResize() {
  72.  
  73. windowHalfX = window.innerWidth / 2;
  74. windowHalfY = window.innerHeight / 2;
  75.  
  76. camera.aspect = window.innerWidth / window.innerHeight;
  77. camera.updateProjectionMatrix();
  78.  
  79. renderer.setSize( window.innerWidth, window.innerHeight );
  80.  
  81. }
  82.  
  83. function onDocumentMouseMove( event ) {
  84. console.log(event.clientX, windowHalfX, event.clientX - windowHalfX);
  85. console.log(event.clientY, windowHalfY, event.clientY - windowHalfY);
  86. mouseX = event.clientX - windowHalfX;
  87. mouseY = event.clientY - windowHalfY;
  88.  
  89. }
  90.  
  91. function onDocumentTouchStart( event ) {
  92.  
  93. if ( event.touches.length === 1 ) {
  94.  
  95. event.preventDefault();
  96. mouseX = event.touches[ 0 ].pageX - windowHalfX;
  97. mouseY = event.touches[ 0 ].pageY - windowHalfY;
  98.  
  99. }
  100.  
  101. }
  102.  
  103. function onDocumentTouchMove( event ) {
  104.  
  105. if ( event.touches.length === 1 ) {
  106.  
  107. event.preventDefault();
  108. mouseX = event.touches[ 0 ].pageX - windowHalfX;
  109. mouseY = event.touches[ 0 ].pageY - windowHalfY;
  110.  
  111. }
  112.  
  113. }
  114.  
  115. //
  116.  
  117. function animate() {
  118.  
  119. requestAnimationFrame( animate );
  120.  
  121. render();
  122. //stats.update();
  123.  
  124. }
  125.  
  126. function render() {
  127.  
  128. camera.position.x += ( mouseX/3 - camera.position.x ) * .05;
  129. camera.position.y += 36 + ( - mouseY/3 - camera.position.y ) * .12;
  130.  
  131. camera.lookAt( scene.position );
  132.  
  133. var i = 0;
  134.  
  135. for ( var ix = 0; ix < AMOUNTX; ix ++ ) {
  136.  
  137. for ( var iy = 0; iy < AMOUNTY; iy ++ ) {
  138.  
  139. particle = particles[ i++ ];
  140. particle.position.y = ( Math.sin( ( ix + count ) * 0.3 ) * 50 ) +
  141. ( Math.sin( ( iy + count ) * 0.5 ) * 50 );
  142. particle.scale.x = particle.scale.y = ( Math.sin( ( ix + count ) * 0.3 ) + 1 ) * 4 +
  143. ( Math.sin( ( iy + count ) * 0.5 ) + 1 ) * 4;
  144.  
  145. }
  146.  
  147. }
  148.  
  149. renderer.render( scene, camera );
  150.  
  151. count += 0.1;
  152.  
  153. }
Add Comment
Please, Sign In to add comment