three+webgl实现图片悬浮扭曲放大shader效果代码
代码语言:html
所属分类:悬停
代码描述:three+webgl实现图片悬浮扭曲放大shader效果代码
代码标签: three webgl 图片 悬浮 扭曲 放大 shader
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet"> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 1vh 5vw; background-color: #111215; font-family: "Poppins", sans-serif; color: white; } canvas { display: block; transition: 1s transform; } canvas:hover { transform: scale(1.2); } #imageContainer { position: relative; width: 600px; height: 800px; overflow: hidden; display: flex; justify-content: center; align-items: center; border-radius: 10px; max-width: 100%; filter: saturate(50%); transition: all ease 0.5s; } #imageContainer:hover { filter: saturate(100%) } #imageContainer > * { position: absolute; inset: 0; height: 100% !important; width: 100% !important; object-fit: cover; } /* extra stuff */ .jux-linx { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; justify-content: flex-start; gap: 10px; position: absolute; left: 20px; bottom: 20px; } a { text-decoration: none; font-family: "IBM Plex Sans", sans-serif; font-weight: 400; font-size: 16px; color: white; background-color: black; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 2px; padding: 5px 10px; transition: 0.1s all ease-in; } a:nth-child(1):hover { border: 1px solid rgba(255, 255, 255, 0.4); box-shadow: 0px 2px 0 #349eff; } a:nth-child(2):hover { border: 1px solid rgba(255, 255, 255, 0.4); box-shadow: 0px 2px 0 #ff5757; } </style> </head> <body> <div id="imageContainer"> <img id="myImage" src="//repo.bfw.wiki/bfwrepo/image/5d65ea7d8bc8b.png"> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.155.js"></script> <script > // variables const imageContainer = document.getElementById("imageContainer"); const imageElement = document.getElementById("myImage"); let scene, camera, renderer, planeMesh; // for smooth transitions between base and hover states let currentState = { mousePosition: { x: 0, y: 0 }, waveIntensity: 0.005 }; let targetState = { mousePosition: { x: 0, y: 0 }, waveIntensity: 0.005 }; const ANIMATION_CONFIG = { transitionSpeed: 0.03, baseIntensity: 0.005, hoverIntensity: 0.009 }; // shaders const vertexShader = ` varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `; const fragmentShader = ` uniform float u_time; uniform vec2 u_mouse; uniform float u_intensity; uniform sampler2D u_texture; varying vec2 vUv; void main() { vec2 uv = vUv; float wave1 = sin(uv.x * 10.0 + u_time * 0.5 + u_mouse.x * 5.0) * u_intensity; float wave2 = sin(uv.y * 12.0 + u_time * 0.8 + u_mouse.y *.........完整代码请登录后点击上方下载按钮下载查看
网友评论0