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

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

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