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