经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
JavaScript实现五种不同烟花特效
来源:jb51  时间:2022/1/17 12:16:58  对本文有异议

 一、简单大气的烟花

演示地址:http://haiyong.site/fireworks1

HTML代码:

这里的HTML代码很简短

  1. <div>
  2. <canvas id="canvas"></canvas>
  3. </div>

CSS代码

css也只有这两段内容

  1. body{
  2. background:black;
  3. overflow:hidden;
  4. margin:0;
  5. }
  6. canvas{
  7. background:#000;
  8. }

JS代码

所有的源码都在这里了,复制粘贴即可

  1. window.addEventListener("resize", resizeCanvas, false);
  2. window.addEventListener("DOMContentLoaded", onLoad, false);
  3. window.requestAnimationFrame =
  4. window.requestAnimationFrame ||
  5. window.webkitRequestAnimationFrame ||
  6. window.mozRequestAnimationFrame ||
  7. window.oRequestAnimationFrame ||
  8. window.msRequestAnimationFrame ||
  9. function (callback) {
  10. window.setTimeout(callback, 1000/60);
  11. };
  12. var canvas, ctx, w, h, particles = [], probability = 0.04,
  13. xPoint, yPoint;
  14. function onLoad() {
  15. canvas = document.getElementById("canvas");
  16. ctx = canvas.getContext("2d");
  17. resizeCanvas();
  18. window.requestAnimationFrame(updateWorld);
  19. }
  20. function resizeCanvas() {
  21. if (!!canvas) {
  22. w = canvas.width = window.innerWidth;
  23. h = canvas.height = window.innerHeight;
  24. }
  25. }
  26. function updateWorld() {
  27. update();
  28. paint();
  29. window.requestAnimationFrame(updateWorld);
  30. }
  31. function update() {
  32. if (particles.length < 500 && Math.random() < probability) {
  33. createFirework();
  34. }
  35. var alive = [];
  36. for (var i=0; i<particles.length; i++) {
  37. if (particles[i].move()) {
  38. alive.push(particles[i]);
  39. }
  40. }
  41. particles = alive;
  42. }
  43. function paint() {
  44. ctx.globalCompositeOperation = 'source-over';
  45. ctx.fillStyle = "rgba(0,0,0,0.2)";
  46. ctx.fillRect(0, 0, w, h);
  47. ctx.globalCompositeOperation = 'lighter';
  48. for (var i=0; i<particles.length; i++) {
  49. particles[i].draw(ctx);
  50. }
  51. }
  52. function createFirework() {
  53. xPoint = Math.random()*(w-200)+100;
  54. yPoint = Math.random()*(h-200)+100;
  55. var nFire = Math.random()*50+100;
  56. var c = "rgb("+(~~(Math.random()*200+55))+","
  57. +(~~(Math.random()*200+55))+","+(~~(Math.random()*200+55))+")";
  58. for (var i=0; i<nFire; i++) {
  59. var particle = new Particle();
  60. particle.color = c;
  61. var vy = Math.sqrt(25-particle.vx*particle.vx);
  62. if (Math.abs(particle.vy) > vy) {
  63. particle.vy = particle.vy>0 ? vy: -vy;
  64. }
  65. particles.push(particle);
  66. }
  67. }
  68. function Particle() {
  69. this.w = this.h = Math.random()*4+1;
  70. this.x = xPoint-this.w/2;
  71. this.y = yPoint-this.h/2;
  72. this.vx = (Math.random()-0.5)*10;
  73. this.vy = (Math.random()-0.5)*10;
  74. this.alpha = Math.random()*.5+.5;
  75. this.color;
  76. }
  77. Particle.prototype = {
  78. gravity: 0.05,
  79. move: function () {
  80. this.x += this.vx;
  81. this.vy += this.gravity;
  82. this.y += this.vy;
  83. this.alpha -= 0.01;
  84. if (this.x <= -this.w || this.x >= screen.width ||
  85. this.y >= screen.height ||
  86. this.alpha <= 0) {
  87. return false;
  88. }
  89. return true;
  90. },
  91. draw: function (c) {
  92. c.save();
  93. c.beginPath();
  94. c.translate(this.x+this.w/2, this.y+this.h/2);
  95. c.arc(0, 0, this.w, 0, Math.PI*2);
  96. c.fillStyle = this.color;
  97. c.globalAlpha = this.alpha;
  98. c.closePath();
  99. c.fill();
  100. c.restore();
  101. }
  102. }

二、在农村看到的烟花

演示地址:http://haiyong.site/fireworks2(需要使用电脑打开,没做响应式手机端打开一片黑,或者可以看看后面的烟花)

HTML代码:

这里的HTML代码还是一样的简短

  1. <div id="jsi-fireworks-container" class="container"></div>

CSS代码

css也只有这三段内容

  1. html, body{
  2. width: 100%;
  3. height: 100%;
  4. margin: 0;
  5. padding: 0;
  6. overflow: hidden;
  7. background-color: #101010;
  8. }
  9. .container{
  10. position: absolute;
  11. width: 500px;
  12. height: 500px;
  13. top: 50%;
  14. left: 50%;
  15. margin-top: -250px;
  16. margin-left: -250px;
  17. }
  18. canvas{
  19. position: absolute;
  20. top: 0;
  21. left: 0;
  22. }

JS代码

JS代码比较长,我这里放了一部分

  1. var RENDERER = {
  2. LEAF_INTERVAL_RANGE : {min : 100, max : 200},
  3. FIREWORK_INTERVAL_RANGE : {min : 20, max : 200},
  4. SKY_COLOR : 'hsla(210, 60%, %luminance%, 0.2)',
  5. STAR_COUNT : 100,
  6. init : function(){
  7. this.setParameters();
  8. this.reconstructMethod();
  9. this.createTwigs();
  10. this.createStars();
  11. this.render();
  12. },
  13. setParameters : function(){
  14. this.$container = $('#jsi-fireworks-container');
  15. this.width = this.$container.width();
  16. this.height = this.$container.height();
  17. this.distance = Math.sqrt(Math.pow(this.width / 2, 2) + Math.pow(this.height / 2, 2));
  18. this.contextFireworks = $('<canvas />').attr({width : this.width, height : this.height}).appendTo(this.$container).get(0).getContext('2d');
  19. this.contextTwigs = $('<canvas />').attr({width : this.width, height : this.height}).appendTo(this.$container).get(0).getContext('2d');
  20. this.twigs = [];
  21. this.leaves = [new LEAF(this.width, this.height, this)];
  22. this.stars = [];
  23. this.fireworks = [new FIREWORK(this.width, this.height, this)];
  24. this.leafInterval = this.getRandomValue(this.LEAF_INTERVAL_RANGE) | 0;
  25. this.maxFireworkInterval = this.getRandomValue(this.FIREWORK_INTERVAL_RANGE) | 0;
  26. this.fireworkInterval = this.maxFireworkInterval;
  27. },
  28. reconstructMethod : function(){
  29. this.render = this.render.bind(this);
  30. },
  31. getRandomValue : function(range){
  32. return range.min + (range.max - range.min) * Math.random();
  33. },
  34. createTwigs : function(){
  35. this.twigs.push(new TWIG(this.width, this.height, 0, 0, Math.PI * 3 / 4, 0));
  36. this.twigs.push(new TWIG(this.width, this.height, this.width, 0, -Math.PI * 3 / 4, Math.PI));
  37. this.twigs.push(new TWIG(this.width, this.height, 0, this.height, Math.PI / 4, Math.PI));
  38. this.twigs.push(new TWIG(this.width, this.height, this.width, this.height, -Math.PI / 4, 0));
  39. },
  40. createStars : function(){
  41. for(var i = 0, length = this.STAR_COUNT; i < length; i++){
  42. this.stars.push(new STAR(this.width, this.height, this.contextTwigs, this));
  43. }
  44. },
  45. render : function(){
  46. requestAnimationFrame(this.render);
  47. var maxOpacity = 0,
  48. contextTwigs = this.contextTwigs,
  49. contextFireworks = this.contextFireworks;
  50. for(var i = this.fireworks.length - 1; i >= 0; i--){
  51. maxOpacity = Math.max(maxOpacity, this.fireworks[i].getOpacity());
  52. }
  53. contextTwigs.clearRect(0, 0, this.width, this.height);
  54. contextFireworks.fillStyle = this.SKY_COLOR.replace('%luminance', 5 + maxOpacity * 15);
  55. contextFireworks.fillRect(0, 0, this.width, this.height);
  56. for(var i = this.fireworks.length - 1; i >= 0; i--){
  57. if(!this.fireworks[i].render(contextFireworks)){
  58. this.fireworks.splice(i, 1);
  59. }
  60. }
  61. for(var i = this.stars.length - 1; i >= 0; i--){
  62. this.stars[i].render(contextTwigs);
  63. }
  64. for(var i = this.twigs.length - 1; i >= 0; i--){
  65. this.twigs[i].render(contextTwigs);
  66. }
  67. for(var i = this.leaves.length - 1; i >= 0; i--){
  68. if(!this.leaves[i].render(contextTwigs)){
  69. this.leaves.splice(i, 1);
  70. }
  71. }
  72. if(--this.leafInterval == 0){
  73. this.leaves.push(new LEAF(this.width, this.height, this));
  74. this.leafInterval = this.getRandomValue(this.LEAF_INTERVAL_RANGE) | 0;
  75. }
  76. if(--this.fireworkInterval == 0){
  77. this.fireworks.push(new FIREWORK(this.width, this.height, this));
  78. this.maxFireworkInterval = this.getRandomValue(this.FIREWORK_INTERVAL_RANGE) | 0;
  79. this.fireworkInterval = this.maxFireworkInterval;
  80. }
  81. }
  82. };

三、可点击的烟花

演示地址:http://haiyong.site/fireworks3

HTML代码:

  1. <canvas id="canvas"></canvas>

CSS代码

  1. body{
  2. ? background-color: #000;
  3. }
  4.  
  5. canvas{
  6. ? display: block;
  7. ? margin: auto;
  8. ? -webkit-tap-highlight-color:rgba(0,0,0,0);
  9. ? -webkit-user-select:none;?
  10. }

完整JS代码

  1. (function() {
  2. ? var Fireworks, GRAVITY, K, SPEED, ToRadian, canvas, context, ctx, fireBoss, repeat, stage;?? ??? ??? ?
  3. ? canvas = document.getElementById("canvas");?? ??? ??? ?
  4. ? context = canvas.getContext("2d");?? ??? ??? ?
  5. ? canvas.width = window.innerWidth;?? ??? ??? ?
  6. ? canvas.height = window.innerHeight;?? ??? ??? ?
  7. ? stage = new createjs.Stage(canvas);?? ??? ??? ?
  8. ? stage.autoClear = false;?? ??? ??? ?
  9. ? ctx = canvas.getContext("2d");?? ??? ??? ?
  10. ? ctx.fillStyle = "rgba(0, 0, 0, 0)";?? ??? ??? ?
  11. ? ctx.fillRect(0, 0, canvas.width, canvas.height);?? ??? ??? ?
  12. ? createjs.Ticker.setFPS(50);?? ??? ??? ?
  13. ? createjs.Touch.enable(stage);?? ??? ??? ?
  14. ? stage.update();
  15.  
  16. ? // 重力
  17. ? GRAVITY = 1;
  18.  
  19. ? // 抵抗
  20. ? K = 0.9;
  21.  
  22. ? // 速度
  23. ? SPEED = 12;
  24.  
  25. ? // 从度数转换为弧度
  26. ? ToRadian = function(degree) {
  27. ? ? return degree * Math.PI / 180.0;
  28. ? };
  29.  
  30. ? // 制作烟花的class
  31. ? Fireworks = class Fireworks {
  32. ? ? constructor(sx = 100, sy = 100, particles = 70) {
  33. ? ? ? var circle, i, j, rad, ref, speed;
  34. ? ? ? this.sx = sx;
  35. ? ? ? this.sy = sy;
  36. ? ? ? this.particles = particles;
  37. ? ? ? this.sky = new createjs.Container();
  38. ? ? ? this.r = 0;
  39. ? ? ? this.h = Math.random() * 360 | 0;
  40. ? ? ? this.s = 100;
  41. ? ? ? this.l = 50;
  42. ? ? ? this.size = 3;
  43. ? ? ? for (i = j = 0, ref = this.particles; (0 <= ref ? j < ref : j > ref); i = 0 <= ref ? ++j : --j) {
  44. ? ? ? ? speed = Math.random() * 12 + 2;
  45. ? ? ? ? circle = new createjs.Shape();
  46. ? ? ? ? circle.graphics.f(`hsla(${this.h}, ${this.s}%, ${this.l}%, 1)`).dc(0, 0, this.size);
  47. ? ? ? ? circle.snapToPixel = true;
  48. ? ? ? ? circle.compositeOperation = "lighter";
  49. ? ? ? ? rad = ToRadian(Math.random() * 360 | 0);
  50. ? ? ? ? circle.set({
  51. ? ? ? ? ? x: this.sx,
  52. ? ? ? ? ? y: this.sy,
  53. ? ? ? ? ? vx: Math.cos(rad) * speed,
  54. ? ? ? ? ? vy: Math.sin(rad) * speed,
  55. ? ? ? ? ? rad: rad
  56. ? ? ? ? });
  57. ? ? ? ? this.sky.addChild(circle);
  58. ? ? ? }
  59. ? ? ? stage.addChild(this.sky);
  60. ? ? }
  61.  
  62. ? ? explode() {
  63. ? ? ? var circle, j, p, ref;
  64. ? ? ? if (this.sky) {
  65. ? ? ? ? ++this.h;
  66. ? ? ? ? for (p = j = 0, ref = this.sky.getNumChildren(); (0 <= ref ? j < ref : j > ref); p = 0 <= ref ? ++j : --j) {
  67. ? ? ? ? ? circle = this.sky.getChildAt(p);
  68. ? ? ? ? ? // 加速度
  69. ? ? ? ? ? circle.vx = circle.vx * K;
  70. ? ? ? ? ? circle.vy = circle.vy * K;
  71. ? ? ? ? ? // 位置计算
  72. ? ? ? ? ? circle.x += circle.vx;
  73. ? ? ? ? ? circle.y += circle.vy + GRAVITY;
  74.  
  75. ? ? ? ? ? this.l = Math.random() * 100;
  76. ? ? ? ? ? // 粒度
  77. ? ? ? ? ? this.size = this.size - 0.001;
  78. ? ? ? ? ? if (this.size > 0) {
  79. ? ? ? ? ? ? circle.graphics.c().f(`hsla(${this.h}, 100%, ${this.l}%, 1)`).dc(0, 0, this.size);
  80. ? ? ? ? ? }
  81. ? ? ? ? }
  82. ? ? ? ? if (this.sky.alpha > 0.1) {
  83. ? ? ? ? ? this.sky.alpha -= K / 50;
  84. ? ? ? ? } else {
  85. ? ? ? ? ? stage.removeChild(this.sky);
  86. ? ? ? ? ? this.sky = null;
  87. ? ? ? ? }
  88. ? ? ? } else {?? ??? ?
  89. ? ? ? }
  90. ? ? }?? ??? ?
  91. ? };
  92.  
  93. ? fireBoss = [];
  94.  
  95. ? setInterval(function() {
  96. ? ? ctx.fillStyle = "rgba(0, 0, 0, 0.1)";
  97. ? ? ctx.fillRect(0, 0, canvas.width, canvas.height);
  98. ? }, 40);
  99.  
  100. ? setInterval(function() {
  101. ? ? var x, y;
  102. ? ? x = Math.random() * canvas.width | 0;
  103. ? ? y = Math.random() * canvas.height | 0;
  104. ? ? fireBoss.push(new Fireworks(x, y));
  105. ? ? return fireBoss.push(new Fireworks(x, y));
  106. ? }, 1300);
  107.  
  108. ? repeat = function() {
  109. ? ? var fireworks, j, ref;
  110. ? ? for (fireworks = j = 0, ref = fireBoss.length; (0 <= ref ? j < ref : j > ref); fireworks = 0 <= ref ? ++j : --j) {
  111. ? ? ? if (fireBoss[fireworks].sky) {
  112. ? ? ? ? fireBoss[fireworks].explode();
  113. ? ? ? }
  114. ? ? }
  115. ? ? stage.update();
  116. ? };
  117.  
  118. ? createjs.Ticker.on("tick", repeat);
  119.  
  120. ? stage.addEventListener("stagemousedown", function() {
  121. ? ? fireBoss.push(new Fireworks(stage.mouseX, stage.mouseY));
  122. ? ? return fireBoss.push(new Fireworks(stage.mouseX, stage.mouseY));
  123. ? });?? ??? ??? ?
  124. }).call(this);

四、3D旋转烟花

演示地址:http://haiyong.site/fireworks4

HTML代码:

  1. <canvas id="canvas"></canvas>

CSS代码

  1. html,body{
  2. ? margin:0px;
  3. ? width:100%;
  4. ? height:100%;
  5. ? overflow:hidden;
  6. ? background:#000;
  7. }
  8.  
  9. #canvas{
  10. ? width:100%;
  11. ? height:100%;
  12. }

部分JS代码

JS代码比较长我就不全列出来了

  1. ?function initVars(){
  2.  
  3. ? pi=Math.PI;
  4. ? ctx=canvas.getContext("2d");
  5. ? canvas.width=canvas.clientWidth;
  6. ? canvas.height=canvas.clientHeight;
  7. ? cx=canvas.width/2;
  8. ? cy=canvas.height/2;
  9. ? playerZ=-25;
  10. ? playerX=playerY=playerVX=playerVY=playerVZ=pitch=yaw=pitchV=yawV=0;
  11. ? scale=600;
  12. ? seedTimer=0;seedInterval=5,seedLife=100;gravity=.02;
  13. ? seeds=new Array();
  14. ? sparkPics=new Array();
  15. ? s="https://cantelope.org/NYE/";
  16. ? for(i=1;i<=10;++i){
  17. ? ? sparkPic=new Image();
  18. ? ? sparkPic.src=s+"spark"+i+".png";
  19. ? ? sparkPics.push(sparkPic);
  20. ? }
  21. ? sparks=new Array();
  22. ? pow1=new Audio(s+"pow1.ogg");
  23. ? pow2=new Audio(s+"pow2.ogg");
  24. ? pow3=new Audio(s+"pow3.ogg");
  25. ? pow4=new Audio(s+"pow4.ogg");
  26. ? frames = 0;
  27. }
  28.  
  29. function rasterizePoint(x,y,z){
  30.  
  31. ? var p,d;
  32. ? x-=playerX;
  33. ? y-=playerY;
  34. ? z-=playerZ;
  35. ? p=Math.atan2(x,z);
  36. ? d=Math.sqrt(x*x+z*z);
  37. ? x=Math.sin(p-yaw)*d;
  38. ? z=Math.cos(p-yaw)*d;
  39. ? p=Math.atan2(y,z);
  40. ? d=Math.sqrt(y*y+z*z);
  41. ? y=Math.sin(p-pitch)*d;
  42. ? z=Math.cos(p-pitch)*d;
  43. ? var rx1=-1000,ry1=1,rx2=1000,ry2=1,rx3=0,ry3=0,rx4=x,ry4=z,uc=(ry4-ry3)*(rx2-rx1)-(rx4-rx3)*(ry2-ry1);
  44. ? if(!uc) return {x:0,y:0,d:-1};
  45. ? var ua=((rx4-rx3)*(ry1-ry3)-(ry4-ry3)*(rx1-rx3))/uc;
  46. ? var ub=((rx2-rx1)*(ry1-ry3)-(ry2-ry1)*(rx1-rx3))/uc;
  47. ? if(!z)z=.000000001;
  48. ? if(ua>0&&ua<1&&ub>0&&ub<1){
  49. ? ? return {
  50. ? ? ? x:cx+(rx1+ua*(rx2-rx1))*scale,
  51. ? ? ? y:cy+y/z*scale,
  52. ? ? ? d:Math.sqrt(x*x+y*y+z*z)
  53. ? ? };
  54. ? }else{
  55. ? ? return {
  56. ? ? ? x:cx+(rx1+ua*(rx2-rx1))*scale,
  57. ? ? ? y:cy+y/z*scale,
  58. ? ? ? d:-1
  59. ? ? };
  60. ? }
  61. }
  62.  
  63. function spawnSeed(){
  64. ??
  65. ? seed=new Object();
  66. ? seed.x=-50+Math.random()*100;
  67. ? seed.y=25;
  68. ? seed.z=-50+Math.random()*100;
  69. ? seed.vx=.1-Math.random()*.2;
  70. ? seed.vy=-1.5;//*(1+Math.random()/2);
  71. ? seed.vz=.1-Math.random()*.2;
  72. ? seed.born=frames;
  73. ? seeds.push(seed);
  74. }

五、可拖动视角的自定义烟花

演示地址:http://haiyong.site/fireworks5

HTML代码:

  1. <div id="WebGL-output"></div>

CSS代码

  1. body {
  2. margin: 0;
  3. overflow: hidden;
  4. background: -webkit-linear-gradient(0deg, rgb(0, 12, 91), rgb(0, 0, 0));
  5. background: linear-gradient(0deg, rgb(0, 12, 91), rgb(0, 0, 0));
  6. }

部分JS代码

JS代码比较长我就不全列出来了

  1. let scene,
  2. camera,
  3. renderer,
  4. orbitControls,
  5. planeMesh,
  6. canvasTexture,
  7. isAutoLaunch = true;
  8.  
  9. const gravity = new THREE.Vector3(0, -0.005, 0);
  10. const friction = 0.998;
  11. const noise = new SimplexNoise();
  12. const textureSize = 128.0;
  13. const fireworksInstances = [];
  14.  
  15. let outputDom;
  16.  
  17. const getOffsetXYZ = i => {
  18. ? const offset = 3;
  19. ? const index = i * offset;
  20. ? const x = index;
  21. ? const y = index + 1;
  22. ? const z = index + 2;
  23. ? return { x, y, z };
  24. };
  25.  
  26. const getOffsetRGBA = i => {
  27. ? const offset = 4;
  28. ? const index = i * offset;
  29. ? const r = index;
  30. ? const g = index + 1;
  31. ? const b = index + 2;
  32. ? const a = index + 3;
  33. ? return { r, g, b, a };
  34. };
  35.  
  36. const gui = new dat.GUI();
  37. const guiControls = new function () {
  38. ? this.ParticleSize = 300;
  39. ? this.AutoLaunch = true;
  40. }();
  41. gui.add(guiControls, 'ParticleSize', 100, 600);
  42. gui.add(guiControls, 'AutoLaunch').onChange(e => {
  43. ? isAutoLaunch = e;
  44. ? outputDom.style.cursor = isAutoLaunch ? 'auto' : 'pointer';
  45. });
  46.  
  47. const getRandomNum = (max = 0, min = 0) => Math.floor(Math.random() * (max + 1 - min)) + min;
  48.  
  49. const launchFireWorks = () => {
  50. ? if (fireworksInstances.length > 5) return;
  51. ? const fw = Math.random() > 8 ? new BasicFIreWorks() : new RichFIreWorks();
  52. ? fireworksInstances.push(fw);
  53. ? scene.add(fw.meshGroup);
  54. };
  55.  
  56. const autoLaunch = () => {
  57. ? if (!isAutoLaunch) return;
  58. ? if (Math.random() > 0.7) launchFireWorks();
  59. };
  60.  
  61. const drawRadialGradation = (ctx, canvasRadius, canvasW, canvasH) => {
  62. ? ctx.save();
  63. ? const gradient = ctx.createRadialGradient(canvasRadius, canvasRadius, 0, canvasRadius, canvasRadius, canvasRadius);
  64. ? gradient.addColorStop(0.0, 'rgba(255,255,255,1.0)');
  65. ? gradient.addColorStop(0.5, 'rgba(255,255,255,0.5)');
  66. ? gradient.addColorStop(1.0, 'rgba(255,255,255,0)');
  67. ? ctx.fillStyle = gradient;
  68. ? ctx.fillRect(0, 0, canvasW, canvasH);
  69. ? ctx.restore();
  70. };
  71.  
  72. const getTexture = () => {
  73. ? const canvas = document.createElement('canvas');
  74. ? const ctx = canvas.getContext('2d');
  75.  
  76. ? const diameter = textureSize;
  77. ? canvas.width = diameter;
  78. ? canvas.height = diameter;
  79. ? const canvasRadius = diameter / 2;
  80.  
  81. ? drawRadialGradation(ctx, canvasRadius, canvas.width, canvas.height);
  82. ? const texture = new THREE.Texture(canvas);
  83. ? texture.type = THREE.FloatType;
  84. ? texture.needsUpdate = true;
  85. ? return texture;
  86. };
  87.  
  88. canvasTexture = getTexture();
  89.  
  90. const getPointMesh = (num, vels, type) => {
  91.  
  92. ? const bufferGeometry = new THREE.BufferGeometry();
  93. ? const vertices = [];
  94. ? const velocities = [];
  95. ? const colors = [];
  96. ? const adjustSizes = [];
  97. ? const masses = [];
  98. ? const colorType = Math.random() > 0.3 ? 'single' : 'multiple';
  99. ? const singleColor = getRandomNum(100, 20) * 0.01;
  100. ? const multipleColor = () => getRandomNum(100, 1) * 0.01;
  101. ? let rgbType;
  102. ? const rgbTypeDice = Math.random();
  103. ? if (rgbTypeDice > 0.66) {
  104. ? ? rgbType = 'red';
  105. ? } else if (rgbTypeDice > 0.33) {
  106. ? ? rgbType = 'green';
  107. ? } else {
  108. ? ? rgbType = 'blue';
  109. ? }
  110. ? for (let i = 0; i < num; i++) {
  111. ? ? const pos = new THREE.Vector3(0, 0, 0);
  112. ? ? vertices.push(pos.x, pos.y, pos.z);
  113. ? ? velocities.push(vels[i].x, vels[i].y, vels[i].z);
  114. ? ? if (type === 'seed') {
  115. ? ? ? let size;
  116. ? ? ? if (type === 'trail') {
  117. ? ? ? ? size = Math.random() * 0.1 + 0.1;
  118. ? ? ? } else {
  119. ? ? ? ? size = Math.pow(vels[i].y, 2) * 0.04;
  120. ? ? ? }
  121. ? ? ? if (i === 0) size *= 1.1;
  122. ? ? ? adjustSizes.push(size);
  123. ? ? ? masses.push(size * 0.017);
  124. ? ? ? colors.push(1.0, 1.0, 1.0, 1.0);
  125. ? ? } else {
  126. ? ? ? const size = getRandomNum(guiControls.ParticleSize, 10) * 0.001;
  127. ? ? ? adjustSizes.push(size);
  128. ? ? ? masses.push(size * 0.017);
  129. ? ? ? if (colorType === 'multiple') {
  130. ? ? ? ? colors.push(multipleColor(), multipleColor(), multipleColor(), 1.0);
  131. ? ? ? } else {
  132. ? ? ? ? switch (rgbType) {
  133. ? ? ? ? ? case 'red':
  134. ? ? ? ? ? ? colors.push(singleColor, 0.1, 0.1, 1.0);
  135. ? ? ? ? ? ? break;
  136. ? ? ? ? ? case 'green':
  137. ? ? ? ? ? ? colors.push(0.1, singleColor, 0.1, 1.0);
  138. ? ? ? ? ? ? break;
  139. ? ? ? ? ? case 'blue':
  140. ? ? ? ? ? ? colors.push(0.1, 0.1, singleColor, 1.0);
  141. ? ? ? ? ? ? break;
  142. ? ? ? ? ? default:
  143. ? ? ? ? ? ? colors.push(singleColor, 0.1, 0.1, 1.0);}
  144.  
  145. ? ? ? }
  146. ? ? }
  147. ? }
  148. ? bufferGeometry.addAttribute('position', new THREE.Float32BufferAttribute(vertices, 3).setDynamic(true));
  149. ? bufferGeometry.addAttribute('velocity', new THREE.Float32BufferAttribute(velocities, 3).setDynamic(true));
  150. ? bufferGeometry.addAttribute('color', new THREE.Float32BufferAttribute(colors, 4).setDynamic(true));
  151. ? bufferGeometry.addAttribute('adjustSize', new THREE.Float32BufferAttribute(adjustSizes, 1).setDynamic(true));
  152. ? bufferGeometry.addAttribute('mass', new THREE.Float32BufferAttribute(masses, 1).setDynamic(true));

以上就是JavaScript实现五种不同烟花特效的详细内容,更多关于JavaScript烟花特效的资料请关注w3xue其它相关文章!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号