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();
            th.........完整代码请登录后点击上方下载按钮下载查看