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&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