效果预览
<iframe allowfullscreen="true" data-mediaembed="bilibili" frameborder="0" id="YnmcXRGg-1731390162310" src="https://player.bilibili.com/player.html?aid=113465201000597"></iframe>202411120010
粒子形状初始化
形状由y=ln(x)绕y轴旋转而来
1、确认最大圆环数n
因为最小的圆环和最大的圆环相差很多倍不适合统一一样的点数组成，而是每下一个圆环比上一个圆环多一个点，这样可以让点的分布不那么极端。这样圆环会形成一个等比数列，我规定第一个最小圆环有8个点组成，所以点总数S与圆环数n的关系为S=(n*n+15n)/2,然后根据模型点数x,计算最大n满足(n * n + 15 * n) / 2 < x
function findMaxN(x) {
const discriminant = Math.sqrt(225 + 8 * x);
const n = Math.floor((-15 + discriminant) / 2);
return n;
}2、得到一系列在曲线y=ln(x)上均匀分布的点并旋转
具体算法divideCurve见我上一篇文章，将得到的点绕y轴以const p = (j / (8 + i)) * Math.PI * 2旋转即可
const a = 0.03;
const b = Math.E * 2;
const n = maxN * 50; // 积分的步数
const segments = maxN; // 分割的段数
const points = divideCurve(a, b, n, segments);
for (let i = 0; i < maxN; i++) {
const r = points[i].x * 0.4;
for (let j = 0; j < 8 + i; j++) {
const p = (j / (8 + i)) * Math.PI * 2;
let x = r * Math.cos(p);
let z = r * Math.sin(p);
let y = points[i].y * 0.2 - 0.5;
// 定义旋转角度 a（以弧度为单位）
// let a = Math.PI / 10; // 例如，旋转45度
// 绕 x 轴旋转
// y = y * Math.cos(a) - z * Math.sin(a);
// z = y * Math.sin(a) + z * Math.cos(a);
vertices2.push(x, y, z);
delays.push((Math.random() * 0.3 + 0.7) * (i / maxN) * delayPct);
}
}
for (let i = 0; i < position1.count - count; i++) {
const x = vertices2[3 * i];
const y = vertices2[3 * i + 1];
const z = vertices2[3 * i + 2];
vertices2.push(x, y, z);
delays.push(Math.random() * delayPct);
}粒子动画
两个动画的粒子位置都是统一放到顶点着色器上计算的，这种简单且大量的计算利用GPU计算是最好的选择
`
attribute float delay;
attribute vec3 target;
uniform float percent;
uniform float size;
uniform float time;
void main() {
float p = clamp(percent - delay,0.0,1.0); //进程百分比
vec3 _position = mix( position,target,p); //根据进程百分比插值计算当前位置
float distance = sqrt(_position.x*_position.x + _position.z*_position.z);
_position.y += sqrt(distance)*sin(distance*10.0-time)*0.05*p*p;
vec4 mvPosition = modelViewMatrix * vec4(_position, 1.0);
gl_Position = projectionMatrix * mvPosition;
gl_PointSize = (8.0 / -mvPosition.z)*size;
}
`1、两个图形之间的插值过渡动画
delay是每一个粒子在初始化时给的随机延迟时间占比
p代表两个图形的进程百分比，最小0，代表图形1占比百分百，最大1，代表图形2占比百分百
target就是我们计算得到的波形坐标
2、波动动画
根据距离计算y的偏移程度：公式sqrt(distance)*sin(distance*10.0-time)*0.05*p*p代表按sin函数波动并且越远波动振幅越大，乘p*p为了减小波动对图形1的影响
完整代码
class PointsCloudToHole {
animateRequestID = null;
action = null;
endCallback;
constructor({ object, allTime, delayPct, easing, endCallback = () => {} }) {
allTime = allTime || 5000;
delayPct = delayPct || 0;
easing = easing || TWEEN.Easing.Sinusoidal.InOut;
this.endCallback = endCallback;
let position1 = object.geometry.attributes.position;
function findMaxN(x) {
const discriminant = Math.sqrt(225 + 8 * x);
const n = Math.floor((-15 + discriminant) / 2);
return n;
}
const maxN = findMaxN(position1.count);
const count = (maxN * maxN + 15 * maxN) * 0.5;
const vertices1 = [],
vertices2 = [],
delays = [];
for (let i = 0; i < position1.count; i++) {
const x1 = position1.getX(i);
const y1 = position1.getY(i);
const z1 = position1.getZ(i);
vertices1.push(x1, y1, z1);
}
const a = 0.03;
const b = Math.E * 2;
const n = maxN * 50; // 积分的步数
const segments = maxN; // 分割的段数
const points = divideCurve(a, b, n, segments);
for (let i = 0; i < maxN; i++) {
const r = points[i].x * 0.4;
for (let j = 0; j < 8 + i; j++) {
const p = (j / (8 + i)) * Math.PI * 2;
let x = r * Math.cos(p);
let z = r * Math.sin(p);
let y = points[i].y * 0.2 - 0.5;
// 定义旋转角度 a（以弧度为单位）
// let a = Math.PI / 10; // 例如，旋转45度
// 绕 x 轴旋转
// y = y * Math.cos(a) - z * Math.sin(a);
// z = y * Math.sin(a) + z * Math.cos(a);
vertices2.push(x, y, z);
delays.push((Math.random() * 0.3 + 0.7) * (i / maxN) * delayPct);
}
}
for (let i = 0; i < position1.count - count; i++) {
const x = vertices2[3 * i];
const y = vertices2[3 * i + 1];
const z = vertices2[3 * i + 2];
vertices2.push(x, y, z);
delays.push(Math.random() * delayPct);
}
const geometry = new THREE.BufferGeometry();
geometry.setAttribute(
"position",
new THREE.Float32BufferAttribute(vertices1, 3)
);
geometry.setAttribute(
"target",
new THREE.Float32BufferAttribute(vertices2, 3)
);
geometry.setAttribute("delay", new THREE.Float32BufferAttribute(delays, 1));
geometry.setDrawRange(0, position1.count);
const material = this.getMaterial({
color: 0xffffff,
size: 1,
});
this.points = new THREE.Points(geometry, material);
this.animationInit(1 + delayPct, allTime, easing, this.endCallback);
}
// 创建材质
getMaterial(options) {
options = Object.assign(
{
color: 0xffffff,
size: 1,
map: new THREE.TextureLoader().load(
`${VITE_PUBLIC_PATH || "/public/"}textures/sprites/circle.png`
),
},
options
);
this.uniforms = {
color: { value: new THREE.Color(options.color) },
size: { value: options.size },
map: { value: options.map },
percent: { value: 0 },
time: { value: 0 },
};
const material = new THREE.ShaderMaterial({
// transparent: true,
depthTest: true,
depthWrite: true,
// blending: THREE.AdditiveBlending,
uniforms: this.uniforms,
vertexShader: `
attribute float delay;
attribute vec3 target;
uniform float percent;
uniform float size;
uniform float time;
void main() {
float p = clamp(percent - delay,0.0,1.0); //进程百分比
vec3 _position = mix( position,target,p); //根据进程百分比插值计算当前位置
float distance = sqrt(_position.x*_position.x + _position.z*_position.z);
_position.y += sqrt(distance)*sin(distance*10.0-time)*0.05*p*p;
vec4 mvPosition = modelViewMatrix * vec4(_position, 1.0);
gl_Position = projectionMatrix * mvPosition;
gl_PointSize = (8.0 / -mvPosition.z)*size;
}
`,
fragmentShader: `
uniform vec3 color;
uniform sampler2D map;
void main() {
gl_FragColor = vec4(color, 1.0);
// gl_FragColor = gl_FragColor * texture2D( map, gl_PointCoord );
}
`,
});
// gui.add(material.uniforms.percent, "value", 0, 2, 0.01);
return material;
}
/**
* 初始化动画，设置切换进程的百分比、持续时间和缓动函数。
* @param {number} percent - 切换进程的百分比。
* @param {number} duration - 动画的持续时间，默认为 2000 毫秒。
* @param {Function} easing - 动画的缓动函数，默认为 TWEEN.Easing.Sinusoidal.InOut。
* @param {Function} endCallback - 动画结束时的回调函数，默认为空。
* @returns {TWEEN} - 返回一个Tween对象，用于控制动画。
*/
animationInit(
percent,
duration = 2000,
easing = TWEEN.Easing.Sinusoidal.InOut,
endCallback = () => {}
) {
if (this.action) {
this.action = null;
}
this.action = new TWEEN.Tween(this.uniforms.percent)
.to({ value: percent }, duration)
.easing(easing)
.onUpdate((obj) => {
this.points.rotation.x = Math.PI / 16*obj.value;
})
.onComplete((res) => {
cancelAnimationFrame(this.animateRequestID);
this.animateRequestID = null;
endCallback();
})
.onStop(() => {
cancelAnimationFrame(this.animateRequestID);
this.animateRequestID = null;
endCallback();
});
this.animateRequestID = null;
// this.startAnimation();
}
// 开始动画
startAnimation() {
if (this.animateRequestID) return;
this.action.start();
const animate = () => {
this.animateRequestID = requestAnimationFrame(animate);
TWEEN.update();
};
animate();
}
// 停止动画
stopAnimation() {
if (!this.animateRequestID) return;
this.action.stop();
}
// 更新波动动画
update(delta) {
this.uniforms.time.value += delta;
}
}