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

最新推荐文章于 2024-04-13 16:19:20 发布

2401_84092360

最新推荐文章于 2024-04-13 16:19:20 发布

阅读量954

点赞数 24

分类专栏：程序员文章标签： html 前端

本文链接：https://blog.csdn.net/2401_84092360/article/details/137506772

版权

程序员专栏收录该内容

282 篇文章 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.concat([1]);

return matrixTimesVec(cameraProjectionMatrix, homogenousPoint3D);

}

function add(a, b) { return a + b; }

function getRotateZ(deg) {

var rad = deg * Math.PI / 180;

var cos = Math.cos(rad);

var sin = Math.sin(rad);

return [

[cos, -sin, 0],

[sin, cos, 0],

[ 0, 0, 1]

];

}

function getRotateY(deg) {

var rad = deg * Math.PI / 180;

var cos = Math.cos(rad);

var sin = Math.sin(rad);

return [

[ cos, 0, sin],

[ 0, 1, 0],

[-sin, 0, cos]

];

}

function getRotateX(deg) {

var rad = deg * Math.PI / 180;

var cos = Math.cos(rad);

var sin = Math.sin(rad);

return [

[1, 0, 0],

[0, cos, -sin],

[0, sin, cos]

];

}

function matrixTimesVec(matrix, vec) {

return deepCopy(matrix).map(function(row) {

return row.map(function(cell, i) {

return cell * vec[i];

}).reduce(add, 0);

});

}

function deepCopy(arr) {

return arr.slice(0).map(function(v) {

return Array.isArray(v) ? deepCopy(v) : v;

});

}

function matrixMultiply(m1, m2) {

var m1_0 = m1[0];

var m1_1 = m1[1];

var m1_2 = m1[2];

var m2_0 = m2[0];

var m2_1 = m2[1];

var m2_2 = m2[2];

var m1_0_0 = m1_0[0];

var m1_0_1 = m1_0[1];

var m1_0_2 = m1_0[2];

var m1_1_0 = m1_1[0];

var m1_1_1 = m1_1[1];

var m1_1_2 = m1_1[2];

var m1_2_0 = m1_2[0];

var m1_2_1 = m1_2[1];

var m1_2_2 = m1_2[2];

var m2_0_0 = m2_0[0];

var m2_0_1 = m2_0[1];

var m2_0_2 = m2_0[2];

var m2_1_0 = m2_1[0];

var m2_1_1 = m2_1[1];

var m2_1_2 = m2_1[2];

var m2_2_0 = m2_2[0];

var m2_2_1 = m2_2[1];

var m2_2_2 = m2_2[2];

return [

[m1_0_0 * m2_0_0 + m1_0_1 * m2_1_0 + m1_0_2 * m2_2_0, m1_0_0 * m2_0_1 + m1_0_1 * m2_1_1 + m1_0_2 * m2_2_1, m1_0_0 * m2_0_2 + m1_0_1 * m2_1_2 + m1_0_2 * m2_2_2],

[m1_1_0 * m2_0_0 + m1_1_1 * m2_1_0 + m1_1_2 * m2_2_0, m1_1_0 * m2_0_1 + m1_1_1 * m2_1_1 + m1_1_2 * m2_2_1, m1_1_0 * m2_0_2 + m1_1_1 * m2_1_2 + m1_1_2 * m2_2_2],

[m1_2_0 * m2_0_0 + m1_2_1 * m2_1_0 + m1_2_2 * m2_2_0, m1_2_0 * m2_0_1 + m1_2_1 * m2_1_1 + m1_2_2 * m2_2_1, m1_2_0 * m2_0_2 + m1_2_1 * m2_1_2 + m1_2_2 * m2_2_2]

];

}

style.css

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。