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

var distance;

ctx.fillStyle = ‘#333’;

requestAnimationFrame(function loop() {

rot += .75;

distance = maxDistance - (maxDistance - minDistance) * Math.abs(Math.sin(rot/100));

ctx.clearRect( -width / 2, -height / 2, width, height);

var cpm = [

[f, 0, 0, 0],

[0, f, 0, 0],

[0, 0, 1, distance]

];

var rotX = getRotateY(rot);

var rotY = getRotateY(rot*2);

var rotZ = getRotateZ(rot*3);

var transformMatrix = matrixMultiply(rotY, rotZ);

transformMatrix = matrixMultiply(transformMatrix, rotX);

points

.forEach(function(point) {

var imagePoint = getImagePoint(matrixTimesVec(transformMatrix, point), cpm);

if (imagePoint[2] < 0) { return; }

var size = 5 * f / imagePoint[2];

var x = imagePoint[0] / imagePoint[2];

var y = imagePoint[1] / imagePoint[2];

ctx.beginPath();

ctx.arc(x, y, size, 0, 2 * Math.PI, true);

ctx.fill();

});

requestAnimationFrame(loop);

});

function getImagePoint(point3D, cameraProjectionMatrix) {

// make homogenous

var homogenousPoint3D = point3D.co