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">
<style>
    body {
  margin: 0;
  overflow: hidden;
}

.controls {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

canvas {
  position: absolute;
}

svg {
  position: absolute;
  display: none;
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<svg viewBox="0 0 600 552">
  <path d="M300,107.77C284.68,55.67,239.76,0,162.31,0,64.83,0,0,82.08,0,171.71c0,.48,0,.95,0,1.43-.52,19.5,0,217.94,299.87,379.69v0l0,0,.05,0,0,0,0,0v0C600,391.08,600.48,192.64,600,173.14c0-.48,0-.95,0-1.43C600,82.08,535.17,0,437.69,0,360.24,0,315.32,55.67,300,107.77" fill="#ee5282"/>
</svg>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.133.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.133.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.8.0.js"></script>
<script >
    
console.clear();

/* SETUP */
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  5000
);
camera.position.z = 500;

const renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio > 1 ? 2 : 1);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

/* CONTROLS */
const controlsWebGL = new THREE.OrbitControls(camera, renderer.domElement);

/* PARTICLES */
// Get the Path in the DOM
const path = document.querySelector(&quo.........完整代码请登录后点击上方下载按钮下载查看