背景
最近正在物色一款好用的前端框架,偶然发现iview 1.0的官网首屏效果颇为酷炫,心中瞬间种草,这里以最新的ThreeJS版本为例将其与vue(此处使用vue-admin-template作为脚手架)集成.
0x01 最终效果
在线预览
Demo代码:
0x02 代码概览
定义Pointwave组件
组件结构
1、定义组件模版
<div id="indexLizi" />
2、引入ThreeJS
import * as THREEE from 'three'
3、自定义组件内容
mounted() {
this.init()
this.animate()
}
表明页面加载后立即进行threejs的初始化
init函数定义了组件渲染边界,初始化粒子材质位置大小,摄像机位置,场景背景色等元素
animate函数定义了动画过程,动态地改变粒子的位置和大小