three+webgl实现鼠标跟随光子流动画效果代码
代码语言:html
所属分类:其他
代码描述:three+webgl实现鼠标跟随光子流动画效果代码
代码标签: three webgl 鼠标 跟随 光子 流 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { margin: 0; background: black; } .root { position: fixed; top: 0; left: 0; height: 100vh; width: 100vw; padding: 0; margin: 0; z-index: 2; } </style> </head> <body translate="no"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/es-module-shims.1.6.2.js"></script> <script type="importmap"> { "imports": { "three": "//repo.bfw.wiki/bfwrepo/js/module/three/build/150/three.module.js", "addons/": "//repo.bfw.wiki/bfwrepo/js/module/three/examples/150/jsm/" } } </script> <div class="root" id="root"></div> <script type="module"> import * as THREE from 'three'; let scene; let camera; let renderer; const root = document.querySelector('#root'); const init = () => { scene = new THREE.Scene(); const width = window.innerWidth; const height = window.innerHeight; camera = new THREE.OrthographicCamera(width / -2, width / 2, height / 2, height / -2, 1, 1000); camera.position.z = 2; renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setClearColor(0x000000, 1); root.appendChild(renderer.domElement); }; init(); let bufferScene; let textureA; let textureB; let bufferMaterial; let plane; let bufferObject; let finalMaterial; let quad; const bufferTexture = () => { bufferScene = new THREE.Scene(); textureA = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight, { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, samples: 8 }); textureB = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight, { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, samples: 8 }); bufferMaterial = new THREE.ShaderMaterial({ uniforms: { uTexture: { value: textureA }, uRes: { value: { x: window.innerWidth, y: window.innerHeight } }, uMouse: { value: { x: window.innerWidth * .5, y: window.innerHeight * .5 } }, uTime: { value: 0 }, uCol: { value: 0 }, uSpeed: { value: 0 } }, fragmentShader: /* glsl */` float hue2rgb(float f1, float f2, float hue) { if (hue < 0.0) hue += 1.0; else if (hue > 1.0) hue -= 1.0; float res; if ((6.0 * hue) < 1.0) res = f1 + (f2 - f1) * 6.0 * hue; else if ((2.0 * hue) < 1.0) res = f2; else if ((3.0 * hue) < 2.0) res = f1 + (f2 - f1) * ((2.0 / 3.0) - hue) * 6.0; else res = f1; return res; } vec3 hsl2rgb(vec3 hsl) { vec3 rgb; if (hsl.y == 0.0) { rgb = vec3(hsl.z); // Luminance } else { float f2; if (hsl.z < 0.5) f2 = hsl.z * (1.0 + hsl.y); else f2 = hsl.z + hsl.y - hsl.y * hsl.z; float f1 = 2.0 * hsl.z - f2; rgb.r = hue2rgb(f1, f2, hsl.x + (1.0/3.0)); rgb.g =.........完整代码请登录后点击上方下载按钮下载查看
网友评论0