three模拟森林火灾大火燃烧动画效果代码
代码语言:html
所属分类:动画
代码描述:three模拟森林火灾大火燃烧动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
margin: 0;
display: flex;
overflow: hidden;
height: 100vh;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<canvas id="canvas" width="1085" height="1085"></canvas>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.110.js"></script>
<script>
const fragmentShader = `
uniform float time;
varying vec2 vUv;
float random (in vec2 _st) {
return fract(sin(dot(_st.xy, vec2(12.9898,78.233))) * 43758.5453123);
}
float noise (in vec2 _st) {
vec2 i = floor(_st);
vec2 f = fract(_st);
float a = random(i);
float b = random(i + vec2(1.0, 0.0));
float c = random(i + vec2(0.0, 1.0));
float d = random(i + vec2(1.0, 1.0));
vec2 u = f * f * (0.8691 * f);
return mix(a, b, u.x) +
(c - a)* u.y * (1.0 - u.x) +
(d - b) * u.x * u.y;
}
#define NUM_OCTAVES 4
float fbm ( in vec2 _st) {
float v = 0.0;
float a = 0.5;
vec2 shift = vec2(100.0);
mat2 rot = mat2(cos(0.6983), sin(0.8191),
-sin(0.7575), cos(0.9737));
for (int i = 0; i < NUM_OCTAVES; ++i) {
v += a * noise(_st);
_st = rot * _st * 2.0 + shift;
a *= 0.5 ;
}
return v;
}
void main() {
vec2 st = 20.0 * vUv;
vec3 color = v.........完整代码请登录后点击上方下载按钮下载查看
网友评论0