【HTML——3d粒子特效（效果+代码）】

index.js

var width, height;

var canvas = document.queryselector(‘canvas’);

canvas.width = width = math.max(document.documentelement.clientwidth, window.innerwidth || 0);

canvas.height = height = math.max(document.documentelement.clientheight, window.innerheight || 0);

var ctx = canvas.getcontext(‘2d’);

ctx.translate(canvas.width / 2, canvas.height / 2);

var points = [];

var depth = 8;

var scale = 70;

for (var x = -depth/2; x <= depth/2; x++) {

for (var y = -depth/2; y <= depth/2; y++) {

for (var z = -depth/2; z <= depth/2; z++) {

points.push([x * scale, y * scale, z * scale]);

}

}

}

var mindistance = 1000;

var maxdistance = 2000;

var f = 500;

var rot = 0;

var direction = -1;