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

代码语言:html

所属分类:粒子

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

代码标签: 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.appe.........完整代码请登录后点击上方下载按钮下载查看

网友评论0