three+gsap实现玫瑰加载过渡动画效果代码
代码语言:html
所属分类:动画
代码描述:three+gsap实现玫瑰加载过渡动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css"> <style> @import url("https://fonts.googleapis.com/css2?family=Cormorant:wght@500&display=swap"); body { overflow: hidden; } #webgl-canvas { position: fixed; z-index: -1; } .title { opacity: 0; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-family: "Cormorant", serif; font-size: 8rem; } </style> </head> <body> <canvas id="webgl-canvas"></canvas> <h1 class="title">ROSE</h1> <!-- vertexShader --> <script id="js-vertex-shader" type="x-shader/x-vertex"> attribute vec3 position; attribute vec2 uv; varying vec2 vUv; void main() { vUv = uv; gl_Position = vec4(position, 1.0); } </script> <!-- fragmentShader --> <script id="js-fragment-shader" type="x-shader/x-fragment"> precision mediump float; uniform sampler2D uTexture1; uniform sampler2D uTexture2; uniform sampler2D uDisp; uniform vec2 uMeshsize; uniform vec2 uTexturesize; uniform float uAnimation; varying vec2 vUv; mat2 scale(vec2 _scale) { return mat2(_scale.x, 0.0, 0.0, _scale.y); } void main() { vec2 ratio = vec2( min((uMeshsize.x / uMeshsize.y) / (uTexturesize.x / uTexturesize.y), 1.0), min((uMeshsize.y / uMeshsize.x) / (uTexturesize.y / uTexturesize.x), 1.0) ); vec2 newUV = vec2( vUv.x * ratio.x + (1.0 - ratio.x) * 0.5, vUv.y * ratio.y + (1.0 - ratio.y) * 0.5 ); vec2 st = newUV; st -= vec2(0.5); st = scale(vec2(0.8 + (uAnimation * 0.2))) * st; st += vec2(0.5); vec2 ed = newUV; ed -= vec2(0.5); ed = scale(vec2(1.0 - (uAnimation * 0.06))) * ed; ed += vec2(0.5); vec4 img1 = texture2D(uTexture1, st); vec4 img2 = texture2D(uTexture2, ed); vec4 displace = texture2D(uDisp, newUV); float disp = smoothstep(0.0, displace.r, uAnimation); vec4 color = mix(img1, img2, disp); gl_FragColor = color; } </script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.109.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.5.2.js"></script> <script>class Stage { constructor() { this.rendererParam = { width: window.innerWidth, height: window.innerHeight }; this.cameraParam = { left: -1, right: 1, top: 1, bottom: 1, near: 0, far: -1 }; this.scene = null; // シーン this.camera = null; // カメラ this.renderer = null; // レンダラ this.geometry = null; // ジオメトリ this.material = null; // マテリアル this.mesh = null; // ボックスメッシュ this.isInitialized = false; } init() { this._setScene(); this._setRender(); this._setCamera(); this.isInitialized = true; } _setScene() { this.scene = new THREE.Scene(); } _setRender() { this.renderer = new THREE.WebGLRenderer({ canvas: document.getElementById("webgl-canvas") }); this.renderer.setPixelRatio(window.devicePixelRatio); this.renderer.setSize(this.rendererParam.width, this.rendererParam.height); } _setCamera() { if (!this.isInitialized) { this.camera = new THREE.OrthographicCamera( this.cameraParam.left, this.cameraParam.right, this.cameraParam.top, this.cam.........完整代码请登录后点击上方下载按钮下载查看
网友评论0