three+gsap实现照片粒子分解动画效果代码-html代码-BFW代码库

three+gsap实现照片粒子分解动画效果代码

代码语言：html

所属分类：粒子

代码描述：three+gsap实现照片粒子分解动画效果代码，点击试试。

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

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/alphardex/aqua.css/dist/aqua.min.css'>
  
<style>
body {
  min-height: 100vh;
  margin: 0;
  background: #f7f7fd;
}
</style>


</head>

<body >
  <div class="relative w-screen h-screen">
  <div class="absolute w-screen h-screen flex-center opacity-0">
    <img src="//repo.bfw.wiki/bfwrepo/image/61de6e39623c8.png" class="w-60 cursor-pointer" alt="" crossorigin="anonymous" />
  </div>
  <div class="particle-explode w-full h-full bg-black"></div>
</div>


  
      <script  type="module">
import * as THREE from "https://cdn.skypack.dev/three@0.124.0";
import { OrbitControls } from "https://cdn.skypack.dev/three@0.124.0/examples/jsm/controls/OrbitControls";
import { EffectComposer } from "https://cdn.skypack.dev/three@0.124.0/examples/jsm/postprocessing/EffectComposer";

import imagesLoaded from "https://cdn.skypack.dev/imagesloaded@4.1.4";
import { RenderPass } from "https://cdn.skypack.dev/three@0.124.0/examples/jsm/postprocessing/RenderPass.js";
import { UnrealBloomPass } from "https://cdn.skypack.dev/three@0.124.0/examples/jsm/postprocessing/UnrealBloomPass.js";
import gsap from "https://cdn.skypack.dev/gsap@3.6.0";
import { Maku, getScreenFov } from "https://cdn.skypack.dev/maku.js@1.0.1";
const calcAspect = (el) => el.clientWidth / el.clientHeight;
const getNormalizedMou.........完整代码请登录后点击上方下载按钮下载查看