three实现三维多彩管子扭动动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：three实现三维多彩管子扭动动画效果代码

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

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

<head>

    <meta charset="UTF-8">


    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat'>

    <style>
        html, body {
          margin: 0;
          padding: 0;
          width: 100%;
          height: 100%;
          color: #fff;
          font-family: 'Montserrat', sans-serif;
          text-shadow: 1px 1px 1px #000;
        }
        
        canvas {
          position: fixed;
          z-index: -1;
          width: 100%;
          height: 100%;
        }
        
        header {
          position: absolute;
          width: 100%;
          text-align: center;
        }
        
        header h1 {
          font-size: 2rem;
          margin: 0.5em 0 0.2em;
        }
        
        a {
          font-size: 0.9rem;
          color: #bbb;
          text-decoration: none;
          border-bottom: 0.15rem solid transparent;
          transition: all 0.4s;
        }
        a:hover {
          color: #fff;
          border-bottom-color: rgba(255, 255, 255, 0.7);
        }
    </style>




</head>

<body>
    <header>
        <h1>Strange Tubes #2</h1>
        <a href="" target="_blank">ThreeJS Collection</a>
    </header>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.108.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/simplex-noise.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/chroma.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.min.js"></script>
    <script >
        const simplex = new SimplexNoise();
        
        function App(conf) {
          conf = {
            fov: 75,
            cameraZ: 150,
            background: 0x000000,
            tubeRadius: 3,
            resY: 10,
            resX: 4,
            noiseCoef: 50,
            timeCoef: 50,
            mouseCoef: 50,
            heightCoef: 20,
            ambientColor: 0xcccccc,
            lightIntensity: 1,
            light1Color: 0x24f59e,
            light2Color: 0xe15040,
            light3Color: 0x1b859e,
            light4Color: 0x4cb04b,
            ...conf };
        
        
          let renderer, scene, camera, cameraCtrl;
          let width, height, cx, cy, wWidth, wHeight;
          const TMath = THREE.Math;
        
          let light1, light2, light3, light4;
          let objects,noiseConf = {};
          let cscale;updateCScale(chroma('#d11f6c'));
        
          const mouse = new THREE.Vector2();
        
          init();
        
          function init() {
            renderer = new THREE.WebGLRenderer({ antialias: true });
            document.body.appendChild(renderer.domElement);
            camera = new THREE.PerspectiveCamera(conf.fov);
            camera.position.z = conf.cameraZ;
            cameraCtrl = new THREE.OrbitControls(camera);
        
            updateSize();
            window.addEventListener('resize', updateSize, false);
        
            document.addEventListener('mousemove', e => {
              mouse.x = e.clientX / width * 2 - 1;
              mouse.y = -(e.clientY / height) * 2 + 1;
            });
        
            initScene();
            initGui();
            animate();
          }
        
          function initGui() {
            // noiseInput.value = 101 - conf.xyCoef;
            // heightInput.value = (conf.zCoef * 100) / 25;
        
            // noiseInput.addEventListener('input', e => {
            //   conf.noiseCoef = 101 - noiseInput.value;
            // });
            // heightInput.addEventListener('input', e => {
            //   conf.zCoef = (heightInput.value * 25) / 100;
            // });
        
            document.body.addEventListener('click', e => {
              updateColors();
            });
          }
        
          function initScene() {
            scene = new THREE.Scene();
            if (conf.background) scene.background = new THREE.Color(conf.background);
            initLights();
            initObjects();
        
            camera.position.z = 130;
          }
        
          function initLights() {
            scene.add(new THREE.AmbientLight(conf.ambientColor));
        
            const z = 50;
            const lightDistance = 500;
            light1 = new THREE.PointLight(conf.light1Color, conf.lightIntensity, lightDistance);
            light1.position.set(0, wHeight / 2, z);
            scene.add(light1);
            light2 = new THREE.PointLight(conf.light2Color, conf.lightIntensity, lightDistance);
            light2.position.set(0, -wHeight / 2, z);
            scene.add(light2);
            light3 = new THREE.PointLight(conf.light3Color, conf.lightIntensity, lightDistance);
            light3.position.set(wWidth / 2, 0, z);
            scene.add(light3);
            light4 = new THREE.PointLight(conf.light4Color, conf.lightIntensity, lightDistance);
            light4.position.set(-wWidth / 2, 0, z);
            scene.add(light4);
          }
        
          function initObjects() {
            updateNoise();
            const nx = Math.round(wWidth / conf.resX) + 1;
            const ny = Math.round(wHeight / conf.resY) + 1;
            objects = [];
            let tube, color;
            for (let j = 0; j < ny; j++) {
              // color = cscale(j/ny).hex();
              color = cscale(TMath.randFloat(0, 1)).hex();
              // color = chroma.random().hex();
              tube = new Tube(-wWidth / 2, -wHeight / 2 + j * conf.resY, wWidth, nx, conf.tubeRadius, color, noiseConf);
              objects.push(tube);
              scene.add(tube.mesh);
            }
          }
        
          function updateNoise() {
            noiseConf.coef = conf.noiseCoef * 0.00012;
            noiseConf.height = conf.heightCoef;
            noiseConf.time = Date.now() * conf.timeCoef * 0.000002;
            noiseConf.mouseX = mouse.x / 2;
            noiseConf.mouseY = mouse.y / 2;
            noiseConf.mouse = mouse.x + mouse.y;
          }
        
          function updateColors() {
            const color = chroma.random();
            updateCScale(color);
            for (let i = 0; i < objects.length; i++) {
              objects[i].material.color = new THREE.Color(cscale(TMat.........完整代码请登录后点击上方下载按钮下载查看