一、简单大气的烟花
演示地址:http://haiyong.site/fireworks1

HTML代码:
这里的HTML代码很简短
- <div>
- <canvas id="canvas"></canvas>
- </div>
CSS代码
css也只有这两段内容
- body{
- background:black;
- overflow:hidden;
- margin:0;
- }
- canvas{
- background:#000;
- }
JS代码
所有的源码都在这里了,复制粘贴即可
- window.addEventListener("resize", resizeCanvas, false);
- window.addEventListener("DOMContentLoaded", onLoad, false);
- window.requestAnimationFrame =
- window.requestAnimationFrame ||
- window.webkitRequestAnimationFrame ||
- window.mozRequestAnimationFrame ||
- window.oRequestAnimationFrame ||
- window.msRequestAnimationFrame ||
- function (callback) {
- window.setTimeout(callback, 1000/60);
- };
- var canvas, ctx, w, h, particles = [], probability = 0.04,
- xPoint, yPoint;
- function onLoad() {
- canvas = document.getElementById("canvas");
- ctx = canvas.getContext("2d");
- resizeCanvas();
- window.requestAnimationFrame(updateWorld);
- }
-
- function resizeCanvas() {
- if (!!canvas) {
- w = canvas.width = window.innerWidth;
- h = canvas.height = window.innerHeight;
- }
- }
-
- function updateWorld() {
- update();
- paint();
- window.requestAnimationFrame(updateWorld);
- }
-
- function update() {
- if (particles.length < 500 && Math.random() < probability) {
- createFirework();
- }
- var alive = [];
- for (var i=0; i<particles.length; i++) {
- if (particles[i].move()) {
- alive.push(particles[i]);
- }
- }
- particles = alive;
- }
-
- function paint() {
- ctx.globalCompositeOperation = 'source-over';
- ctx.fillStyle = "rgba(0,0,0,0.2)";
- ctx.fillRect(0, 0, w, h);
- ctx.globalCompositeOperation = 'lighter';
- for (var i=0; i<particles.length; i++) {
- particles[i].draw(ctx);
- }
- }
-
- function createFirework() {
- xPoint = Math.random()*(w-200)+100;
- yPoint = Math.random()*(h-200)+100;
- var nFire = Math.random()*50+100;
- var c = "rgb("+(~~(Math.random()*200+55))+","
- +(~~(Math.random()*200+55))+","+(~~(Math.random()*200+55))+")";
- for (var i=0; i<nFire; i++) {
- var particle = new Particle();
- particle.color = c;
- var vy = Math.sqrt(25-particle.vx*particle.vx);
- if (Math.abs(particle.vy) > vy) {
- particle.vy = particle.vy>0 ? vy: -vy;
- }
- particles.push(particle);
- }
- }
-
- function Particle() {
- this.w = this.h = Math.random()*4+1;
- this.x = xPoint-this.w/2;
- this.y = yPoint-this.h/2;
- this.vx = (Math.random()-0.5)*10;
- this.vy = (Math.random()-0.5)*10;
- this.alpha = Math.random()*.5+.5;
- this.color;
- }
-
- Particle.prototype = {
- gravity: 0.05,
- move: function () {
- this.x += this.vx;
- this.vy += this.gravity;
- this.y += this.vy;
- this.alpha -= 0.01;
- if (this.x <= -this.w || this.x >= screen.width ||
- this.y >= screen.height ||
- this.alpha <= 0) {
- return false;
- }
- return true;
- },
- draw: function (c) {
- c.save();
- c.beginPath();
- c.translate(this.x+this.w/2, this.y+this.h/2);
- c.arc(0, 0, this.w, 0, Math.PI*2);
- c.fillStyle = this.color;
- c.globalAlpha = this.alpha;
- c.closePath();
- c.fill();
- c.restore();
- }
- }
二、在农村看到的烟花
演示地址:http://haiyong.site/fireworks2(需要使用电脑打开,没做响应式手机端打开一片黑,或者可以看看后面的烟花)

HTML代码:
这里的HTML代码还是一样的简短
- <div id="jsi-fireworks-container" class="container"></div>
CSS代码
css也只有这三段内容
- html, body{
- width: 100%;
- height: 100%;
- margin: 0;
- padding: 0;
- overflow: hidden;
- background-color: #101010;
- }
- .container{
- position: absolute;
- width: 500px;
- height: 500px;
- top: 50%;
- left: 50%;
- margin-top: -250px;
- margin-left: -250px;
- }
- canvas{
- position: absolute;
- top: 0;
- left: 0;
- }
JS代码
JS代码比较长,我这里放了一部分
- var RENDERER = {
- LEAF_INTERVAL_RANGE : {min : 100, max : 200},
- FIREWORK_INTERVAL_RANGE : {min : 20, max : 200},
- SKY_COLOR : 'hsla(210, 60%, %luminance%, 0.2)',
- STAR_COUNT : 100,
-
- init : function(){
- this.setParameters();
- this.reconstructMethod();
- this.createTwigs();
- this.createStars();
- this.render();
- },
- setParameters : function(){
- this.$container = $('#jsi-fireworks-container');
- this.width = this.$container.width();
- this.height = this.$container.height();
- this.distance = Math.sqrt(Math.pow(this.width / 2, 2) + Math.pow(this.height / 2, 2));
- this.contextFireworks = $('<canvas />').attr({width : this.width, height : this.height}).appendTo(this.$container).get(0).getContext('2d');
- this.contextTwigs = $('<canvas />').attr({width : this.width, height : this.height}).appendTo(this.$container).get(0).getContext('2d');
-
- this.twigs = [];
- this.leaves = [new LEAF(this.width, this.height, this)];
- this.stars = [];
- this.fireworks = [new FIREWORK(this.width, this.height, this)];
-
- this.leafInterval = this.getRandomValue(this.LEAF_INTERVAL_RANGE) | 0;
- this.maxFireworkInterval = this.getRandomValue(this.FIREWORK_INTERVAL_RANGE) | 0;
- this.fireworkInterval = this.maxFireworkInterval;
- },
- reconstructMethod : function(){
- this.render = this.render.bind(this);
- },
- getRandomValue : function(range){
- return range.min + (range.max - range.min) * Math.random();
- },
- createTwigs : function(){
- this.twigs.push(new TWIG(this.width, this.height, 0, 0, Math.PI * 3 / 4, 0));
- this.twigs.push(new TWIG(this.width, this.height, this.width, 0, -Math.PI * 3 / 4, Math.PI));
- this.twigs.push(new TWIG(this.width, this.height, 0, this.height, Math.PI / 4, Math.PI));
- this.twigs.push(new TWIG(this.width, this.height, this.width, this.height, -Math.PI / 4, 0));
- },
- createStars : function(){
- for(var i = 0, length = this.STAR_COUNT; i < length; i++){
- this.stars.push(new STAR(this.width, this.height, this.contextTwigs, this));
- }
- },
- render : function(){
- requestAnimationFrame(this.render);
-
- var maxOpacity = 0,
- contextTwigs = this.contextTwigs,
- contextFireworks = this.contextFireworks;
-
- for(var i = this.fireworks.length - 1; i >= 0; i--){
- maxOpacity = Math.max(maxOpacity, this.fireworks[i].getOpacity());
- }
- contextTwigs.clearRect(0, 0, this.width, this.height);
- contextFireworks.fillStyle = this.SKY_COLOR.replace('%luminance', 5 + maxOpacity * 15);
- contextFireworks.fillRect(0, 0, this.width, this.height);
-
- for(var i = this.fireworks.length - 1; i >= 0; i--){
- if(!this.fireworks[i].render(contextFireworks)){
- this.fireworks.splice(i, 1);
- }
- }
- for(var i = this.stars.length - 1; i >= 0; i--){
- this.stars[i].render(contextTwigs);
- }
- for(var i = this.twigs.length - 1; i >= 0; i--){
- this.twigs[i].render(contextTwigs);
- }
- for(var i = this.leaves.length - 1; i >= 0; i--){
- if(!this.leaves[i].render(contextTwigs)){
- this.leaves.splice(i, 1);
- }
- }
- if(--this.leafInterval == 0){
- this.leaves.push(new LEAF(this.width, this.height, this));
- this.leafInterval = this.getRandomValue(this.LEAF_INTERVAL_RANGE) | 0;
- }
- if(--this.fireworkInterval == 0){
- this.fireworks.push(new FIREWORK(this.width, this.height, this));
- this.maxFireworkInterval = this.getRandomValue(this.FIREWORK_INTERVAL_RANGE) | 0;
- this.fireworkInterval = this.maxFireworkInterval;
- }
- }
- };
三、可点击的烟花
演示地址:http://haiyong.site/fireworks3

HTML代码:
- <canvas id="canvas"></canvas>
CSS代码
- body{
- ? background-color: #000;
- }
-
- canvas{
- ? display: block;
- ? margin: auto;
- ? -webkit-tap-highlight-color:rgba(0,0,0,0);
- ? -webkit-user-select:none;?
- }
完整JS代码
- (function() {
- ? var Fireworks, GRAVITY, K, SPEED, ToRadian, canvas, context, ctx, fireBoss, repeat, stage;?? ??? ??? ?
- ? canvas = document.getElementById("canvas");?? ??? ??? ?
- ? context = canvas.getContext("2d");?? ??? ??? ?
- ? canvas.width = window.innerWidth;?? ??? ??? ?
- ? canvas.height = window.innerHeight;?? ??? ??? ?
- ? stage = new createjs.Stage(canvas);?? ??? ??? ?
- ? stage.autoClear = false;?? ??? ??? ?
- ? ctx = canvas.getContext("2d");?? ??? ??? ?
- ? ctx.fillStyle = "rgba(0, 0, 0, 0)";?? ??? ??? ?
- ? ctx.fillRect(0, 0, canvas.width, canvas.height);?? ??? ??? ?
- ? createjs.Ticker.setFPS(50);?? ??? ??? ?
- ? createjs.Touch.enable(stage);?? ??? ??? ?
- ? stage.update();
-
- ? // 重力
- ? GRAVITY = 1;
-
- ? // 抵抗
- ? K = 0.9;
-
- ? // 速度
- ? SPEED = 12;
-
- ? // 从度数转换为弧度
- ? ToRadian = function(degree) {
- ? ? return degree * Math.PI / 180.0;
- ? };
-
- ? // 制作烟花的class
- ? Fireworks = class Fireworks {
- ? ? constructor(sx = 100, sy = 100, particles = 70) {
- ? ? ? var circle, i, j, rad, ref, speed;
- ? ? ? this.sx = sx;
- ? ? ? this.sy = sy;
- ? ? ? this.particles = particles;
- ? ? ? this.sky = new createjs.Container();
- ? ? ? this.r = 0;
- ? ? ? this.h = Math.random() * 360 | 0;
- ? ? ? this.s = 100;
- ? ? ? this.l = 50;
- ? ? ? this.size = 3;
- ? ? ? for (i = j = 0, ref = this.particles; (0 <= ref ? j < ref : j > ref); i = 0 <= ref ? ++j : --j) {
- ? ? ? ? speed = Math.random() * 12 + 2;
- ? ? ? ? circle = new createjs.Shape();
- ? ? ? ? circle.graphics.f(`hsla(${this.h}, ${this.s}%, ${this.l}%, 1)`).dc(0, 0, this.size);
- ? ? ? ? circle.snapToPixel = true;
- ? ? ? ? circle.compositeOperation = "lighter";
- ? ? ? ? rad = ToRadian(Math.random() * 360 | 0);
- ? ? ? ? circle.set({
- ? ? ? ? ? x: this.sx,
- ? ? ? ? ? y: this.sy,
- ? ? ? ? ? vx: Math.cos(rad) * speed,
- ? ? ? ? ? vy: Math.sin(rad) * speed,
- ? ? ? ? ? rad: rad
- ? ? ? ? });
- ? ? ? ? this.sky.addChild(circle);
- ? ? ? }
- ? ? ? stage.addChild(this.sky);
- ? ? }
-
- ? ? explode() {
- ? ? ? var circle, j, p, ref;
- ? ? ? if (this.sky) {
- ? ? ? ? ++this.h;
- ? ? ? ? for (p = j = 0, ref = this.sky.getNumChildren(); (0 <= ref ? j < ref : j > ref); p = 0 <= ref ? ++j : --j) {
- ? ? ? ? ? circle = this.sky.getChildAt(p);
- ? ? ? ? ? // 加速度
- ? ? ? ? ? circle.vx = circle.vx * K;
- ? ? ? ? ? circle.vy = circle.vy * K;
- ? ? ? ? ? // 位置计算
- ? ? ? ? ? circle.x += circle.vx;
- ? ? ? ? ? circle.y += circle.vy + GRAVITY;
-
- ? ? ? ? ? this.l = Math.random() * 100;
- ? ? ? ? ? // 粒度
- ? ? ? ? ? this.size = this.size - 0.001;
- ? ? ? ? ? if (this.size > 0) {
- ? ? ? ? ? ? circle.graphics.c().f(`hsla(${this.h}, 100%, ${this.l}%, 1)`).dc(0, 0, this.size);
- ? ? ? ? ? }
- ? ? ? ? }
- ? ? ? ? if (this.sky.alpha > 0.1) {
- ? ? ? ? ? this.sky.alpha -= K / 50;
- ? ? ? ? } else {
- ? ? ? ? ? stage.removeChild(this.sky);
- ? ? ? ? ? this.sky = null;
- ? ? ? ? }
- ? ? ? } else {?? ??? ?
- ? ? ? }
- ? ? }?? ??? ?
- ? };
-
- ? fireBoss = [];
-
- ? setInterval(function() {
- ? ? ctx.fillStyle = "rgba(0, 0, 0, 0.1)";
- ? ? ctx.fillRect(0, 0, canvas.width, canvas.height);
- ? }, 40);
-
- ? setInterval(function() {
- ? ? var x, y;
- ? ? x = Math.random() * canvas.width | 0;
- ? ? y = Math.random() * canvas.height | 0;
- ? ? fireBoss.push(new Fireworks(x, y));
- ? ? return fireBoss.push(new Fireworks(x, y));
- ? }, 1300);
-
- ? repeat = function() {
- ? ? var fireworks, j, ref;
- ? ? for (fireworks = j = 0, ref = fireBoss.length; (0 <= ref ? j < ref : j > ref); fireworks = 0 <= ref ? ++j : --j) {
- ? ? ? if (fireBoss[fireworks].sky) {
- ? ? ? ? fireBoss[fireworks].explode();
- ? ? ? }
- ? ? }
- ? ? stage.update();
- ? };
-
- ? createjs.Ticker.on("tick", repeat);
-
- ? stage.addEventListener("stagemousedown", function() {
- ? ? fireBoss.push(new Fireworks(stage.mouseX, stage.mouseY));
- ? ? return fireBoss.push(new Fireworks(stage.mouseX, stage.mouseY));
- ? });?? ??? ??? ?
- }).call(this);
四、3D旋转烟花
演示地址:http://haiyong.site/fireworks4

HTML代码:
- <canvas id="canvas"></canvas>
CSS代码
- html,body{
- ? margin:0px;
- ? width:100%;
- ? height:100%;
- ? overflow:hidden;
- ? background:#000;
- }
-
- #canvas{
- ? width:100%;
- ? height:100%;
- }
部分JS代码
JS代码比较长我就不全列出来了
- ?function initVars(){
-
- ? pi=Math.PI;
- ? ctx=canvas.getContext("2d");
- ? canvas.width=canvas.clientWidth;
- ? canvas.height=canvas.clientHeight;
- ? cx=canvas.width/2;
- ? cy=canvas.height/2;
- ? playerZ=-25;
- ? playerX=playerY=playerVX=playerVY=playerVZ=pitch=yaw=pitchV=yawV=0;
- ? scale=600;
- ? seedTimer=0;seedInterval=5,seedLife=100;gravity=.02;
- ? seeds=new Array();
- ? sparkPics=new Array();
- ? s="https://cantelope.org/NYE/";
- ? for(i=1;i<=10;++i){
- ? ? sparkPic=new Image();
- ? ? sparkPic.src=s+"spark"+i+".png";
- ? ? sparkPics.push(sparkPic);
- ? }
- ? sparks=new Array();
- ? pow1=new Audio(s+"pow1.ogg");
- ? pow2=new Audio(s+"pow2.ogg");
- ? pow3=new Audio(s+"pow3.ogg");
- ? pow4=new Audio(s+"pow4.ogg");
- ? frames = 0;
- }
-
- function rasterizePoint(x,y,z){
-
- ? var p,d;
- ? x-=playerX;
- ? y-=playerY;
- ? z-=playerZ;
- ? p=Math.atan2(x,z);
- ? d=Math.sqrt(x*x+z*z);
- ? x=Math.sin(p-yaw)*d;
- ? z=Math.cos(p-yaw)*d;
- ? p=Math.atan2(y,z);
- ? d=Math.sqrt(y*y+z*z);
- ? y=Math.sin(p-pitch)*d;
- ? z=Math.cos(p-pitch)*d;
- ? 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);
- ? if(!uc) return {x:0,y:0,d:-1};
- ? var ua=((rx4-rx3)*(ry1-ry3)-(ry4-ry3)*(rx1-rx3))/uc;
- ? var ub=((rx2-rx1)*(ry1-ry3)-(ry2-ry1)*(rx1-rx3))/uc;
- ? if(!z)z=.000000001;
- ? if(ua>0&&ua<1&&ub>0&&ub<1){
- ? ? return {
- ? ? ? x:cx+(rx1+ua*(rx2-rx1))*scale,
- ? ? ? y:cy+y/z*scale,
- ? ? ? d:Math.sqrt(x*x+y*y+z*z)
- ? ? };
- ? }else{
- ? ? return {
- ? ? ? x:cx+(rx1+ua*(rx2-rx1))*scale,
- ? ? ? y:cy+y/z*scale,
- ? ? ? d:-1
- ? ? };
- ? }
- }
-
- function spawnSeed(){
- ??
- ? seed=new Object();
- ? seed.x=-50+Math.random()*100;
- ? seed.y=25;
- ? seed.z=-50+Math.random()*100;
- ? seed.vx=.1-Math.random()*.2;
- ? seed.vy=-1.5;//*(1+Math.random()/2);
- ? seed.vz=.1-Math.random()*.2;
- ? seed.born=frames;
- ? seeds.push(seed);
- }
五、可拖动视角的自定义烟花
演示地址:http://haiyong.site/fireworks5

HTML代码:
- <div id="WebGL-output"></div>
CSS代码
- body {
- margin: 0;
- overflow: hidden;
- background: -webkit-linear-gradient(0deg, rgb(0, 12, 91), rgb(0, 0, 0));
- background: linear-gradient(0deg, rgb(0, 12, 91), rgb(0, 0, 0));
- }
部分JS代码
JS代码比较长我就不全列出来了
- let scene,
- camera,
- renderer,
- orbitControls,
- planeMesh,
- canvasTexture,
- isAutoLaunch = true;
-
- const gravity = new THREE.Vector3(0, -0.005, 0);
- const friction = 0.998;
- const noise = new SimplexNoise();
- const textureSize = 128.0;
- const fireworksInstances = [];
-
- let outputDom;
-
- const getOffsetXYZ = i => {
- ? const offset = 3;
- ? const index = i * offset;
- ? const x = index;
- ? const y = index + 1;
- ? const z = index + 2;
- ? return { x, y, z };
- };
-
- const getOffsetRGBA = i => {
- ? const offset = 4;
- ? const index = i * offset;
- ? const r = index;
- ? const g = index + 1;
- ? const b = index + 2;
- ? const a = index + 3;
- ? return { r, g, b, a };
- };
-
- const gui = new dat.GUI();
- const guiControls = new function () {
- ? this.ParticleSize = 300;
- ? this.AutoLaunch = true;
- }();
- gui.add(guiControls, 'ParticleSize', 100, 600);
- gui.add(guiControls, 'AutoLaunch').onChange(e => {
- ? isAutoLaunch = e;
- ? outputDom.style.cursor = isAutoLaunch ? 'auto' : 'pointer';
- });
-
- const getRandomNum = (max = 0, min = 0) => Math.floor(Math.random() * (max + 1 - min)) + min;
-
- const launchFireWorks = () => {
- ? if (fireworksInstances.length > 5) return;
- ? const fw = Math.random() > 8 ? new BasicFIreWorks() : new RichFIreWorks();
- ? fireworksInstances.push(fw);
- ? scene.add(fw.meshGroup);
- };
-
- const autoLaunch = () => {
- ? if (!isAutoLaunch) return;
- ? if (Math.random() > 0.7) launchFireWorks();
- };
-
- const drawRadialGradation = (ctx, canvasRadius, canvasW, canvasH) => {
- ? ctx.save();
- ? const gradient = ctx.createRadialGradient(canvasRadius, canvasRadius, 0, canvasRadius, canvasRadius, canvasRadius);
- ? gradient.addColorStop(0.0, 'rgba(255,255,255,1.0)');
- ? gradient.addColorStop(0.5, 'rgba(255,255,255,0.5)');
- ? gradient.addColorStop(1.0, 'rgba(255,255,255,0)');
- ? ctx.fillStyle = gradient;
- ? ctx.fillRect(0, 0, canvasW, canvasH);
- ? ctx.restore();
- };
-
- const getTexture = () => {
- ? const canvas = document.createElement('canvas');
- ? const ctx = canvas.getContext('2d');
-
- ? const diameter = textureSize;
- ? canvas.width = diameter;
- ? canvas.height = diameter;
- ? const canvasRadius = diameter / 2;
-
- ? drawRadialGradation(ctx, canvasRadius, canvas.width, canvas.height);
- ? const texture = new THREE.Texture(canvas);
- ? texture.type = THREE.FloatType;
- ? texture.needsUpdate = true;
- ? return texture;
- };
-
- canvasTexture = getTexture();
-
- const getPointMesh = (num, vels, type) => {
-
- ? const bufferGeometry = new THREE.BufferGeometry();
- ? const vertices = [];
- ? const velocities = [];
- ? const colors = [];
- ? const adjustSizes = [];
- ? const masses = [];
- ? const colorType = Math.random() > 0.3 ? 'single' : 'multiple';
- ? const singleColor = getRandomNum(100, 20) * 0.01;
- ? const multipleColor = () => getRandomNum(100, 1) * 0.01;
- ? let rgbType;
- ? const rgbTypeDice = Math.random();
- ? if (rgbTypeDice > 0.66) {
- ? ? rgbType = 'red';
- ? } else if (rgbTypeDice > 0.33) {
- ? ? rgbType = 'green';
- ? } else {
- ? ? rgbType = 'blue';
- ? }
- ? for (let i = 0; i < num; i++) {
- ? ? const pos = new THREE.Vector3(0, 0, 0);
- ? ? vertices.push(pos.x, pos.y, pos.z);
- ? ? velocities.push(vels[i].x, vels[i].y, vels[i].z);
- ? ? if (type === 'seed') {
- ? ? ? let size;
- ? ? ? if (type === 'trail') {
- ? ? ? ? size = Math.random() * 0.1 + 0.1;
- ? ? ? } else {
- ? ? ? ? size = Math.pow(vels[i].y, 2) * 0.04;
- ? ? ? }
- ? ? ? if (i === 0) size *= 1.1;
- ? ? ? adjustSizes.push(size);
- ? ? ? masses.push(size * 0.017);
- ? ? ? colors.push(1.0, 1.0, 1.0, 1.0);
- ? ? } else {
- ? ? ? const size = getRandomNum(guiControls.ParticleSize, 10) * 0.001;
- ? ? ? adjustSizes.push(size);
- ? ? ? masses.push(size * 0.017);
- ? ? ? if (colorType === 'multiple') {
- ? ? ? ? colors.push(multipleColor(), multipleColor(), multipleColor(), 1.0);
- ? ? ? } else {
- ? ? ? ? switch (rgbType) {
- ? ? ? ? ? case 'red':
- ? ? ? ? ? ? colors.push(singleColor, 0.1, 0.1, 1.0);
- ? ? ? ? ? ? break;
- ? ? ? ? ? case 'green':
- ? ? ? ? ? ? colors.push(0.1, singleColor, 0.1, 1.0);
- ? ? ? ? ? ? break;
- ? ? ? ? ? case 'blue':
- ? ? ? ? ? ? colors.push(0.1, 0.1, singleColor, 1.0);
- ? ? ? ? ? ? break;
- ? ? ? ? ? default:
- ? ? ? ? ? ? colors.push(singleColor, 0.1, 0.1, 1.0);}
-
- ? ? ? }
- ? ? }
- ? }
- ? bufferGeometry.addAttribute('position', new THREE.Float32BufferAttribute(vertices, 3).setDynamic(true));
- ? bufferGeometry.addAttribute('velocity', new THREE.Float32BufferAttribute(velocities, 3).setDynamic(true));
- ? bufferGeometry.addAttribute('color', new THREE.Float32BufferAttribute(colors, 4).setDynamic(true));
- ? bufferGeometry.addAttribute('adjustSize', new THREE.Float32BufferAttribute(adjustSizes, 1).setDynamic(true));
- ? bufferGeometry.addAttribute('mass', new THREE.Float32BufferAttribute(masses, 1).setDynamic(true));
以上就是JavaScript实现五种不同烟花特效的详细内容,更多关于JavaScript烟花特效的资料请关注w3xue其它相关文章!