webgl_interactive_points.html 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>three.js webgl - interactive particles</title>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7. <link type="text/css" rel="stylesheet" href="main.css">
  8. </head>
  9. <body>
  10. <div id="container"></div>
  11. <div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - interactive - particles</div>
  12. <script type="x-shader/x-vertex" id="vertexshader">
  13. attribute float size;
  14. attribute vec3 customColor;
  15. varying vec3 vColor;
  16. void main() {
  17. vColor = customColor;
  18. vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
  19. gl_PointSize = size * ( 300.0 / -mvPosition.z );
  20. gl_Position = projectionMatrix * mvPosition;
  21. }
  22. </script>
  23. <script type="x-shader/x-fragment" id="fragmentshader">
  24. uniform vec3 color;
  25. uniform sampler2D pointTexture;
  26. varying vec3 vColor;
  27. void main() {
  28. gl_FragColor = vec4( color * vColor, 1.0 );
  29. gl_FragColor = gl_FragColor * texture2D( pointTexture, gl_PointCoord );
  30. if ( gl_FragColor.a < ALPHATEST ) discard;
  31. }
  32. </script>
  33. <script type="module">
  34. import * as THREE from '../build/three.module.js';
  35. import Stats from './jsm/libs/stats.module.js';
  36. var renderer, scene, camera, stats;
  37. var particles;
  38. var PARTICLE_SIZE = 20;
  39. var raycaster, intersects;
  40. var mouse, INTERSECTED;
  41. init();
  42. animate();
  43. function init() {
  44. var container = document.getElementById( 'container' );
  45. scene = new THREE.Scene();
  46. camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
  47. camera.position.z = 250;
  48. //
  49. var vertices = new THREE.BoxGeometry( 200, 200, 200, 16, 16, 16 ).vertices;
  50. var positions = new Float32Array( vertices.length * 3 );
  51. var colors = new Float32Array( vertices.length * 3 );
  52. var sizes = new Float32Array( vertices.length );
  53. var vertex;
  54. var color = new THREE.Color();
  55. for ( var i = 0, l = vertices.length; i < l; i ++ ) {
  56. vertex = vertices[ i ];
  57. vertex.toArray( positions, i * 3 );
  58. color.setHSL( 0.01 + 0.1 * ( i / l ), 1.0, 0.5 );
  59. color.toArray( colors, i * 3 );
  60. sizes[ i ] = PARTICLE_SIZE * 0.5;
  61. }
  62. var geometry = new THREE.BufferGeometry();
  63. geometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
  64. geometry.setAttribute( 'customColor', new THREE.BufferAttribute( colors, 3 ) );
  65. geometry.setAttribute( 'size', new THREE.BufferAttribute( sizes, 1 ) );
  66. //
  67. var material = new THREE.ShaderMaterial( {
  68. uniforms: {
  69. color: { value: new THREE.Color( 0xffffff ) },
  70. pointTexture: { value: new THREE.TextureLoader().load( "textures/sprites/disc.png" ) }
  71. },
  72. vertexShader: document.getElementById( 'vertexshader' ).textContent,
  73. fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
  74. alphaTest: 0.9
  75. } );
  76. //
  77. particles = new THREE.Points( geometry, material );
  78. scene.add( particles );
  79. //
  80. renderer = new THREE.WebGLRenderer();
  81. renderer.setPixelRatio( window.devicePixelRatio );
  82. renderer.setSize( window.innerWidth, window.innerHeight );
  83. container.appendChild( renderer.domElement );
  84. //
  85. raycaster = new THREE.Raycaster();
  86. mouse = new THREE.Vector2();
  87. //
  88. stats = new Stats();
  89. container.appendChild( stats.dom );
  90. //
  91. window.addEventListener( 'resize', onWindowResize, false );
  92. document.addEventListener( 'mousemove', onDocumentMouseMove, false );
  93. }
  94. function onDocumentMouseMove( event ) {
  95. event.preventDefault();
  96. mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
  97. mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
  98. }
  99. function onWindowResize() {
  100. camera.aspect = window.innerWidth / window.innerHeight;
  101. camera.updateProjectionMatrix();
  102. renderer.setSize( window.innerWidth, window.innerHeight );
  103. }
  104. function animate() {
  105. requestAnimationFrame( animate );
  106. render();
  107. stats.update();
  108. }
  109. function render() {
  110. particles.rotation.x += 0.0005;
  111. particles.rotation.y += 0.001;
  112. var geometry = particles.geometry;
  113. var attributes = geometry.attributes;
  114. raycaster.setFromCamera( mouse, camera );
  115. intersects = raycaster.intersectObject( particles );
  116. if ( intersects.length > 0 ) {
  117. if ( INTERSECTED != intersects[ 0 ].index ) {
  118. attributes.size.array[ INTERSECTED ] = PARTICLE_SIZE;
  119. INTERSECTED = intersects[ 0 ].index;
  120. attributes.size.array[ INTERSECTED ] = PARTICLE_SIZE * 1.25;
  121. attributes.size.needsUpdate = true;
  122. }
  123. } else if ( INTERSECTED !== null ) {
  124. attributes.size.array[ INTERSECTED ] = PARTICLE_SIZE;
  125. attributes.size.needsUpdate = true;
  126. INTERSECTED = null;
  127. }
  128. renderer.render( scene, camera );
  129. }
  130. </script>
  131. </body>
  132. </html>