一、效果图

先上最终效果图：

具体效果可参考iview官方界面iView - 一套高质量的UI组件库

大波浪效果，使用的是three.js的官方例子，需要先安装three.js支持,具体可以看官方实例 three.js examples (threejs.org)

二、代码

1.安装threejs

npm install --save three

2.代码（复制可用）

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

<template><div id="iviewBg"></div>
</template><script>
import * as THREE from "three";
显示右上角fps框
// import Stats from "./stats.module";
import { onMounted } from "vue";
export default {props: {//控制x轴波浪的长度amountX: {type: Number,default: 50,},//控制y轴波浪的长度amountY: {type: Number,default: 50,},//控制点颜色color: {type: String,default: "#097bdb",},//控制波浪的位置top: {type: Number,default: 350,},},setup(props) {const SEPARATION = 100;// let stats;let container, camera, scene, renderer;let particles,count = 0;let mouseX = 0;let windowHalfX = window.innerWidth / 2;function init() {container = document.createElement("div");document.getElementById("iviewBg").appendChild(container);//创建透视相机camera = new THREE.PerspectiveCamera(75, //摄像机视锥体垂直视野角度window.innerWidth / window.innerHeight, //摄像机视锥体长宽比1, //摄像机视锥体近端面10000 //摄像机视锥体远端面);//设置相机z轴视野camera.position.z = 1000;//创建场景scene = new THREE.Scene();const numParticles = props.amountX * props.amountY;const positions = new Float32Array(numParticles * 3);const scales = new Float32Array(numParticles);let i = 0,j = 0;// 初始化粒子位置和大小for (let ix = 0; ix < props.amountX; ix++) {for (let iy = 0; iy < props.amountY; iy++) {positions[i] = ix * SEPARATION - (props.amountX * SEPARATION) / 2; // xpositions[i + 1] = 0; // ypositions[i + 2] = iy * SEPARATION - (props.amountY * SEPARATION) / 2; // zscales[j] = 1;i += 3;j++;}}//是面片、线或点几何体的有效表述。包括顶点位置，面片索引、法相量、颜色值、UV 坐标和自定义缓存属性值。使用 BufferGeometry 可以有效减少向 GPU 传输上述数据所需的开销const geometry = new THREE.BufferGeometry();geometry.setAttribute("position",new THREE.BufferAttribute(positions, 3));geometry.setAttribute("scale", new THREE.BufferAttribute(scales, 1));//着色器材质(ShaderMaterial),设置球的大小，颜色，等const material = new THREE.ShaderMaterial({uniforms: {//设置球的颜色color: { value: new THREE.Color(props.color) },},//控制球的大小vertexShader:"attribute float scale; void main() {vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );gl_PointSize = scale * ( 300.0 / - mvPosition.z );gl_Position = projectionMatrix * mvPosition;}",fragmentShader:"uniform vec3 color;void main() {if ( length( gl_PointCoord - vec2( 0.5, 0.5 ) ) > 0.475 ) discard;gl_FragColor = vec4( color, 1.0 );}",});//一个用于显示点的类。particles = new THREE.Points(geometry, material);//往场景中添加点scene.add(particles);//alpha - canvas是否包含alpha (透明度)。默认为 false。//渲染器的背景色默认为黑色，设置渲染器的背景色为透明renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });renderer.setPixelRatio(window.devicePixelRatio);renderer.setClearAlpha(0);renderer.setSize(window.innerWidth, window.innerHeight);container.appendChild(renderer.domElement);//显示右上角fps框// stats = new Stats();//   container.appendChild(stats.dom);container.style.touchAction = "none";//监听鼠标移动事件container.addEventListener("pointermove", onPointerMove);//调整波浪的位置container.style.position = "relative";container.style.top = `${props.top}px`;window.addEventListener("resize", onWindowResize);}function render() {camera.position.x += (mouseX - camera.position.x) * 0.05;camera.position.y = 400;camera.lookAt(scene.position);const positions = particles.geometry.attributes.position.array;const scales = particles.geometry.attributes.scale.array;// 设置粒子位置和大小let i = 0,j = 0;for (let ix = 0; ix < props.amountX; ix++) {for (let iy = 0; iy < props.amountY; iy++) {positions[i + 1] =Math.sin((ix + count) * 0.3) * 50 +Math.sin((iy + count) * 0.5) * 50;scales[j] =(Math.sin((ix + count) * 0.3) + 1) * 10 +(Math.sin((iy + count) * 0.5) + 1) * 10;i += 3;j++;}}particles.geometry.attributes.position.needsUpdate = true;particles.geometry.attributes.scale.needsUpdate = true;renderer.render(scene, camera);count += 0.1;}function onWindowResize() {windowHalfX = window.innerWidth / 2;camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);}//监听鼠标移动事件function onPointerMove(event) {console.log(event);if (event.isPrimary === false) return;mouseX = event.clientX - windowHalfX;}function animate() {requestAnimationFrame(animate);render();//fps 实时更新// stats.update();}onMounted(() => {init();animate();});return {};},
};
</script><style lang="scss" scoped>
#iviewBg {width: 100%;height: 100vh;background: url("../assets/wavesBg.png") no-repeat;overflow: hidden;
}
</style>

3.使用

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

<template><wavesBg :top="250"></wavesBg><div class="login-container"></div>
</template><script>
import wavesBg from "../components/wavesBg";
export default {name: "",components: {wavesBg,},setup() {return {};},
};
</script>

三、背景图片素材

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

vue3 + threejs 实现仿iView官网大波浪特效相关推荐

HTML5期末大作业：网站——仿游戏官网(龙之谷)HTML+CSS+JavaScript
HTML5期末大作业:网站--仿游戏官网(龙之谷)HTML+CSS+JavaScript ~ 学生HTML个人网页作业作品下载 ~ web课程设计网页规划与设计 ~大学生个人网站作业模板 ~简单个人网 ...
仿猫眼官网静态页面（纯HTML）
仿猫眼官网静态页面(纯HTML) 准备工作正文 HTML CSS 小结准备工作用到的图片如下,具体可以去官网下面截取(这里就不上传图片了,供参考) 界面效果正文 HTML <!DOCTY ...
Web前端仿小米官网实战总结
Web前端仿小米官网实战总结自学前端至今实在是感慨万千,一个人学习太累,自律能力不太够,学习速度跟不上技术更新速度,所以学习技术是一定不能偷懒的,更不能沉迷游戏,要坚持学习,最好有人带,实在不行就报 ...
HTML期末网页作业-仿QQ官网QQ注册网页
HTML期末作业-仿QQ官网QQ注册网页(HTML+CSS+JavaScript) 学生作业仿QQ官网部分代码截图 <!DOCTYPE html> <html lang=" ...
高仿阴阳师官网轮播图效果的jQuery插件
代码地址如下: http://www.demodashi.com/demo/12302.html 插件介绍这是一个根据阴阳师官网的轮播效果所扒下来的轮播插件,主要应用于定制个性化场景,目前源码完全公 ...
仿小米官网源码，2021年9月最新版
部分源码: <div class="header"><div class="page-top"><div class=" ...
仿Apple官网导航条
仿Apple官网导航条效果在线预览使用flex布局和媒体查询实现了响应式的Apple的中文官网导航条,仿做的动画,字体不一致不会CSS动画,未有学习 flex掌握感觉还可以媒体查询也懂得了一小部 ...
前端学习之仿小米官网HTML+CSS
一个简单的仿小米官网 index.css /* 主页index.html样式表 */ .topbar-wrapper{width: 100%;background-color:#333;height: ...
nuxt全栈仿美团官网13——首页下面的格调
文档:nuxt全栈仿美团官网13--首页下面的格... 链接:http://note.youdao.com/noteshare?id=6b7b36720b665f830357b221a0d28fba& ...

vue3 + threejs 实现仿iView官网大波浪特效

一、效果图

二、代码

1.安装threejs

2.代码（复制可用）

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

3.使用

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

三、背景图片素材

vue3 + threejs 实现仿iView官网大波浪特效相关推荐

最新文章

热门文章