利用vue3+threejs仿iView官网大波浪特效实例

2022-04-26

目录

前言
一、效果图
二、代码
三、背景图片素材
总结

前言 【利用vue3+threejs仿iView官网大波浪特效实例】Threejs可以理解为是一个web端三维引擎（渲染模型，数据可视化），如果有接触过UnralEngine 4(虚幻四)等游戏引擎的，应该很容易理解在一个三维场景必备的每一个部件（场景，渲染器，网格模型，材质，光源，色相机）。好的，基础知识咱们先跳过，直接上实现的过程

一、效果图先上最终效果图：

具体效果可参考iview官方界面iView - 一套高质量的UI组件库
大波浪效果，使用的是three.js的官方例子，需要先安装three.js支持,具体可以看官方实例 three.js examples (threejs.org)

二、代码 1.安装threejs

npm install --save three

2.代码（复制可用） components文件夹新建组件waves.vue，直接复制代码如下，可直接运行：

#iviewBg {width: 100%; height: 100vh; background: url("../assets/wavesBg.png") no-repeat; overflow: hidden; }

3.使用
直接在login登录页面引入组件使用

三、背景图片素材

利用vue3+threejs仿iView官网大波浪特效实例

文章图片

如果不清晰可以去官方界面f12拿，iView - 一套高质量的UI组件库
如下图所示

利用vue3+threejs仿iView官网大波浪特效实例

文章图片

总结到此这篇关于利用vue3 + threejs仿iView官网大波浪特效的文章就介绍到这了,更多相关vue3+threejs仿大波浪特效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

推荐阅读

上一篇：JS定时器不可靠的原因及解决方案

下一篇：vue|vue 无法覆盖vant的UI组件的样式问题