Vue结合ThreeJS实现iview官网首页波浪粒子的特效

背景

最近正在物色一款好用的前端框架，偶然发现iview 1.0的官网首屏效果颇为酷炫，心中瞬间种草，这里以最新的ThreeJS版本为例将其与vue（此处使用vue-admin-template作为脚手架）集成.

0x01 最终效果

摄像机的视角会随着鼠标的移动在水平方向上发生变化
在线预览
Demo代码：

• github
• gitee

0x02 代码概览

定义Pointwave组件

组件结构

结构

1、定义组件模版

2、引入ThreeJS

import * as THREEE from 'three'

3、自定义组件内容

mounted() {
  this.init()
  this.animate()
}

表明页面加载后立即进行threejs的初始化
init函数定义了组件渲染边界，初始化粒子材质位置大小，摄像机位置，场景背景色等元素
animate函数定义了动画过程，动态地改变粒子的位置和大小

Login页面引入Poinwave组件并更改背景图片

0x03 核心代码