threejs实现一个能量块散发能量线束动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：threejs实现一个能量块散发能量线束动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        html,
    body {
      height: 100%;
      width: 100%;
    }
    body {
      font-size: 62.5%;
      background: #fff;
      overflow: hidden;
      color: #fff;
      font-family: serif;
      -ms-scroll-chaining: none;
          overscroll-behavior: none;
    }
    #loading {
      background: #000;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 9999;
      display: flex;
      justify-content: center;
      align-items: center;
      visibility: visible;
      opacity: 1;
      transition: visibility 1.6s, opacity 1.6s;
    }
    #loading .circle {
      width: 50px;
      height: 50px;
      background: #fff;
      border-radius: 50%;
      opacity: 0;
      transform: scale(0, 0);
      -webkit-animation: circle-animation 1.6s ease-in-out 0s infinite normal none;
              animation: circle-animation 1.6s ease-in-out 0s infinite normal none;
    }
    #loading.loaded {
      visibility: hidden;
      opacity: 0;
    }
    #container {
      width: 100%;
      height: 100%;
    }
    #container .box {
      color: #fff;
      font-size: 3.2rem;
      position: fixed;
      z-index: 1;
      top: 50%;
      left: 10%;
      transform: translateY(-50%);
      overflow: hidden;
    }
    #container .box h1 {
      letter-spacing: 0.4rem;
      padding-bottom: 0.8rem;
    }
    #container .box h1::after {
      content: '';
      position: absolute;
      height: 4px;
      width: 100%;
      background: #fff;
      bottom: 0.8rem;
      left: 0;
    }
    #container .box p {
      font-size: 0.8rem;
    }
    #container .box .expansion {
      font-size: 6.4rem;
    }
    /** css animation */
    @-webkit-keyframes circle-animation {
      0% {
        opacity: 0;
        transform: scale(0, 0);
      }
      50% {
        opacity: 1;
        transform: scale(1, 1);
      }
    }
    @keyframes circle-animation {
      0% {
        opacity: 0;
        transform: scale(0, 0);
      }
      50% {
        opacity: 1;
        transform: scale(1, 1);
      }
    }
    </style>
</head>

<body>
    <div id="loading">
        <div class="circle"></div>
    </div>
    <div id="container">
        <div class="box">
        </div>
    </div>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Stats-16.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.126.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.126.js"></script>
    <script>
        // vertex shader source
        const vertexParticleShader = `
        uniform float uTime;
        uniform float uAmplitude;
        
        varying vec3 vPos;
        
        float PI = 3.14159265359;
        
        attribute float number;
        
        float a = 5.0;
        float b = 3.14159265359 / 3.0;
        float c = 7.0;
        float d = 3.14159265359 / 5.0;
        
        void main(){
          vec3 pos = position.xyz;
          
          pos.x = cos(a * number + b + uTime) * uAmplitude;
          pos.y = cos(c * number + d + uTime) * uAmplitude;
          pos.z = tan(number + uTime) * uAmplitude;
          
          vPos = pos;
          
          vec4 mvPosition = modelViewMatrix * vec4(pos, 1.0);
          
          gl_Position = projectionMatrix * mvPosition;
        }
        
        `;
        
        // fragment shader source
        const fragmentParticleShader = `
        uniform float uTime;
        
        varying vec3 vPos;
        
        vec3 pal( in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d ) {
          return a + b*cos( 6.28318*(c*t+d) );
        }
        
        void main () {
          float len = length(vPos);
          
          vec3 color =
            pal(
              length(len * 0.001 - uTime * 0.5),
              vec3(0.5,0.5,0.5),vec3(0.5,0.5,0.5),vec3(2.0,1.0,0.0),vec3(0.5,0.20,0.25)
            );
          
          gl_FragColor = vec4(color, 0.4);
        }
        `;
        
        const vertexBoxShader = `
        uniform float uTime;
        uniform float uAmplitude;
        
        varying vec3 vPos;
        
        float PI = 3.14159265359;
        
        attribute float number;
        
        float a = 5.0;
        float b = 3.14159265359 / 3.0;
        float c = 7.0;
        float d = 3.14159265359 / 5.0;
        
        void main(){
          vec3 pos = position.xyz;
          
          vPos = pos;
          
          vec4 mvPosition = modelViewMatrix * vec4(pos, 1.0);
          
          //gl_PointSize = 60.0 * (120.0 / - mvPosition.z);
          gl_Position = projectionMatrix * mvPosition;
        }
        `;
        
        const fragmentBoxShader = `
        uniform float uTime;
        
        varying vec3 vPos;
        
        // Referred to https://iquilezles.org/www/articles/palettes/palettes.htm
        // Thank you so much.
        vec3 pal( in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d ) {
          return a + b*cos( 6.28318*(c*t+d) );
        }
        
        void main () {
          //float f = length(gl_PointCoord - vec2(0.5, 0.5));
          //if (f > 0.1) discard;
          
          float len = length(vPos);
          
          vec3 color =
            pal(
              length(len * 0.01 - uTime * 0.5),
              vec3(0.5,0.5,0.5),vec3(0.5,0.5,0.5),vec3(2.0,1.0,0.0),vec3(0.5,0.20,0.25)
            );
          
          gl_FragColor = vec4(color, 0.4);
        }
        `;
        
        /**
         * Dat class
         */
        class Dat {
          constructor(sketch) {
            this.sketch = sketch;
          
            this.initialize();
          }
          
          initialize() {
            this.gui = new dat.GUI();
            this.parameters = this.setParameters();
            this.controller = this.setController();
            this.gui.close();
          }
          
          setParameters() {
            let parameters;
          
            parameters = {
              number: 1000,
              amplitude: 100.0
            };
        
            return parameters;
          }
          
          setController() {
            let controller;
          
            controller = {
              number: this.gui.add(this.parameters, 'number', 100, 50000, 100)
                .onChange(() => this.sketch.initialize()),
              amplitude: this.gui.add(this.parameters, 'amplitude', 0.0, 1000.0, 1.0)
                .onChange(() => this.sketch.initialize())
            };
        
            return controller;
          }
        }
        
        /**
         * Mouse class
         */
        class Mouse {
          constructor(sketch) {
            this.sketch = sketch;
        
            this.initialize();
          }
          
          initialize() {
            this.mouse = new THREE.Vector3();
            this.touchStart = new THREE.Vector3();
            this.touchMove = new THREE.Vector3();
            this.touchEnd = new THREE.Vector3();
            
            this.delta = 1;
            
            this.setupEvents();
          }
          
          setupEvents() {
            this.sketch.renderer.domElement.addEventListener('mousemove', this.onMousemove.bind(this), false);
            this.sketch.renderer.domElement.addEventListener('touchstart', this.onTouchstart.bind(this), false);
            this.sketch.renderer.domElement.addEventListener('touchmove', this.onTouchmove.bind(this), false);
            this.sketch.renderer.domElement.addEventListener('touchend', this.onTouchend.bind(this), false);
            this.sketch.renderer.domElement.addEventListener('onWheel', this.onWheel.bind(this), false);
          }
          
          onMousemove(e) {
            this.mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
            this.mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
            this.mouse.z = 0;
          }
          
          onTouchstart(e) {
            const touch = e.targetTouches[0];
          
            this.touchStart.x = touch.pageX;
            this.touchStart.y = touch.pageY;
            this.touchStart.z = 0.0;
        
            this.mouse.x = (touch.pageX / window.innerWidth) * 2 - 1;
            this.mouse.y = -(touch.pageY / window.innerHeight) * 2 + 1;
            this.mouse.z = 0;
          }
          
          onTouchmove(e) {
            const touch = e.targetTouches[0];
        
            this.touchMove.x = touch.pageX;
            this.touchMove.y = touch.pageY;
            this.touchMove.z = 0.0;
        
            this.touchEnd.x = this.touchStart.x - this.touchMove.x;
            this.touchEnd.y = this.touchStart.y - this.touchMove.y;
            this.touchEnd.z = 0.0;
        
            this.mouse.x = (touch.pageX / window.innerWidth) * 2 - 1;
            this.mouse.y = -(touch.pageY / window.innerHeight) * 2 + 1;
            this.mouse.z = 0;
.........完整代码请登录后点击上方下载按钮下载查看