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

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

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