three+webgl实现炫酷森林极光星空夜景动画效果代码
代码语言:html
所属分类:动画
代码描述:three+webgl实现炫酷森林极光星空夜景动画效果代码
代码标签: three webgl 炫酷 森林 极光 星空 夜景 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<!-- partial -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.82.js"></script>
<script >
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
class BackgroundMaterial extends THREE.RawShaderMaterial {
constructor() {
super(BackgroundMaterial.shader);_defineProperty(this, "resize",
() => {
this.uniforms.resolution.value.set(
window.innerWidth * window.devicePixelRatio,
window.innerHeight * window.devicePixelRatio);
});_defineProperty(this, "loop",
timestamp => {
requestAnimationFrame(this.loop);
this.uniforms.globalTime.value = timestamp / 1000;
});addEventListener('resize', this.resize);requestAnimationFrame(this.loop);}}_defineProperty(BackgroundMaterial, "shader", { vertexShader: `
attribute vec3 position;
uniform mat4 projectionMatrix;
uniform mat4 modelViewMatrix;
void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
}
`, fragmentShader: `
#ifdef GL_ES
precision mediump float;
#endif
#define OCTAVES 2
#define RGB(r, g, b) vec3(float(r) / 255.0, float(g) / 255.0, float(b) / 255.0)
uniform vec2 resolution;
uniform float globalTime;
float random(vec2 co) {
return fract(sin(dot(co.xy, vec2(12.9898,78.233))) * 43758.5453);
}
vec2 rand2(vec2 p) {
p = vec2(dot(p, vec2(12.9898,78.233)), dot(p, vec2(26.65125, 83.054543)));
return fract(sin(p) * 43758.5453);
}
float rand(vec2 p) {
return fract(sin(dot(p.xy ,vec2(54.90898,18.233))) * .........完整代码请登录后点击上方下载按钮下载查看
















网友评论0