three实现魔幻色彩山脉变形动画效果代码
代码语言:html
所属分类:动画
代码描述:three实现魔幻色彩山脉变形动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> canvas { width: 100%; height: 100vh; display: block; } body {overflow:hidden; background:black; -webkit-animation:zoom 1; animation-duration:1000s;} @keyframes zoom {0% {transform:scale(2);}} </style> </head> <body> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.123.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.125.js"></script> <script type="module"> const renderer = new THREE.WebGLRenderer({ antialias: true }); const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, 2, .1, 1000); const controls = new THREE.OrbitControls(camera, renderer.domElement); window.addEventListener('resize', () => { const { clientWidth, clientHeight } = renderer.domElement; renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(clientWidth, clientHeight, false); camera.aspect = clientWidth / clientHeight; camera.updateProjectionMatrix(); }); document.body.prepend(renderer.domElement); window.dispatchEvent(new Event('resize')); renderer.setAnimationLoop(t => { renderer.render(scene, camera); controls.update(); animate(t); }); // ---- // Main // ---- THREE.ShaderChunk.my_map_fragment = ` #ifdef USE_MAP float t = t * 0.0007; vec2 uv = vUv * textureScale + vec2(-1.0, 0.5); // scale offset old uv vec4 A = texture2D(map, uv); // old texel float strength = 130.9; // controls the swirling strength float rotationRadius = 0.5; // distance from the center where the rotation happens vec2 centeredUv = uv - vec2(0.5, 0.5); // shifting UVs for the swirl effect float distanceFromCenter = length(centeredUv); // Swirling Effect if (distanceFromCenter < rotationRadius) { float angle = strength * (rotationRadius - distanceFromCenter) / rotationRadius; // the closer to the center, the stronger the rotation float s = sin(angle); float c = cos(angle); uv = vec2(dot(centeredUv, vec2(c, -s)), dot(centeredUv, vec2(s, c))) + vec2(0.5, 0.5); } // Your Original .........完整代码请登录后点击上方下载按钮下载查看
网友评论0