three打造一个三维圆圈loading加载动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:three打造一个三维圆圈loading加载动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background: #275EFE; } canvas { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } body { min-height: 100vh; overflow: hidden; } body .gsap-3-logo { width: 88px; position: fixed; bottom: 12px; right: 152px; } body .dribbble { position: fixed; display: block; right: 20px; bottom: 20px; } body .dribbble img { display: block; width: 76px; } body .twitter { position: fixed; display: block; right: 112px; bottom: 14px; } body .twitter svg { width: 24px; height: 24px; fill: white; } </style> </head> <body > <canvas></canvas> <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 > const $ = (s, o = document) => o.querySelector(s); let width = 440, height = 440, canvas = $('canvas'), renderer = new THREE.WebGLRenderer({ canvas: canvas, context: canvas.getContext('webgl2'), antialias: true, alpha: true }), shape = (inner = 13, outer = 20, height = 6, segments = 60) => { let arc = new THREE.Shape(), hole = new THREE.Path(); arc.moveTo(outer, 0); arc.absarc(0, 0, outer, 0, Math.PI * 2, false); hole.moveTo(inner, 0); hole.absarc(0, 0, inner, 0, Math.PI * 2, true); arc.holes.push(hole); let geometry = new THREE.ExtrudeGeometry(arc, { depth: height, bevelEnabled: false, curveSegments: segments }), material = new THREE.MeshLambertMaterial({ color: 0xD3D4EC }), object = new THREE.Mesh(geometry, material), proxy = new Proxy({ z: null, s: null }, { set(target, key, value) { target[key] = value; if (target.z !== null) { object.position.z = target.z; } if (target.s !== null) { object.scale.x = target.s; object.scale.y = target.s; } return true; }, get(target, key).........完整代码请登录后点击上方下载按钮下载查看
网友评论0