js实现3D粒子酷炫动态旋转特效

2023-12-08前端开发

269

实现3D粒子酷炫动态旋转特效，需要以下几个步骤：

1.创建canvas画布和粒子对象数组；
2.为粒子对象添加随机坐标、颜色以及速度；
3.绘制粒子，并实现动态旋转效果；
4.根据屏幕大小更新粒子位置。

下面，我将详细解释每个步骤并且提供具体的代码示例。

创建canvas画布和粒子对象数组。
首先，我们需要创建一个HTML文件，添加一张背景图片，然后再创建一个canvas画布，使用canvas API绘制粒子。

<!DOCTYPE html>
<html>
<head>
  <title>3D粒子酷炫动态旋转特效</title>
</head>
<body>
  <div id="particles-container"></div>
  <canvas id="particles-canvas"></canvas>
  <script src="index.js"></script>
</body>
</html>

在JavaScript中，我们要定义一个Particle类，用于保存每个粒子对象的状态和位置，代码如下：

class Particle {
  constructor(x, y, z, speed) {
    this.x = x;          //粒子x坐标
    this.y = y;          //粒子y坐标
    this.z = z;          //粒子z坐标
    this.speed = speed;      //粒子速度
    this.color = "#fff";      //粒子颜色
  }
}

我们还需要定义一个数组来保存粒子对象的状态，代码如下：

let particles = [];

为粒子对象添加随机坐标、颜色以及速度
接下来，我们使用随机数生成器生成一些随机的颜色、坐标和速度，然后将其添加到粒子对象数组中。代码如下：

for (let i = 0; i < 1000; i++) {
  let x = Math.random() * canvas.width - canvas.width / 2;
  let y = Math.random() * canvas.height - canvas.height / 2;
  let z = Math.random() * 3000 - 1500;
  let speed = Math.random() * 10;
  let particle = new Particle(x, y, z, speed);

  //随机颜色
  let hue = Math.floor(Math.random() * 360);
  particle.color = `hsl(${hue}, 100%, 50%)`;

  //将粒子加入数组
  particles.push(particle);
}

绘制粒子，并实现动态旋转效果
我们需要实现一个函数来绘制粒子。在绘制之前，需要设置画布的背景颜色，然后绘制每个粒子。我们可以使用fillRect方法来绘制每个粒子的位置和颜色，代码如下：

function drawParticles() {
  context.clearRect(0, 0, canvas.width, canvas.height);    //清除画布
  context.fillStyle = "rgba(0, 0, 0, 0.1)";                //设置画布背景颜色
  context.fillRect(0, 0, canvas.width, canvas.height);     //绘制画布背景

  //遍历粒子数组并绘制每个粒子
  for (let i = 0; i < particles.length; i++) {
    let particle = particles[i];

    //旋转粒子
    particle.x = particle.x * Math.cos(0.01) + particle.z * Math.sin(0.01);
    particle.z = particle.z * Math.cos(0.01) - particle.x * Math.sin(0.01);

    //绘制粒子
    context.fillStyle = particle.color;
    context.beginPath();
    let factor = 1000 / (1000 + particle.z);
    context.arc(canvas.width / 2 + particle.x * factor, canvas.height / 2 + particle.y * factor, 3 * factor, 0, Math.PI * 2);
    context.fill();
  }
}

代码解释：
为了实现动态旋转效果，我们需要在每次绘制粒子之前旋转粒子的坐标。在绘制时候，我们使用了x坐标和z坐标的三角函数值去更新坐标，增加动态旋转效果。

根据屏幕大小更新粒子位置
最后，我们需要根据屏幕大小更新粒子的位置。当用户调整浏览器窗口大小时，我们需要重新计算每个粒子的位置。代码如下：

function updateCanvasSize() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  //将粒子回归屏幕中央
  for (let i = 0; i < particles.length; i++) {
    let particle = particles[i];
    let x = Math.random() * canvas.width - canvas.width / 2;
    let y = Math.random() * canvas.height - canvas.height / 2;
    let z = Math.random() * 3000 - 1500;
    particle.x = x;
    particle.y = y;
    particle.z = z;
  }
}

代码解释：
当窗口大小被调整时，我们使用window.innerWidth和window.innerHeight获取新的窗口大小，并重新设置canvas的高度和宽度。接下来，我们使用Math.random()方法生成一个随机的位置和深度，将每个粒子的位置重置到中心处。

示例1：

请看这个演示链接：https://codepen.io/collection/DVNgzy

示例2：

你也可以使用p5.js来实现3D粒子酷炫动态旋转特效，具体实现方式与上述示例相似。

let particles = [];

function setup() {
    createCanvas(windowWidth, windowHeight);
    for(let i = 0; i < 100; i++) {
        let x = random(-width/2, width/2);
        let y = random(-height/2, height/2);
        let z = random(-1000, 1000);
        let speed = random(1, 5);
        let particle = new Particle(x, y, z, speed);
        let hue = random(0, 360);
        particle.color = color(`hsl(${hue}, 100%, 50%)`);
        particles.push(particle);
    }
}

function draw() {
    background(0, 0, 0, 50);
    translate(width/2, height/2);

    for(let i = 0; i < particles.length; i++) {
        let particle = particles[i];
        particle.x = particle.x * cos(0.01) + particle.z * sin(0.01);
        particle.z = particle.z * cos(0.01) - particle.x * sin(0.01);

        let factor = 1000/(1000+particle.z);
        let size = 3 * factor;
        fill(particle.color);
        noStroke();
        circle(particle.x * factor, particle.y * factor, size);
    }
}

function windowResized() {
    resizeCanvas(windowWidth, windowHeight);
    setup();
}

可以看出该代码和第一个示例非常相似，只不过使用的是p5.js库来实现3D粒子酷炫动态旋转特效，更加方便易用。

The End

相关推荐

layui实现图片上传成功后回显点击放大图片功能

Layui实现数据表格中鼠标悬停图片放大离开时恢复原图

layui点击文本输入框调起弹出选择框并选择内容的两种方法参考

网站部署https后百度地图不显示问题

微信小程序实现点击复制功能和手机拨打电话功能

js拖拽排序插件Sortable.js如何使用

热门文章

热门精品源码

最新VIP资源