canvas+webgl实现草莓粒子跟随鼠标动画效果代码-html代码-BFW代码库

canvas+webgl实现草莓粒子跟随鼠标动画效果代码

代码语言：html

所属分类：粒子

代码描述：canvas+webgl实现草莓粒子跟随鼠标动画效果代码

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

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

<head>
    <meta charset="UTF-8">

    <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Montserrat:wght@900&amp;display=swap'>
<style>
    body {
  margin: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  background: url("//repo.bfw.wiki/bfwrepo/image/6435154a8272d.png") no-repeat center center;
  background-size: cover;
}

body.hide-background {
  background: none;
}

canvas {
  display: block;
}
</style>

</head>

<body>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/ogl.umd.js"></script>
    <script>
        function App() {
  const { Renderer, Geometry, Program, Mesh, Vec2, Vec3, Texture, GPGPU } = ogl;

  let renderer, gl;
  let time, mouse, ratio;
  let points, positionB, dataB;
  let texture;

  init();

  function init() {
    renderer = new Renderer({ dpr: 2, alpha: true, depth: false, autoClear: true, preserveDrawingBuffer: false });
    gl = renderer.gl;
    document.body.appendChild(gl.canvas);

    time = { value: 0 };
    mouse = { value: new Vec2() };
    ratio = { value: new Vec2() };

    texture = new Texture(gl);
    const images = [
    { texture: texture, src: '//repo.bfw.wiki/bfwrepo/image/6435154a8272d.png' }];


    Promise.all(images.map(loadImage)).then(responses => {
      initAfterLoad();
    });
  }

  function initAfterLoad() {
    resize();
    window.addEventListener('resize', resize, false);
    function resize() {
      const tR = texture.image.width / texture.image.height;
      const w = window.innerWidth,h = window.innerHeight,r = w / h;
      if (r > tR) ratio.value.set(1, h / w * tR);else
      ratio.value.set(w / h / tR, 1);
      renderer.setSize(w, h);
    }

    document.addEventListener('click', () => {
      document.body.classList.toggle('hide-background');
    });

    initScene();
    initListeners();
    requestAnimationFrame(animate);
  }

  function initScene() {
    const numParticles = 256 * 256;
    const positions = new Float32Array(numParticles * 4);
    const data = new Float32Array(nu.........完整代码请登录后点击上方下载按钮下载查看