vue2+three.js实现火焰效果

  // 火焰getFireMaterial() {const vertex = `
${ShaderChunk.logdepthbuf_pars_vertex}
bool isPerspectiveMatrix(mat4) {return true;
}
varying vec4 m_pos;
varying vec2 vUv;
varying vec3 _flame;
uniform float uTime;
vec2 hash( vec2 p ){p = vec2( dot(p,vec2(150.1,350.7)), dot(p,vec2(269.5,183.3)) );return -1.0 + 2.0*fract(sin(p)*43758.5453123);
}// 定义噪声函数,接受一个二维向量作为输入并返回一个浮点值作为输出
float noise1( in vec2 p ){// 定义常量K1和K2,它们是用于构建网格索引和梯度的数学参数const float K1 = 0.366025404; // (sqrt(3)-1)/2;const float K2 = 0.211324865; // (3-sqrt(3))/6;// 通过将输入点p加上一个基于p的偏移量,然后向下取整,得到网格的整数索引vec2  i = floor( p + (p.x+p.y)*K1 );vec2  a = p - i + (i.x+i.y)*K2;float m = step(a.y,a.x); vec2  o = vec2(m,1.0-m);vec2  b = a - o + K2;vec2  c = a - 1.0 + 2.0*K2;vec3  h = max( 0.5-vec3(dot(a,a), dot(b,b), dot(c,c) ), 0.0 );vec3  n = h*h*h*h*vec3( dot(a,hash(i+0.0)), dot(b,hash(i+o)), dot(c,hash(i+1.0)));return dot( n, vec3(70.0) );
}
float noise2(in vec2 p){return0.500*noise1(p*1.0)+0.250*noise1(p*2.0)+0.125*noise1(p*4.0)+0.063*noise1(p*8.0);
}
vec2 noise3(in vec2 p){return vec2(noise2(p), noise2(p + 100.0));
}
vec2 noise4(in vec2 p){return noise3(p + noise3(p));
}
vec2 transform(in vec2 p){return p + 0.2 * noise4(1.4 * p - vec2(0.0, uTime * 0.8));
}
vec3 ud(vec2 p) {p.x = abs(p.x);float q = p.x * (p.y * 11.0 + 1.7);p.x = max(p.x, q);return vec3(1.0, 0.1, 0.0) / pow(length(p), 5.0) * 0.000008;
}void main () {vUv = uv;vec2 st = uv-.80;_flame = ud(transform(st * vec2(1.0, 0.5)));    vec3 newPosition = normal*vec3(0,0,0)+position;gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);${ShaderChunk.logdepthbuf_vertex}
}`;// 片元着色器代码const fragment = `
${ShaderChunk.logdepthbuf_pars_fragment}
precision mediump float;
varying vec2 vUv;
varying vec3 _flame;
void main() {vec2 uv = vUv;vec3 color = vec3(0.,0.,1.);gl_FragColor = vec4(_flame,length(_flame));${ShaderChunk.logdepthbuf_fragment}
}`;const uniforms = {uTime: { value: 5.0 },};const material = new THREE.ShaderMaterial({uniforms: {uTime: { value: 5.0 },},vertexShader: vertex,fragmentShader: fragment,side: DoubleSide,transparent: true,depthWrite: true,depthTest: true,alphaTest: 0.5,});return material;},
export default {data() {return {autoRotate: false,isDriver: false,dialogTableVisibleMusic: false,checkedMusic: false,dialogTableVisible: false,dialogTableVisibleDaynight: false,dialogTableVisibleModeldetails: false,intersects: "",dialogTableVisibleGtlldetails: false,dialogTablezh: false,material: "",geometry:"",visible: false,};}
}
let mesh,mesh2inithuy() {let geometry = new THREE.PlaneGeometry(20, 50, 50, 50);let material = this.getFireMaterial();console.log("@material", material);this.geometry = geometry;this.material = material;mesh = new THREE.Mesh(geometry, material);mesh2 = mesh.clone();mesh2.rotation.y = Math.PI / 2;console.log("@viewer.scene", viewer.scene);viewer.scene.add(mesh, mesh2);this.loop();},
    loop() {requestAnimationFrame(loop);if (this.material) {this.material.uniforms.uTime.value += 0.01;}}

在这里插入图片描述

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

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

相关文章

EDA期末复习——基础知识

个人名片: 🎓作者简介:嵌入式领域优质创作者🌐个人主页:妄北y 📞个人QQ:2061314755 💌个人邮箱:[mailto:2061314755qq.com] 📱个人微信:Vir2025WB…

SaaS 出海:Databend Cloud 的定位与实践

提到 “SaaS 出海”这个词大家肯定并不陌生,SaaS 企业将业务拓展到海外市场已经成为许多 SaaS 公司的重要战略方向。随着企业对于灵活性、可扩展性以及成本效益需求的不断增长, SaaS 模式提供了理想的解决方案。对于寻求出海机会的 SaaS 企业来说&#x…

神州信息与国科量子联合进军量子网络应用服务市场(中国军民两用通信技术展览会)

量子通信,智联未来 —— 神州信息与国科量子共启安全通信新纪元 在信息技术飞速发展的今天,信息安全已成为全球关注的焦点。神州数码信息服务股份有限公司(神州信息)与国科量子通信网络有限公司(国科量子)…

【地理库 Turf.js】

非常全面的地理库 , 这里枚举一些比较常用,重点的功能, 重点功能 提供地理相关的类:包括点,线,面等类。 测量功能:点到线段的距离,点和线的关系等。 判断功能: 点是否在…

phpMyAdmin 4.0.10 文件包含 -> getshell

phpMyAdmin 4.0.10 文件包含 -> getshell 前言:这里这个漏洞相对来说审计起来不是特别难,但是对于初学者还是有点挑战性的,从zkaq web课过来的小伙伴想挑战一下自己代码审计能力的话,可以直接跳到最后下载源码,聂风…

Python基础小知识问答系列-随机数相关

1. 问题: 如何生成x-y之间的随机整数? 如何生成0-1之间的随机浮点数? 如何生成x-y之间的随机浮点数? 如何从列表中随机获取一个元素? 如何从列表中随机获取多个元素? 如…

LeetCode刷题之HOT100之最大正方形

今天下起了暴雨,本以为下午就可以结束的答辩又因为老师开会被推迟。研三的学长走了后我们开始了0元购,收获颇丰哈哈,做个题 1、题目描述 2、算法分析 给定一个矩形,要求最大正方形。第一次见这种题目哈 2024 6/30 嘿嘿&#xff…

实体零售连锁企业如何通过物流接口实现数智化转型升级?

在电子商务浪潮的持续冲击下,传统的实体零售行业面临着巨大的挑战。为了在线上线下融合的新零售时代保持竞争力,众多实体零售企业积极寻求数字化转型的突破。 某中国零售连锁百强企业近年来致力于打造自有品牌的线上销售体系,自2021年8月起接…

Python数据分析-风湿关节炎生存分析

一、研究背景和意义 类风湿关节炎(RA)是一种慢性炎症性疾病,主要影响关节,但也可能影响身体的其他部分。RA的病因尚不完全清楚,但已知其涉及免疫系统的异常反应。患者的免疫系统错误地攻击自身的关节组织,…

HCIA4.9-4.19笔记

通讯——双向的,必须保证有来有回才能成功。 当拓扑图中的所有路由器拥有拓扑图中的所有网段时,即可实现全网通。 路由器获取位置网段的方法 静态路由 由管理员手写的路由条目 动态路由 所有路由器上运行同一种动态路由协议,之后通过路…

低代码表单配置平台替代普通表单配置平台,前端部分重构的设计和思路

前言 最近将公司的旧表单配置平台重构为低代码表单配置平台,这里记录一下这个过程的设计和思路,不涉及具体的代码;另外这篇文章基本只涉及前端部分,也不涉及与后端数据交互部分。 需求 固化的表单配置平台 -> 灵活的表单配置…

【最长公共前缀 动态规划】2430. 对字母串可执行的最大删除数

如果有不明白的,请加文末QQ群。 本文涉及知识点 最长公共前缀 动态规划 动态规划汇总 LeetCode 2430. 对字母串可执行的最大删除数 给你一个仅由小写英文字母组成的字符串 s 。在一步操作中,你可以: 删除 整个字符串 s ,或者 …

vscode中的字符缩进问题

问题描述: 如图当一行代码中出现不同类型的字符时,使用tab缩只是插入了固定数量(默认4)的空格或制表符,仍然无法对齐。 解决方法: vscode找到设置,搜索fontFamily,对应输入框写入mon…

Linux系统编程--进程间通信

目录 1. 介绍 1.1 进程间通信的目的 1.2 进程间通信的分类 2. 管道 2.1 什么是管道 2.2 匿名管道 2.2.1 接口 2.2.2 步骤--以父子进程通信为例 2.2.3 站在文件描述符角度-深度理解 2.2.4 管道代码 2.2.5 读写特征 2.2.6 管道特征 2.3 命名管道 2.3.1 接口 2.3.2…

集成平台建设方案(Doc原件)

基础支撑平台作为系统总体架构的核心,不仅要促进与各应用子系统和第三方系统的顺畅交互,还需确保内部业务在该平台上能够灵活扩展。针对这一需求,我们对基础支撑平台提出了以下要求: (1) 平台需基于其基础架构,为多源异…

python基础:设置代码格式

随着编写的程序越来越长,有必要了解一些代码格式的约定,让你的代码尽可以能易于阅读。 python代码编写规范为PEP8,有兴趣的朋友可以下载观看,这里仅作简要说明。 1、缩进 PEP8建议每级缩进都使用4个空格。多数情况下编程语言的…

vscode-创建vue3项目-修改暗黑主题-常见错误-element插件标签-用法涉及问题

文章目录 1.vscode创建运行编译vue3项目2.添加项目资源3.添加element-plus元素4.修改为暗黑主题4.1.在main.js主文件中引入暗黑样式4.2.添加自定义样式文件4.3.html页面html标签添加样式 5.常见错误5.1.未使用变量5.2.关闭typescript检查5.3.调试器支持5.4.允许未到达代码和未定…

UE5的安装与基本操作(一)

文章目录 前言安装UE5新建第一个游戏项目基本游览方式对目标进行变换各种变换对齐 快速定位目标 总结 前言 Unreal Engine 5 (UE5) 是一款由 Epic Games 开发的实时 3D 创作平台,用于制作游戏、电影、动画、建筑可视化和其他类型的交互式体验。UE5 提供了一系列强大…

Flutter第十五弹 Flutter插件

目标: 1.Flutter插件是什么?有什么作用? 插件 (plugin) 是 package 的一种,全称是 plugin package,我们简称为 plugin,中文叫插件。 2.怎么创建Flutter插件? 一、什么是插件 在flutter中&am…

【成都活动邀请函】7月6 | PowerData 数字经济-“成都“开源行!

【成都活动邀请函】7月6 | PowerData 数字经济-"成都"开源行! 活动介绍活动信息线上直播扫码报名往期活动回顾专注数据开源,推动大数据发展 活动介绍 九天开出一成都,万户千门入画图。 自古以来,成都便是国家发展的重要…