three+gsap模拟深海三维粒子球交互动画穿梭效果代码-html代码-BFW代码库

three+gsap模拟深海三维粒子球交互动画穿梭效果代码

代码语言：html

所属分类：三维

代码描述：three+gsap模拟深海三维粒子球交互动画穿梭效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.min.css">


</head>
<body>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.9.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.128.js"></script>
<script  >
    // examples
// https://threejs.org/examples/?q=particle#webgl_points_billboards

let camera
let scene
let renderer
let material
let mouseX = 0
let mouseY = 0
let windowHalfX = window.innerWidth / 2
let windowHalfY = window.innerHeight / 2

init()
animate()

function init () {
  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 20000)
  camera.position.z = 500

  scene = new THREE.Scene()
  scene.fog = new THREE.FogExp2(0x000088, 0.001)

  const geometry = new THREE.BufferGeometry()
  const vertices = []
  const size = 2000
  
  for (let i = 0; i < 2000; i ++) {
    const x = (Math.random() * size + Math.random() * size) / 2 - size / 2
    const y = (Math.random() * size + Math.random() * size) / 2 - size / 2
    const z = (Math.random() * size + Math.random() * size) / 2 - size / 2

    vertices.push(x, y, z)
  }
  
  for (let j = 0; j < 100; j++) {
    const positionX = Math.random() * 3000 - 1500
    const positionY = Math.random() * 3000 - 1500
    const positionZ = Math.random() * 3000 - 1500
    const r = Math.random() * 300 + 50

    for (let i = 0; i < 20000; i++) {
      const radian1 = Math.PI / Math.........完整代码请登录后点击上方下载按钮下载查看