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…

The dependencies of some of the beans in the application context form a cycle

The dependencies of some of the beans in the application context form a cycle: 出现这种问题,如果你用其他方法怎么都处理不掉,可以使用最后的方法: 解决方案: 在配置文件增添一行配置即可: properties 配置文件 …

Spring Boot中的版本兼容性处理

Spring Boot中的版本兼容性处理 大家好,我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿!今天我们来聊聊Spring Boot中的版本兼容性处理。Spring Boot的版本更新频繁&…

Redis的使用

1 Redis属于非关系型数据库: 优势:读的速度快110000次/s 写的速度81000次/s 支持持久化存储 2 Redis的相关执行命令: 2-1 打开一个 cmd 窗口 使用 cd 命令切换目录到 C:\redis 运行: redis-server.exe redis.windows.conf …

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之间的随机浮点数? 如何从列表中随机获取一个元素? 如何从列表中随机获取多个元素? 如…

代码随想录训练营第二十四天 78子集 90子集II

第一题: 原题链接:78. 子集 - 力扣(LeetCode) 思路: 本题很简单,就是在每次遍历的地方都要搜集结果。 终止条件:当前要收集的起始位置已经大于等于数组的大小的时候证明已经搜集到完成了。 …

Foxit Reader(福昕阅读器)详细安装和使用教程

第一部分:Foxit Reader简介和基本信息 1.1 什么是Foxit Reader? Foxit Reader(福昕阅读器)是一款功能强大的PDF阅读和编辑软件,以其快速、轻巧和丰富的功能而闻名。它不仅支持常规的PDF阅读功能,还提供了…

LeetCode刷题之HOT100之最大正方形

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

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

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

深入解析 gRPC 的重连机制

目录 什么是 gRPC 重连机制 gRPC 重连策略 gRPC 重连参数 gRPC 重连机制原理 重连机制的注意事项 小结 gRPC 的重连机制是确保客户端在连接断开后能够自动重新连接到服务器的一种机制,对于分布式系统和微服务架构中的高可用性和容错性至关重要。 什么是 gRPC…

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

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

HCIA4.9-4.19笔记

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

Python 3 注释

Python 3 注释 在编程中,注释是一种用于解释代码和提供上下文的方式,它对代码的执行没有影响。Python 3 支持多种类型的注释,包括单行注释和多行注释。注释对于提高代码的可读性和维护性非常重要,特别是在团队合作和大型项目中。 单行注释 单行注释以井号(#)开头,用于…

C++ 成员模板类

#include <iostream> // 包含头文件。 using namespace std; // 指定缺省的命名空间。template<class T1, class T2> class AA // 类模板AA。 { public:T1 m_x;T2 m_y;AA(const T1 x, const T2 y) : m_x(x), m_y(y) {}void show() { c…

Python 学习之简单的程序(三)

编写简单的Python程序是巩固基础的好方法。下面我将给出几个简单的Python程序示例&#xff0c;涵盖了基本的数据类型、控制流、函数和文件操作。 示例1&#xff1a;Hello, World! 这是最简单的Python程序&#xff0c;用于打印出 "Hello, World!"。 print("He…

初学者指南:如何选择嵌入式Linux和单片机(MCU)

前言 在嵌入式系统开发领域&#xff0c;选择合适的平台是项目成功的关键之一。对于初学者来说&#xff0c;如何在嵌入式Linux和单片机&#xff08;MCU&#xff09;之间做出选择可能是一项艰巨的任务。本文将详细解释这两种平台的特点、优缺点&#xff0c;以及在不同应用场景中…