概述

最近一些小伙伴好奇无界云剪的首页特效是如何制作的？废话不多说，直接上视频，先看一下具体的效果，然后我来给大家详细讲述一下实现的过程。

用到的技术

里面用到的技术比较多，3D 圆环使用的是 Three.js，其他效果使用的是 pixi.js 实现的，主要是这两个技术。

3D 圆环

3D 圆环可以直接使用 threejs 绘制出来，

创建 50 个长方体；
围绕圆心进行布局
添加相机动画（这里我就不一一罗列代码了，相机动画根据自己喜好调试）

javascript 复制代码

const num = 50;
const radius = 60;
const group = new THREE.Group();
const angle = (Math.PI * 2) / num;
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load(img);
texture.wrapT = THREE.RepeatWrapping;
texture.wrapS = THREE.RepeatWrapping;
const material = new THREE.MeshMatcapMaterial({
  color: '#fff',
  transparent: true,
  matcap: texture,
});
// 围绕圆心布局
for (let i = 0; i < num; i++) {
  const geometry = new THREE.BoxGeometry(6, 1, 15);
  const mesh = new THREE.Mesh(geometry, material);
  mesh.rotation.x = Math.PI / 2;
  mesh.rotation.z = Math.PI / 2;
  mesh.rotation.y = -(i * Math.PI * 2) / num;
  mesh.position.x = radius * Math.sin(angle * i);
  mesh.position.y = radius * Math.cos(angle * i);
  group.add(mesh);
}

水波纹效果

我们使用 threejs 绘制了 3D 的圆环，可以把 threejs 的 canvas 作为纹理提供给 pixijs 使用，切换页面的时候同时切换 threejs 动画效果即可。

这里单独讲一下水波纹的实现，水波纹的效果原理其实就是 shader 动画，pixijs 提供了很多 shader 滤镜，源码地址：github.com/pixijs/filt... 这里水波纹使用的是 ShockwaveFilter 这个滤镜。

我们要让水波纹波及到整个画面，那文字，图片等页面上所有的元素都需要在 pixijs 的上下文中。所以文字，按钮，包括 Tab 切换都要使用 pixijs 去绘制。

如果想自己写 DOM 绘制到 pixijs 中也可以试试使用dom-to-image把 HTML 转化成图片，然后再绘制到 pixijs 中。这种方案的图片只是没法交互，如果只是为了展示，基本上是够用了。

结尾

实现原理在上面都讲述的比较清楚，如果感兴趣的小伙伴可以尝试自己去实现，如果有不明白的地方，可以留言交流

无界云剪首页特效源码技术解析

概述

用到的技术

3D 圆环

水波纹效果

结尾