three打造螺旋转动加载loading效果
代码语言:html
所属分类:加载滚动
代码描述:three打造螺旋转动加载loading效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body {background: #d1684e; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);} #wrap {position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden;} #wrap canvas {position: absolute; left: 50%; top: 50%; width: 500px; height: 500px; margin: -250px 0 0 -250px; -outline: 1px solid #fff;} .info {position: absolute; left: 0; right: 0; bottom: 0; font-size: 12px; color: #ccc; line-height: 2em; text-align: center;} </style> </head> <body translate="no"> <div id="wrap"></div> <p class="info">* Mouse or Finger press on the page to finish loading action.</p> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/three.72.js"></script> <script > var $body = document.body, $wrap = document.getElementById('wrap'), areawidth = window.innerWidth, areaheight = window.innerHeight, canvassize = 500, length = 30, radius = 5.6, rotatevalue = 0.035, acceleration = 0, animatestep = 0, toend = false, pi2 = Math.PI * 2, group = new THREE.Group(), mesh,ringcover,ring, camera,scene,renderer; camera = new THREE.PerspectiveCamera(65, 1, 1, 10000); camera.position.z = 150; scene = new THREE.Scene(); // scene.add(new THREE.AxisHelper(30)); scene.add(group); mesh = new THREE.Mesh( new THREE.TubeGeometry(new (THREE.Curve.create(function () {}, function (percent) { var x = length * Math.sin(pi2 * percent), y = radius * Math.cos(pi2 * 3 * percent), z,t; t = percent % 0.25 / 0.25; t = percent % 0.25 - (2 * (1 - t) * t * -0.0185 + t * t * 0.25); if (Math.floor(percent / 0.25) == 0 || Math.floor(percent / 0.25) == 2) { t *= -1; } z = radius * Math.sin(pi2 * 2 * (percent - t)); return new THREE.Vector3(x, y, z); }))(), 200, 1.1, 2, true), new THREE.MeshBasicMaterial({ color: 0xffffff // , wireframe: true })); group.add(mesh); ringcover = new THREE.Mesh(new THREE.PlaneGeometry(50, 15, 1), new THREE.MeshBas.........完整代码请登录后点击上方下载按钮下载查看
网友评论0