three+gsap实现彩色线条菜单旋转发散动画效果代码-html代码-BFW代码库

three+gsap实现彩色线条菜单旋转发散动画效果代码

代码语言：html

所属分类：动画

代码描述：three+gsap实现彩色线条菜单旋转发散动画效果代码

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

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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.container {
  width: 100%;
  height: 100%;
  background-color: black;
}
</style>



</head>

<body >
  <div class="container" id="webgl"></div>
  

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.126.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/THREE.MeshLine.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/MotionPathPlugin.js"></script>
      <script>
"use strict";
console.clear();
class Stage {
    constructor(mount) {
        this.container = mount;
        this.lines = [];
        this.scene = new THREE.Scene();
        this.scene.background = new THREE.Color('black');
        this.tickFunctions = [];
        this.size = {
            width: 1,
            height: 1
        };
        this.setupCamera();
        this.setupRenderer();
        this.onResize();
        window.addEventListener('resize', () => this.onResize());
        this.tick();
    }
    setupCamera() {
        this.lookAt = new THREE.Vector3(0, 0, 0);
        this.camera = new THREE.PerspectiveCamera(40, this.size.width / this.size.height, 0.1, 150);
        this.camera.position.set(0, 80, 100);
        this.camera.home = {
            position: Object.assign({}, this.camera.position)
        };
        this.add(this.camera);
    }
    setupRenderer() {
        this.renderer = new THREE.WebGLRenderer({
            canvas: this.canvas,
            antialias: true,
        });
        this.container.appendChild(this.renderer.domElement);
    }
    onResize() {
        this.size.width = this.container.clientWidth;
        this.size.height = this.container.clientHeight;
        this.camera.aspect = this.size.width / this.size.height;
        this.camera.updateProjectionMatrix();
        this.renderer.setSize(this.size.width, this.size.height);
        this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    }
    addTickFunction(tickFunction) {
        this.tickFunctions.push(tickFunction);
    }
    tick() {
        this.camera.lookAt(this.lookAt);
        this.tickFunctions.forEach(func => func());
        this.renderer.render(this.scene, this.camera);
        window.requestAnimationFrame(() => this.tick());
    }
    add(element) { this.scene.add(element); }
    destroy() {
        this.container.removeChild(this.renderer.domElement);
        window.removeEventListener('resize', this.onResize);
    }
}
class Line {
    constructor(width, color, radius, near, far) {
        this.color = color;
        this.width = width;
        this.radius = radius;
        this.near = near;
        this.far = far;
        this.dashLength = 5;
        this.travelDistance = 1;
        this.mesh = null;
        this.createLine();
    }
    createLine() {
        const points = [];
        var angle = Math.random() * TAU;
        this.radius += Math.random() * 0.1;
        let pos = {
            x: Math.cos(angle) * this.radius,
       .........完整代码请登录后点击上方下载按钮下载查看