three+TweenMax实现炫酷数字加载进度条动画效果代码-html代码-BFW代码库

three+TweenMax实现炫酷数字加载进度条动画效果代码

代码语言：html

所属分类：进度条

代码描述：three+TweenMax实现炫酷数字加载进度条动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">

<style>
    body {
	margin: 0;
	overflow: hidden;
	position: fixed;
}
canvas {
	width: 100%;
	height: 100%;
}
</style>

</head>
<body>
<!-- partial:index.partial.html -->
<script id="vertexShader" type="x-shader/x-vertex">
			varying vec2 vUv;
			void main() {
			  vUv = uv;
			  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
			}
		</script>

		<script id="fragmentShader" type="x-shader/x-fragment">
			varying vec2 vUv;

			uniform sampler2D texture;
			uniform sampler2D texture2;
			uniform sampler2D disp;

			uniform float time;
			uniform float random;
			uniform float dispFactor;

			vec2 rotate(vec2 v, float a) {
				float s = sin(a);
				float c = cos(a);
				mat2 m = mat2(c, -s, s, c);
				return m * v;
			}

			void main() {

			    vec2 uv = vUv;

				vec2 newUV = vec2(uv.x, uv.y);

				newUV -= 0.5;
				vec2 rotUV = rotate(newUV, random);
				rotUV += 0.5;


				vec4 disp = texture2D(disp, rotUV);


				vec2 distortedPosition = vec2(uv.x + dispFactor * (disp.g*0.3), uv.y);
				vec2 distortedPosition2 = vec2(uv.x - (1.0 - dispFactor) * (disp.g*0.3), uv.y);

				vec4 _texture = texture2D(texture, distortedPosition);
				vec4 _texture2 = texture2D(texture2, distortedPosition2);


				vec2 distortedPosition3 = vec2(uv.x + dispFactor * (disp.g*0.25), uv.y);
				vec4 _texture3 = texture2D(texture2, distortedPosition3);


				vec4 finalTexture = mix(_texture, _texture2, dispFactor);

				vec4 finalTexture2 = mix(_texture, _texture3, dispFactor);

				gl_FragColor = finalTexture * finalTexture2;
			}
		</script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.84.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script><script >
    
    window.addEventListener("resize", onWindowResize);

var frustumSize = 600;
var aspect = window.innerWidth / window.innerHeight;

var clock = new THREE.Clock(true);

var scene = new THREE.Scene();
camera = new THREE.OrthographicCamera(
	frustumSize * aspect / -2,
	frustumSize * aspect / 2,
	frustumSize / 2,
	frustumSize / -2,
	1,
	2000
);

camera.lookAt(scene.position);
camera.position.z = 1;

var renderer = new THREE.WebGLRenderer();

renderer.setPixelRatio = 1;
renderer.setClearColor(0xffffff, 1.0);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

function onWindowResize() {
	var aspect = window.innerWidth / window.innerHeight;

	camera.left = -frustumSize * aspect / 2;
	camera.right = frustumSize * aspect / 2;
	camera.top = frustumSize / 2;
	camera.bottom = -frustumSize / 2;

	camera.updateProjectionMatrix();

	renderer.setSize(window.innerWidth, window.innerHeight);
}

var addToGPU = function(t) {
	renderer.setTextu.........完整代码请登录后点击上方下载按钮下载查看