three实现铁球滚动平面凹陷动画效果代码

代码语言:html

所属分类:三维

代码描述:three实现铁球滚动平面凹陷动画效果代码,可设置参数。

代码标签: three 铁球 滚动 平面 凹陷

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

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

<head>

    <meta charset="UTF-8">




    <style>
        html {
          font-family: sans-serif;
          -ms-text-size-adjust: 100%;
          -webkit-text-size-adjust: 100%;
        }
        
        * {
          box-sizing: border-box;
        }
        
        body {
          background-color: #0dea8d;
          font-family: sans-serif;
          overflow: hidden;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
        
        canvas {
          width: 100%;
          height: 100%;
        }
        
        .stats {
          opacity: 1;
          z-index: 10;
          position: absolute;
        }
        
        .dg.ac {
          position: absolute;
          z-index: 10 !important;
        }
    </style>

    <link href="https://fonts.googleapis.com/css?family=Ropa+Sans&display=swap" rel="stylesheet">

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Stats-16.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/OrbitControls.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.2/dat.gui.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>


</head>

<body>

    <main>
        <div class="stats"></div>
    </main>



    <script>
        const radians = degrees => {
          return degrees * Math.PI / 180;
        };
        
        const distance = (x1, y1, x2, y2) => {
          return Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2));
        };
        
        const map = (value, istart, istop, ostart, ostop) => .........完整代码请登录后点击上方下载按钮下载查看

网友评论0