three打造一个三维图片粒子分解转场效果幻灯片-html代码-BFW代码库

three打造一个三维图片粒子分解转场效果幻灯片

代码语言：html

所属分类：幻灯片

代码描述：three打造一个三维图片粒子分解转场效果幻灯片

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

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

<style>
body {
  margin: 0;
  width: 100%;
  height: 100%;  
}

canvas {
  display: block;
  cursor: pointer;
}
</style>

</head>
<body translate="no">
<canvas id="canvas"></canvas>
<p class="collection">

</p>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/gsap.3.3.1.js"></script>
<script type="module">
import {
BufferGeometry,
Color,
DoubleSide,
Face3,
Geometry,
InstancedBufferAttribute,
InstancedMesh,
MathUtils,
MeshBasicMaterial,
Object3D,
PerspectiveCamera,
Scene,
TextureLoader,
Vector2,
Vector3,
WebGLRenderer } from
'https://unpkg.com/three@0.119.0/build/three.module.js';

function App() {
  const conf = {
    size: 10,
    images: [
    { src: 'http://repo.bfw.wiki/bfwrepo/image/5e0c6f2cae508.png' },
    { src: 'http://repo.bfw.wiki/bfwrepo/image/5e0c6f962a0d0.png' },
] };



  let renderer, scene, camera, cameraCtrl;
  const screen = {
    width: 0, height: 0,
    wWidth: 0, wHeight: 0,
    ratio: 0 };


  const loader = new TextureLoader();
  const textures = [];
  let planes, plane1, plane2;
  let progress = 0,targetProgress = 0;

  const mouse = new Vector2();

  init();

  function init() {
    renderer = new WebGLRenderer({ canvas: document.getElementById('canvas'), antialias: true });

    camera = new PerspectiveCamera(50);
    camera.position.z = 150;

    updateSize();
    window.addEventListener('resize', onResize);

    Promise.all(conf.images.map(loadTexture)).then(responses => {
      initScene();
      initListeners();

      gsap.fromTo(plane1.uProgress,
      {
        value: -2 },

      {
        value: 0,
        duration: 2.5,
        ease: Power4.easeOut });



      requestAnimationFrame(animate);.........完整代码请登录后点击上方下载按钮下载查看