threejs实现三维彩色噪点粉尘粒子线动画效果代码-html代码-BFW代码库

threejs实现三维彩色噪点粉尘粒子线动画效果代码

代码语言：html

所属分类：三维

代码描述：threejs实现三维彩色噪点粉尘粒子线动画效果代码

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

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

<head>

    <meta charset="UTF-8">




    <style>
        body {
          margin: 0px;
          width:100%;
          height:100%;
          background-color: #292629;
        }
        
        #container {
          position: relative;
          width: 100vw;
          height: 100vh;
          overflow: hidden;
          background-color: #292629;
          z-index:0;
        }
        
        #container canvas {
          position:absolute;
          z-index:5
        
        }
        
        #color {
          width:100%;
          height:100%;
          position:absolute;
          top:0px;
          left:0px;
          overflow: hidden;
          mix-blend-mode: multiply;
          z-index:-2;
          opacity:1;
          background: linear-gradient(135deg, #fbc3a1 14%,#f6f3a0 27%,#a1ddfb 41%,#b6a0f2 57%,#f39fd6 71%,#fbc3a1 87%);
          pointer-events:none;
          background-size:400% 400%;
          -webkit-animation: movement 10s ease-out infinite;
        	-moz-animation: movement 10s ease-out infinite;
        	animation: movement 10s ease-out infinite;
        }
        
        @-webkit-keyframes movement {
        	0% {
        		background-position: 0% 50%
        	}
        	50% {
        		background-position: 100% 50%
        	}
        	100% {
        		background-position: 0% 50%
        	}
        }
        
        @-moz-keyframes movement {
        	0% {
        		background-position: 0% 50%
        	}
        	50% {
        		background-position: 100% 50%
        	}
        	100% {
        		background-position: 0% 50%
        	}
        }
        
        @keyframes movement {
        	0% {
        		background-position: 0% 50%
        	}
        	50% {
        		background-position: 100% 50%
        	}
        	100% {
        		background-position: 0% 50%
        	}
        }
        
        #statsCon {
          position: absolute;
          width: 80px;
          height: 46px;
          right: 0px;
          top: 0px;
          z-index: 10000000;
        }
    </style>


</head>


<body onload="init()">
    <div id="statsCon"></div>
    <div id="container">
        <div id="color"></div>
    </div>


    <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/three.123.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Stats-16.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/EffectComposer.123.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/RenderPass.110.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/AfterimagePass.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/ShaderPass.123.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/CopyShader.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/AfterimageShader.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.126.js"></script>
    <script>
        function init() {
          var stats = new Stats();
          document.getElementById("statsCon").appendChild(stats.domElement);
          const simplex = new SimplexNoise();
        
          let camera = new THREE.PerspectiveCamera(
          40,
          window.innerWidth / window.innerHeight,
          1,
          10000);
        
          let scene = new THREE.Scene();
        
          let.........完整代码请登录后点击上方下载按钮下载查看