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

作者: Jkanon | 来源:发表于2019-06-28 23:04 被阅读2次

Vue结合ThreeJS实现iview官网首页波浪粒子的特效
粒子传输特效
VUE + iView 干活记录
iview首屏粒子特效（vue 结合three.js）
基于iview的Tree控件自定义节点内容
SSR介绍-2: 传统SSR实现
iOS中粒子发射(封装下雨，下雪，喷火等特效)
#1 初步使用ThreeJS
前端工程师必须收藏的网站
vue+iview框架实现左侧动态菜单

背景

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

0x01 最终效果

摄像机的视角会随着鼠标的移动在水平方向上发生变化

0x02 代码概览

定义Pointwave组件

组件结构

结构

1、定义组件模版

<div id="indexLizi" />

2、引入ThreeJS

import * as THREEE from 'three'

3、自定义组件内容

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

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

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

0x03 核心代码

Vue结合ThreeJS实现iview官网首页波浪粒子的特效
背景最近正在物色一款好用的前端框架，偶然发现iview 1.0的官网首屏效果颇为酷炫，心中瞬间种草，这里以最新的...
粒子传输特效
本效果结合网上案例，采用ceisum结合vue实现信号传输特效（粒子特效），仅供记录学习。性能欠佳，希望大佬指教，...
VUE + iView 干活记录
要用vue + iView做一个管理后台. 安装使用VUE 安装iView 可以打开iview的官网：iview官...
iview首屏粒子特效（vue 结合three.js）
背景：大佬的源码，由于自己太菜没运行了，做个成长记录~ 原地址：大佬原地址最终效果：首先新建一个Pointw...
基于iview的Tree控件自定义节点内容
在本篇文章当中，将采用vue+iview的tree组件实现树型结构。要实现这种自定义效果其实不难，而且官网有相应...
SSR介绍-2: 传统SSR实现
此篇文章将结合vue来简单介绍如何实现传统的SSR，为后续实现现今流行的SSR打个基础。参考vue ssr官网：h...
iOS中粒子发射(封装下雨，下雪，喷火等特效)
在iOS中实现粒子特效，有对应的的属性CAEmitterLayer，它是Layer的子类，用它来实现粒子特效不会怎...
#1 初步使用ThreeJS
Threejs 官网 get started 其它：
前端工程师必须收藏的网站
作为一名web前端开发，我们经常要查资料（面向搜索引擎编程），比如vue文档，iview官网，npm官网等等，下面...
vue+iview框架实现左侧动态菜单
最近在使用vue-cli3配合iview框架搭建新的项目中用到了iview中的menu菜单，按照官网写法固定不太好...