three+bas实现图片漏斗动画切换图片效果代码-html代码-BFW代码库

代码语言：html

所属分类：幻灯片

代码描述：three+bas实现图片漏斗动画切换图片效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
	<style>
	    html,
body {
  height: 100%;
}

body {
  overflow: hidden;
  margin: 0;
  background-color: #000;
}

canvas {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}
	</style> 
</head>

<body>  

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.88.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bas.js"></script>
    <script >
        var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var TEXTURE_SRC_BEFORE = '//repo.bfw.wiki/bfwrepo/image/5d653a3d2a1fe.png'; // https://unsplash.com/photos/dcp4hnQY-z0
var TEXTURE_SRC_AFTER = '//repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png'; // https://unsplash.com/photos/weuWmzv7xnU

var PREFAB = {
  WIDTH: 1,
  HEIGHT: 1
};

var START_DELAY = 500;
var INTERVAL = '10.';
var DURATION_START = '1.2';
var DURATION_END = '1.2';

function init(textureBefore, textureAfter) {
  var image = textureBefore.image;
  var width = image.width;
  var height = image.height;
  var intervalX = width / PREFAB.WIDTH;
  var intervalY = height / PREFAB.HEIGHT;

  var root = new THREERoot({
    cameraPosition: [0, 0, width * 2.5],
    aspect: 0.6 / 1,
    autoStart: false
  });

  var prefab = new THREE.PlaneGeometry(PREFAB.WIDTH, PREFAB.HEIGHT);
  var geometry = new BAS.PrefabBufferGeometry(prefab, intervalX * intervalY);
  var aPosition = geometry.createAttribute('aPosition', 4);

  var i = 0;
  for (var x = 0; x < intervalX; x++) {
    for (var y = 0; y < intervalY; y++) {
      geometry.setPrefabData(aPosition, i++, [x * PREFAB.WIDTH - width / 2, y * PREFAB.HEIGHT - height / 2, 0, Math.random() // random coefficient
      ]);
    }
  }

  textureBefore.minFilter = THREE.LinearFilter;
  textureAfter.minFilter = THREE.LinearFilter;

  var material = new BAS.BasicAnimationMaterial({
    side: THREE.DoubleSide,
    vertexColors: THREE.VertexColors,
    uniforms: {
      uTime: { type: 'f', value: 0 },
      uSize: { type: 'vf2', value: [width, height] },
      mapBefore: { type: 't', value: textureBefore },
      mapAfter: { type: 't', value: textureAfter }
    },
    vertexFunctions: [BAS.ShaderChunk['ease_quad_in_out'], BAS.ShaderChunk['ease_quad_in'], BAS.ShaderChunk['ease_quad_out']],
    vertexParameters: '\n      uniform float uTime;\n      uniform vec2 uSize;\n      uniform sampler2D mapBefore;\n      uniform sampler2D mapAfter;\n      attribute vec4 aPosition;\n      const float interval = ' + INTERVAL + ';\n      const float durationStart = ' + DURATION_START + ';\n      const float durationEnd = ' + DURATION_END + ';\n      const float totalTime = durationStart + interval + durationEnd;\n      const float speed = 60.;\n      const float minWeight = 0.3;\n      const float fallSpeed = 4.;\n      const float xSpeed = 0.03;\n      const float spreadPosition = 0.03;\n    ',
    vertexInit: '\n      vec2 texelCoord = (aPosition.xy + uSize / 2.) / uSize;\n      vec4 texelBefore = texture2D(mapBefore, texelCoord);\n      vec4 texelAfter = texture2D(mapAfter, texelCoord);\n      float bottom = aPosition.y - uSize.y * 1.8;\n      float time = uTime / 50.;\n      float tTime = mod(time, totalTime);\n      float doubleTime = mod(time, totalTime * 2.);\n      float isReverse = step(totalTime, doubleTime);\n      float progress = max(tTime - durationStart, 0.);\n      float nProgress = progress / interval;\n      float move = progress * speed;\n      float weightBefore = pow(1. - texelBefore.r * texelBefore.g * texelBefore.b, 2.) * (1. - minWeight) + minWeight;\n      float weightAfter = pow(1. - texelAfter.r * texelAfter.g * texelAfter.b, 2.) * (1. - minWeight) + minWeight;\n      float order = pow(abs(aPosition.x) / (uSize.x * 0.5), 2.) * 40.;\n      float fall = max(-aPosition.y - uSize.y / 2. + move - order, 0.) * (aPosition.w * 0.2 + 1.) * (0.3 + nProgress) * fallSpeed;\n      float y = aPosition.y - fall * mix(weightBefore, weightAfter, easeQuadIn(min(fall, -bottom) / -bottom)) - move + order * clamp(progress, 0., 1.);\n      float offsetY = easeQuadOut(clamp(tTime / durationStart, 0., 1.)) * uSize.y * 0.9;\n      float endOffsetY = easeQuadIn(clamp((tTime.........完整代码请登录后点击上方下载按钮下载查看