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

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

代码语言：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', valu.........完整代码请登录后点击上方下载按钮下载查看