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.pswp.cn/diannao/38220.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/38220.shtml
英文地址,請注明出處:http://en.pswp.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;以及在不同應用場景中…