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

代码语言：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 renderer = new THREE.WebGLRenderer({ alpha: true });
          renderer.setClearColor("rgb(255,255,255)", 0);
          renderer.setSize(window.innerWidth, window.innerHeight);
          renderer.setPixelRatio(window.devicePixelRatio);
          document.getElementById("container").appendChild(renderer.domElement);
        
          let composer = new THREE.EffectComposer(renderer);
          composer.addPass(new THREE.RenderPass(scene, camera));
          let afterimagePass = new THREE.AfterimagePass();
          composer.addPass(afterimagePass);
          afterimagePass.uniforms["damp"].value = 0.6;
        
          renderer.render(scene, camera);
        
          const controls = new THREE.OrbitControls(camera, renderer.domElement);
          controls.minDistance = 1;
          controls.maxDistance = 1000;
          camera.position.set(0, 0, 900);
          camera.lookAt(new THREE.Vector3(0, 0, 0));
          controls.target = new THREE.Vector3(0, 0, 0);
          controls.enableDamping = true;
          controls.dampingFactor = 0.1;
          controls.autoRotate = true;
          controls.autoRotateSpeed = 2.5;
          controls.update();
        
          const STEP = 1;
          const FREQUENCY = 0.0015;
          const AMPLITUDE = 5;
          let xyz = 0;
          const simplexA = new SimplexNoise();
          const simplexB = new SimplexNoise();
          const maxDecay = 1000;
          const gridSize = 500;
          const speed = 2;
          const particleCount = 50000;
        
          const positions = [];
          const colors = [];
          const sizes = [];
        
          let particles = new THREE.BufferGeometry();
          let aP = [];
          for (var p = 0; p < particleCount; p++) {
            let pX = Math.random() * gridSize - gridSize / 2;
            let pY = Math.random() * gridSize - gridSize / 2;
            let pZ = Math.random() * gridSize - gridSize / 2;
            let newSize = Math.floor(Math.random() * 15 + 25);.........完整代码请登录后点击上方下载按钮下载查看