THREEJS——高科技感的魔法阵

---

theme: jzman

我正在参加 #金石计划征文活动# ，希望各位点个赞，谢谢

效果图

绘制静态图

在threejs的场景中使用line和Line2绘制出外围由线段组成的部分，

外围虚线圆

下面的代码是其中一条圆形虚线的代码，其中材质用到的是LineMaterial，属性包含color颜色、linewidth 宽度、dashed是否虚线、dashSize虚线尺寸、gapSize间隔尺寸、opacity透明度、transparent是否支持透明。

```ts const createRoundDashed1 = () => { const geometry = new LineGeometry(); geometry.setPositions(getRoundPoints(50));

const matLine = new LineMaterial({
    color: lineColor,
    linewidth: 20,
    dashed: true,
    dashSize: 360 / 16,
    gapSize: 360 / 16,
    opacity: 0.1,
    transparent: true
});
lineMaterials.push(matLine)

roundDashed1 = new Line2(geometry, matLine);

roundDashed1.computeLineDistances();
roundDashed1.scale.set(1, 1, 1);
scene.add(roundDashed1)

}

```

计算圆形的点位

getRoundPoints方法是通过一个半径值生成一个圆弧并得到圆弧上的所有点位，供给LineGeometry使用，作为position属性。内部通过三角函数中Math.sin正弦和Math.cos余弦计算得出。在之后所有的圆形绘制都使用这个方法获取圆

ts const getRoundPoints = (R: number, N = 361): number[] => { // 批量生成圆弧上的顶点数据 const vertices: number[] = [] for (var i = -N / 2; i < N / 2; i++) { var angle = 2 * Math.PI / N * i; var x = R * Math.sin(angle); var y = R * Math.cos(angle); vertices.push(x, y, 0) } return vertices }

上面的虚线作为将来动图的第一组，也就是z坐标最接近0的位置，所以将上面创建的3个元素变成一个组，并在组的usedata里设置一个layer属性为1

围绕式字母

字母这里相对比较复杂一些，用到FontLoader加载文字和InstancedFlow流的实例化，InstancedFlow主要作用就是将多个模型通过重复的方式展现，其提供的updateCurve接受一个曲线路径，那么重复展现的物体将以这个曲线路径去排列，