FlakesTexture.js 937 B

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. ( function () {
  2. class FlakesTexture {
  3. constructor( width = 512, height = 512 ) {
  4. const canvas = document.createElement( 'canvas' );
  5. canvas.width = width;
  6. canvas.height = height;
  7. const context = canvas.getContext( '2d' );
  8. context.fillStyle = 'rgb(127,127,255)';
  9. context.fillRect( 0, 0, width, height );
  10. for ( let i = 0; i < 4000; i ++ ) {
  11. const x = Math.random() * width;
  12. const y = Math.random() * height;
  13. const r = Math.random() * 3 + 3;
  14. let nx = Math.random() * 2 - 1;
  15. let ny = Math.random() * 2 - 1;
  16. let nz = 1.5;
  17. const l = Math.sqrt( nx * nx + ny * ny + nz * nz );
  18. nx /= l;
  19. ny /= l;
  20. nz /= l;
  21. context.fillStyle = 'rgb(' + ( nx * 127 + 127 ) + ',' + ( ny * 127 + 127 ) + ',' + nz * 255 + ')';
  22. context.beginPath();
  23. context.arc( x, y, r, 0, Math.PI * 2 );
  24. context.fill();
  25. }
  26. return canvas;
  27. }
  28. }
  29. THREE.FlakesTexture = FlakesTexture;
  30. } )();