【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;