three打造三维粒子流动动画效果
代码语言:html
所属分类:粒子
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> æther III</title>
<style>
html, body {
background: black;
overflow: hidden;
}
</style>
</head>
<body translate="no">
<canvas id="canvas"></canvas>
<script type="x-shader/x-vertex" id="vert-shader">
attribute vec3 color;
attribute vec2 age;
varying vec3 v_color;
varying vec2 v_age;
void main() {
vec4 mvPosition = modelViewMatrix * vec4(position, 1.);
v_color = color;
v_age = age;
gl_PointSize = 80. * (80. / -mvPosition.z);
gl_Position = projectionMatrix * mvPosition;
}
</script>
<script type="x-shader/x-fragment" id="frag-shader">
uniform sampler2D u_texture;
varying vec3 v_color;
varying vec2 v_age;
float fadeInOut(float t, float m) {
float h = .5 * m;
return abs(mod((t + h), m) - h) / h;
}
void main() {
float alpha = fadeInOut(v_age.s, v_age.t);
gl_FragColor = vec4(v_color, alpha) * texture2D(u_texture, gl_PointCoord);
}
</script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/three.109.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/OrbitControls.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/simplex-noise.min.js"></script>
<script>
"use strict";
const {
abs,
acos,
asin,
atan,
atan2,
ceil,
cos,
floor,
max,
min,
PI,
pow,
random,
round,
sin,
sqrt,
tan
} =
Math;
const HALF_PI = 0.5 * PI;
const QUART_PI = 0.25 * PI;
const TAU = 2 * PI;
const TO_RAD = PI / 180;
const G = 6.67 * pow(10, -11);
const EPSILON = 2.220446049250313e-16;
const rand = n => n * random();
const randIn = (_min, _max) => rand(_max - _min) + _min;
const randRange = n => n - rand(2 * n);
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0