three+webgl实现三维不规则液体旋转变形动画效果代码
代码语言:html
所属分类:三维
代码描述:three+webgl实现三维不规则液体旋转变形动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> </head> <body > <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.128.js"></script> <script > // Reference // https://towardsdatascience.com/fun-with-html-canvas-lets-make-lava-lamp-plasma-e4b0d89fe778 // https://www.youtube.com/watch?v=8K5wJeVgjrM&t=615s // Thank you so much. // sphere vertex shader source const vertexSphereShader = ` uniform float uTime; uniform float mouse; varying vec2 vUv; float PI = 3.14159265359; // Reference // https://gist.github.com/patriciogonzalezvivo/670c22f3966e662d2f83 // Thank you so much. float mod289(float x){return x - floor(x * (1.0 / 289.0)) * 289.0;} vec4 mod289(vec4 x){return x - floor(x * (1.0 / 289.0)) * 289.0;} vec4 perm(vec4 x){return mod289(((x * 34.0) + 1.0) * x);} float noise(vec3 p){ vec3 a = floor(p); vec3 d = p - a; d = d * d * (3.0 - 2.0 * d); vec4 b = a.xxyy + vec4(0.0, 1.0, 0.0, 1.0); vec4 k1 = perm(b.xyxy); vec4 k2 = perm(k1.xyxy + b.zzww); vec4 c = k2 + a.zzzz; vec4 k3 = perm(c); vec4 k4 = perm(c + 1.0); vec4 o1 = fract(k3 * (1.0 / 41.0)); vec4 o2 = fract(k4 * (1.0 / 41.0)); vec4 o3 = o2 * d.z + o1 * (1.0 - d.z); vec2 o4 = o3.yw * d.x + o3.xz * (1.0 - d.x); return o4.y * d.y + o4.x * (1.0 - d.y); } void main(){ float noisy = mouse * pow(noise(normal * 2.0 + uTime * 10.0), 2.0); vec3 newPosition = position + noisy * normal * 100.0; vec4 mvPosition = modelViewMatrix * vec4(newPosition, 1.0); vUv = uv; gl_Position = projectionMatrix * mvPosition; } `; // sphere fragment shader source const fragmentSphereShader = ` uniform float uTime; uniform sampler2D uTexture; varying vec2 vUv; void main () { vec4 color = texture2D(uTexture, vUv); gl_FragColor = vec4(color / 3.0); } `; // sphere vertex shader source const vertexFloorShader = ` uniform float uTime; uniform float mouse; varying vec2 vUv; float PI = 3.14159265359; // Reference // https://gist.github.com/patriciogonzalezvivo/670c22f3966e662d2f83 // Thank you so much. float mod289(float x){return x - floor(x * (1.0 / 289.0)) * 289.0;} vec4 mod289(vec4 x){return x - floor(x * (1.0 / 289.0)) * 289.0;} vec4 perm(vec4 x){return mod289(((x * 34.0) + 1.0) * x);} float noise(vec3 p){ vec3 a = floor(p); vec3 d = p - a; d = d * d * (3.0 - 2.0 * d); vec4 b = a.xxyy + vec4(0.0, 1.0, 0.0, 1.0); vec4 k1 = perm(b.xyxy); vec4 k2 = perm(k1.xyxy + b.zzww); vec4 c = k2 + a.zzzz; vec4 k3 = perm(c); vec4 k4 = perm(c + 1.0); vec4 o1 = fract(k3 * (1.0 / 41.0)); vec4 o2 = fract(k4 * (1.0 / 41.0)); vec4 o3 = o2 * d.z + o1 * (1.0 - d.z); vec2 o4 = o3.yw * d.x + o3.xz * (1.0 - d.x); return o4.y * d.y + o4.x * (1.0 - d.y); } void main(){ float noisy = mouse * pow(noise(normal + position.y * position.x + uTime * 10.0), 2.0); vec3 newPosition = position + noisy * 2.0 * normal * 300.0; vec4 mvPosition = modelViewMatrix * vec4(newPosition, 1.0); vUv = uv; gl_Position = projectionMatrix * mvPosition; } `; // sphere fragment shader source const fragmentFloorShader = ` uniform float uTime; uniform sampler2D uTexture; varying vec2 vUv; void main () { vec4 color = texture2D(uTexture, vUv); gl_FragColor = vec4(color / 3.0); } `; /** * Mouse class */ class Mouse { constructor(sketch) { this.sketch = sketch; this.initialize(); } initialize() { this.delta = 0; this.mouse = new THREE.Vector3(); this.setupEvents(); this.lastX = 0; this.lastY = 0; this.speed = 0; } setupEvents() { window.addEventListener('scroll', this.onScroll.bind(this), false); window.addEventListener('mousemove', this.onMousemove.bind(this), false); window.addEventListener('touchmove', this.onTouchmove.bind(this), false); } onScroll(e) { const docScrollTop = window.pageYOffset; const docHeight = document.body.scrollHeight - window.innerHeight; const scrollPercent = docScrollTop / docHeight; this.delta = scrollPercent; } onMousemove(e) { this.mouse.x = e.clientX / window.innerWidth * 2 - 1; this.mouse.y = -(e.clientY / window.innerHeight) * 2 + 1; this.mouse.z = 0; this.speed = Math.sqrt((e.pageX - this.lastX) ** 2 + (e.pageY - this.lastY) ** 2) * 0.1; this.lastX = e.pageX; this.lastY = e.pageY; } onTouchmove(e) { const touch = e.targetTouches[0]; this.mouse.x = touch.pageX / window.innerWidth * 2 - 1; this.mouse.y = -(touch.pageY / window.innerHeight) * 2 + 1; this.mouse.z = 0; this.speed = Math.sqrt((touch.pageX - this.lastX) ** 2 + (touch.pageY - this.lastY) ** 2) * 0.5; this.lastX = touch.pageX; this.lastY = touch.pageY; }} /** * class Sketch */ class Sketch { constructor() { this.createCanvas(); this.setupEvents(); this.time = new THREE.Clock(true); this.mouse = new Mouse(this); this.initialize(); } createCanvas() { this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); document.body.appendChild(this.renderer.domElement); } setupEvents() { window.addEventListener('resize', this.onResize.bind(this), false); } onResize() { if (this.preWidth === window.innerWidth && window.innerWidth < 480) { return; } this.initialize(); } initial.........完整代码请登录后点击上方下载按钮下载查看
网友评论0