threejs 光带扩散动画

目录

一、创建光带

(1) 设置光带顶点

(2)  设置光带顶点透明度属性

二、光带动画

完整代码

html文件代码

 js文件代码

最后展示一下项目里的效果：

---

最近项目中要求做一段光带效果动画，尝试着写了一下，下面是本次分享光带扩散动画的效果预览：

20240110_204035

一、创建光带

(1) 设置光带顶点

这里使用缓冲区几何体bufferGeometry，通过设置顶点属性position来构成光带模型，在创建顶点之前需要一下几个必备参数：

r	光带初始时的半径
h	光带的高度
radian	弧度值
segment	间隔段数，光带由N段矩形构成(矩形由2个三角形构建)，此属性决定矩形数量，值越大光带越接近圆形
interval	每段间隔的弧度值

// 创建缓冲区几何体
const geometry = new THREE.BufferGeometry();
// 光带初始半径
const r = 10;
// 光带高度
const h = 10;
// 弧度
let radian = 0;
// 间隔段数,此值越高光带棱角越分明
const segment = 50;
// 弧度间隔
const interval = (Math.PI * 2) / segment;

接下来就是创建光带的顶点位置数组了，光带由N个矩形组成，一个矩形又由两个三角形构成；

for循环遍历间隔段数segment，每3个值代表一个顶点位置，3个顶点位置又组成一个三角形；

x轴上的位置使用Math.cos函数得出，z轴上的位置使用Math.sin函数得出，y轴则看三角形的三个点创建顺序来得出。此处我创建点位时，三角形底下的点为点2，所以点2的y值设置为0

第一个三角形点位顺序(第二个三角形类推，这里不展示了)：

最后通过bufferAttribute属性设置几何体顶点位置，注意顶点位置数组需要转换成32位浮点类型的数组

// 顶点位置数组
const vertexPosArr = [];
// 遍历出光带的顶点数据
for (let i = 0; i < segment; i++) {
    // 弧度逐渐增加，从0度增加到360度
    radian += interval;
    // 计算出两个三角形的顶点位置，形成一个矩形平面，最后多个矩形平面组成圆形的光带
    vertexPosArr.push(
        // 第一个三角形
        Math.cos(radian) * r, h, Math.sin(radian) * r, // 点1
        Math.cos(radian) * r, 0, Math.sin(radian) * r, // 点2
        Math.cos(radian + interval) * r, 0, Math.sin(radian + interval) * r,  // 点3
        // 第二个三角形
        Math.cos(radian) * r, h, Math.sin(radian) * r, // 点1
        Math.cos(radian + interval) * r, 0, Math.sin(radian + interval) * r,  // 点