threejs实现模型切换为动态漩涡

效果预览

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);
        vert