Vue3 实现 Three.js粒子特效

效果

在这里插入图片描述

<template><div id="waves" />
</template><script setup>
import { ref, onMounted, onUnmounted } from "vue";
import * as THREE from "three";const amountX = ref(50);
const amountY = ref(50);
const color = ref("#e1b284");
const topOffset = ref(350);let count = 0;
let mouseX = 0;
let windowHalfX = null;
let camera = null;
let scene = null;
let particles = null;
let renderer = null;const init = () => {const SEPARATION = 100;const SCREEN_WIDTH = window.innerWidth;const SCREEN_HEIGHT = window.innerHeight;const container = document.createElement("div");windowHalfX = window.innerWidth / 2;container.style.position = "relative";container.style.top = `${topOffset.value}px`;container.style.height = `${SCREEN_HEIGHT - topOffset.value}px`;const waves = document.getElementById("waves");waves.appendChild(container);camera = new THREE.PerspectiveCamera(75,SCREEN_WIDTH / SCREEN_HEIGHT,1,10000,);camera.position.z = 1000;scene = new THREE.Scene();const numParticles = amountX.value * amountY.value;const positions = new Float32Array(numParticles * 3);const scales = new Float32Array(numParticles);let i = 0;let j = 0;for (let ix = 0; ix < amountX.value; ix++) {for (let iy = 0; iy < amountY.value; iy++) {positions[i] = ix * SEPARATION - (amountX.value * SEPARATION) / 2;positions[i + 1] = 0;positions[i + 2] = iy * SEPARATION - (amountY.value * SEPARATION) / 2;scales[j] = 1;i += 3;j++;}}const geometry = new THREE.BufferGeometry();geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));geometry.setAttribute("scale", new THREE.BufferAttribute(scales, 1));const material = new THREE.ShaderMaterial({uniforms: {color: { value: new THREE.Color(color.value) },},vertexShader: `attribute float scale;void main() {vec4 mvPosition = modelViewMatrix * vec4( position, 2.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);renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });renderer.setSize(container.clientWidth, container.clientHeight);renderer.setPixelRatio(window.devicePixelRatio);renderer.setClearAlpha(0);container.appendChild(renderer.domElement);window.addEventListener("resize", onWindowResize, { passive: false });document.addEventListener("mousemove", onDocumentMouseMove, {passive: false,});document.addEventListener("touchstart", onDocumentTouchStart, {passive: false,});document.addEventListener("touchmove", onDocumentTouchMove, {passive: false,});
};const 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;let j = 0;for (let ix = 0; ix < amountX.value; ix++) {for (let iy = 0; iy < amountY.value; iy++) {positions[i + 1] =Math.sin((ix + count) * 0.3) * 100 + Math.sin((iy + count) * 0.5) * 100;scales[j] =(Math.sin((ix + count) * 0.3) + 1) * 8 +(Math.sin((iy + count) * 0.5) + 1) * 8;i += 3;j++;}}particles.geometry.attributes.position.needsUpdate = true;particles.geometry.attributes.scale.needsUpdate = true;renderer.render(scene, camera);count += 0.1;
};const animate = () => {requestAnimationFrame(animate);render();
};const onDocumentMouseMove = (event) => {mouseX = event.clientX - windowHalfX;
};const onDocumentTouchStart = (event) => {if (event.touches.length === 1) {mouseX = event.touches[0].pageX - windowHalfX;}
};const onDocumentTouchMove = (event) => {if (event.touches.length === 1) {event.preventDefault();mouseX = event.touches[0].pageX - windowHalfX;}
};const onWindowResize = () => {windowHalfX = window.innerWidth / 2;camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);
};onMounted(() => {init();animate();
});onUnmounted(() => {window.removeEventListener("resize", onWindowResize);document.removeEventListener("mousemove", onDocumentMouseMove);document.removeEventListener("touchstart", onDocumentTouchStart);document.removeEventListener("touchmove", onDocumentTouchMove);
});
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/2971.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

QT学习之窗口基本设置

this->setWindowTitle("二代证测试工具"); // 设置窗口名this->setWindowIcon(QIcon("logo.jpg")); // 设置角标this->setFixedSize(900, 730); // 设置窗口大小设置exe图标 .rc文件代码中设置如下

数据结构入门——排序(代码实现)(下)

int GetMidi(int* a, int left, int right) {int mid (left right) / 2;// left mid rightif (a[left] < a[mid]){if (a[mid] < a[right]){return mid;}else if (a[left] > a[right]) // mid是最大值{return left;}else{return right;}}else // a[left] > a[mid…

一寸照片裁剪怎么弄?修改照片尺寸,3种方法调整

一寸照片裁剪怎么弄&#xff1f;将照片裁剪为一寸尺寸&#xff0c;可以方便我们在各种场合中使用。无论是办理证件、申请签证&#xff0c;还是制作简历、参与活动&#xff0c;一寸照片都是不可或缺的资料。通过裁剪&#xff0c;我们能够确保照片的尺寸、比例符合标准&#xff0…

视频怎么批量压缩?5个好用的电脑软件和在线网站

视频怎么批量压缩&#xff1f;有时候我们需要批量压缩视频来节省存储空间&#xff0c;便于管理文件和空间&#xff0c;快速的传输发送给他人。有些快捷的视频压缩工具却只支持单个视频导入&#xff0c;非常影响压缩效率&#xff0c;那么今天就向大家从软件和在线网站2个角度介绍…

GoLand远程开发IDE:使用SSH远程连接服务器进行云端编程

目录 ⛳️推荐 1. 安装配置GoLand 2. 服务器开启SSH服务 3. GoLand本地服务器远程连接测试 4. 安装cpolar内网穿透远程访问服务器端 4.1 服务器端安装cpolar 4.2 创建远程连接公网地址 5. 使用固定TCP地址远程开发 ⛳️推荐 前些天发现了一个巨牛的人工智能学习网站&am…

OpenG中的读写簇函数

1.首先需要在Vi Package Manager中安装Open G 2.找到openG中的读写ini函数&#xff0c;第一组是将簇标签作为段名&#xff0c;第二组是指定段名&#xff0c;本质上都是一样 3.读写簇到ini文件 4.禁用写入&#xff0c;更改簇的元素&#xff0c;增加或者删除&#xff0c;原来…

c++取经之路(其八)——基础模板

我认为的模板其实就是个懒人工具&#xff0c;你来弄个模板&#xff0c;编译器自动给你生成对应的函数。 函数模板&#xff1a; 定义&#xff1a;函数模板是一个蓝图&#xff0c;它本身并不是函数&#xff0c;是编译器用使用方式产生特定具体类型函数的模具。所以其实模板就是…

Edge浏览器下载文件提示 “无法安全下载” 的解决方法

提示如下&#xff1a; 虽然我们可以通过 "保留" 进行下载&#xff0c;但是每次需要选择&#xff0c;比较麻烦 解决方法&#xff1a; 1、打开注册表 HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft 2、创建2个 "项" Edge\InsecureContentAllowedForUrls…

C++奇迹之旅:从0开始实现日期时间计算器

文章目录 &#x1f4dd;前言&#x1f320; 头文件Date.h&#x1f309;日期计算函数&#x1f320;前后置&#x1f309;前后置-- &#x1f320;两对象日期相减&#x1f309;自定义流输入和输出 &#x1f309; 代码&#x1f309; 头文件Date.h&#x1f320;Date.cpp&#x1f309; …

微软专家分享 | 拯救者杯 OPENAIGC开发者大赛 能量加油上海站启动啦!

由联想拯救者、AIGC开放社区、英特尔联合主办的“AI生成未来第二届拯救者杯OPENAIGC开发者大赛”自上线以来&#xff0c;吸引了广大开发者的热情参与。 为了向技术开发者、业务人员、高校学生、以及个体创业人员等参赛者们提供更充分的帮助与支持&#xff0c;AIGC开放社区特别…

SpringBoot3.0新特性尝鲜,秒启动的快感!熟悉SpringAOT与RuntimeHints

文章目录 一、前置知识1、官网2、安装GraalVM3、GraalVM的限制4、安装maven5、背景 二、打包SpringBoot3.01、项目准备2、打包3、打包成docker 三、认识AOT1、RuntimeHints2、RuntimeHintsRegistrar3、RegisterReflectionForBinding4、ImportRuntimeHints5、使用JDK动态代理也需…

【禅道客户案例】专访鸿泉物联研发副总监徐小倩,感受上市公司研发项目管理“知与行”

杭州鸿泉物联网技术股份有限公司&#xff08;以下简称“鸿泉物联”、“公司”&#xff09;成立于2009年6月11日&#xff0c;2019年11月6日登陆上海证券交易所科创板&#xff08;股票代码&#xff1a;688288&#xff09;&#xff0c;注册资本10034.392万元&#xff0c;目前员工6…

电磁仿真--基本操作-CST-(3)

目录 1. 目的 2. 建模过程 2.1 创建工程 2.2 修改单位 2.3 创建线和圆柱 2.4 创建螺旋结构 2.5 创建另一个圆柱 2.6 设置频率、背景和边界 2.7 选择RLC求解器 2.8 设置端口 2.9 配置求解器 3. 仿真结果 4. 总结 1. 目的 本文将介绍一种较为复杂的建模方法&#x…

计算机网络物理层思维导图+大纲笔记

大纲笔记&#xff1a; 物理层的基本概念 解决如何在连接各种计算机的传输媒体上传输数据比特流&#xff0c;而不是具体的传输媒体 主要任务 确定与传输媒体接口有关的一些特性 机械特性 电气特性 功能特性 规程特性信道上传送的信号 基带信号 来自信源的信号&#xff0c;直接表…

全彩屏负氧离子监测站的使用

TH-FZ5在繁忙的都市生活中&#xff0c;我们往往忽视了一个至关重要的问题——空气质量。随着工业化的进程加速&#xff0c;空气污染已成为影响人们健康的一大隐患。为了实时监测和了解身边的空气质量&#xff0c;全彩屏负氧离子监测站应运而生&#xff0c;成为了我们守护呼吸健…

Golang | Leetcode Golang题解之第50题Pow(x,n)

题目&#xff1a; 题解&#xff1a; func myPow(x float64, n int) float64 {if n > 0 {return quickMul(x, n)}return 1.0 / quickMul(x, -n) }func quickMul(x float64, n int) float64 {if n 0 {return 1}y : quickMul(x, n/2)if n%2 0 {return y * y}return y * y * …

Redis 安装及配置教程(Windows)【安装】

文章目录 一、简介一、 下载1. GitHub 下载2. 其它渠道 二、 安装1. ZIP2. MSI 软件 / 环境安装及配置目录 一、简介 Redis 官网地址&#xff1a;https://redis.io/   Redis 源码地址&#xff1a;https://github.com/redis/redis   Redis 官网安装地址&#xff08;无Windo…

读天才与算法:人脑与AI的数学思维笔记09_分形

1. 分形 1.1. 1904年&#xff0c;瑞典数学家科赫&#xff08;Helge von Koch&#xff09;首次发表了雪花图案的结构——科赫曲线&#xff08;又称雪花曲线&#xff09;&#xff0c;它被认为是一种数学怪胎&#xff0c;一种奇怪的人工构造 1.1.1. 但实际上并不是&#xff0c;自…

4- 24

day02 1.100个英语单词 2.vp div3 不过有点小悲惨&#xff0c;第一题正常的直接看出来答案。第二题其实是map模拟&#xff0c;一直没有读懂题目的意思&#xff0c;题目给的序列是打乱的。找出最小的&#xff0c;讲原来的序列补全&#xff0c;如果mp中没有这个数字&#xff0c;…

Android 系统充电动画

效果 Android获取电池充电状态是否为快充可参考. Android_source/frameworks/base/packages/SystemUI/src/com/android/systemui/statusbar/phone/StatusBar.java private int lastBatteryStatus;private final BroadcastReceiver mBatteryChangedReceiver new BroadcastRece…