实现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粒子酷炫动态旋转特效，更加方便易用。
本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益，请联系我们，我们会在确认后第一时间进行删除！