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

代码语言:html

所属分类:动画

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

代码标签: 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,
        .........完整代码请登录后点击上方下载按钮下载查看

网友评论0