three+gsap实现长满毛发的毛毛球动画效果代码-html代码-BFW代码库

three+gsap实现长满毛发的毛毛球动画效果代码

代码语言：html

所属分类：动画

代码描述：three+gsap实现长满毛发的毛毛球动画效果代码

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

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

<head>

  <meta charset="UTF-8">

<style>
body {
  background: #000;
  overflow: hidden;
  margin: 0;
}
</style>



</head>

<body  >
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.126.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/simplex-noise.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.5.2.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/CustomEase3.js"></script>
      <script  >
console.clear();

let palette = [
new THREE.Color("#00ffff"),
new THREE.Color("#ff00ff"),
new THREE.Color("#ffff00"),
new THREE.Color("#ffffff")];


const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000);


const renderer = new THREE.WebGLRenderer({
  antialias: true });

renderer.setSize(window.innerWidth, window.innerHeight);
if (window.devicePixelRatio > 1.5) {
  renderer.setPixelRatio(2);
}
document.body.appendChild(renderer.domElement);

camera.position.x = 4;
camera.position.y = 0;
camera.position.z = 12;

const linesMaterial = new THREE.LineBasicMaterial({
  color: 0xffffff,
  transparent: true,
  opacity: 0.5,
  blending: THREE.AdditiveBlending,
  vertexColors: true });

const particlesMaterial = new THREE.LineBasicMaterial({
  color: 0xffffff,
  transparent: true,
  blending: THREE.AdditiveBlending,
  vertexColors: true });


const group = new THREE.Group();
scene.add(group);

let points = [];
const linesGeometry = new THREE.BufferGeometry();
const line = new THREE.LineSegments(linesGeometry, linesMaterial);
group.add(line);

class Particle {
  constructor() {
    this.center = new THREE.Vector3().
    random().
    subScalar(0.5).
    multiplyScalar(40);
    this.r = Math.random() * 1 + 0.1;
    this.theta = Math.random() * Math.PI;
    this.phi = Math.random() * Math.PI * 2;
    this.speed = Math.random() * 0.01 * (Math.random() > 0.5 ? 1 : -1);
    let x = this.center.x + this.r * Math.cos(this.theta) * Math.sin(this.phi);
    let y = this.center.y + this.r * Math.sin(this.theta) * Math.sin(this.phi);
    let z = this.center.z + this.r * Math.cos(this.phi);
    this.pos = new THREE.Vector3(x, y, z);
    x =
    this.center.x +
    this.r * Math.cos(this.theta - Math.PI) * Math.sin(this.phi);
    y =
    this.center.y +
    this.r * Math.sin(this.theta - Math.PI) * Math.sin(this.phi);
    z = this.center.z + this.r * Math.cos(this.phi);
    this.pos2 = new THREE.Vector3(x, y, z);
    this.color = palette[Math.floor(Math.random() * 4)];
    this.color2 = palette[Math.floor(Math.random() * 4)];
  }
  update() {
    this.theta += this.speed;
    this.phi += this.speed;
    let x = this.center.x + this.r * Math.cos(this.theta) * Math.sin(this.phi);
    let y = this.center.y + this.r * Math.sin(this.theta) * Math.sin(this.phi);
    let z = this.center.z + this.r * Math.cos(this.phi);
    this.pos = new THREE.Vector3(x, y, z);
    x =
    this.center.x +
    this.r * Math.cos(this.theta - Math.PI) * Math.sin(this.phi);
    y =
    this.center.y +
    this.r * Math.sin(this.theta - Math.PI) * Math.sin(this.phi);
    z = this.center.z + this.r * Math.cos(this.phi);
    this.pos2 = new THREE.Vector3(x, y, z);
  }}


const particles = [];
const particlesGeometry = new THREE.BufferGeometry();
let particlesPositions = [];
const particlesColors = [];
for (let i = 0; i < 3000; i++) {
  const p = new .........完整代码请登录后点击上方下载按钮下载查看