three模拟三维水面下雨涟漪动画场景效果代码-html代码-BFW代码库

three模拟三维水面下雨涟漪动画场景效果代码

代码语言：html

所属分类：三维

代码描述：three模拟三维水面下雨涟漪动画场景效果代码

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

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

<head>

    <meta charset="UTF-8">



    <style>
        html {
          font-family: sans-serif;
        }
        
        * {
          box-sizing: border-box;
        }
        
        body {
          background-color: #faff06;
          font-family: sans-serif;
          overflow: hidden;
        }
        
        canvas {
          width: 100%;
          height: 100%;
        }
        
        .stats {
          opacity: 1;
          z-index: 10;
          position: absolute;
        }
        
        .dg.ac {
          position: absolute;
          z-index: 10 !important;
        }
    </style>


    <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.126.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) => {
          return ostart + (ostop - ostart) * ((value - istart) / (istop - istart));
        };
        
        const hexToRgbTreeJs = hex => {
          const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
        
          return result ? {
            r: parseInt(result[1], 16) / 255,
            g: parseInt(result[2], 16) / 255,
            b: parseInt(result[3], 16) / 255 } :
          null;
        };
        
        class App {
          setup() {
            this.stats = new Stats();
     .........完整代码请登录后点击上方下载按钮下载查看