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

851 阅读2分钟

概述

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

用到的技术

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

3D 圆环

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

  1. 创建 50 个长方体;
  2. 围绕圆心进行布局
  3. 添加相机动画(这里我就不一一罗列代码了,相机动画根据自己喜好调试)
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 中。这种方案的图片只是没法交互,如果只是为了展示,基本上是够用了。

结尾

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