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();
            this.stats.showPanel(0);
            document.body.querySelector('.stats').appendChild(this.stats.domElement);
        
            this.gui = new dat.GUI();
            this.backgroundColor = '#faff06';
            this.gutter = { size: 0 };
            this.meshes = [];
            this.grid = { cols: 30, rows: 30 };
            this.width = window.innerWidth;
            this.height = window.innerHeight;
            this.velocity = -.1;
            this.angle = 0;
            this.waveLength = 200;
            this.ripple = {};
            this.interval = 0;
            this.waterDropPositions = [];
            this.ripples = [];
        
            const gui = this.gui.addFolder('Background');
        
            gui.addColor(this, 'backgroundColor').onChange(color => {
              document.body.style.backgroundColor = color;
            });
        
            window.addEventListener('resize', this.onResize.bind(this), { passive: true });
        
            window.addEventListener('visibilitychange', evt => {
              this.pause = evt.target.hidden;
            }, false);
          }
        
        
          createScene() {
            this.scene = new THREE.Scene();
        
            this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
            this.renderer.setSize(window.innerWidth, window.innerHeight);
        
            this.renderer.shadowMap.enabled = true;
            this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
        
            document.body.appendChild(this.renderer.domElement);
          }
        
          createCamera() {
            const width = window.innerWidth;
            const height = window.innerHeight;
        
            this.camera = new THREE.PerspectiveCamera(10, width / height, 1, 1000);
            this.camera.position.set(-180, 180, 180);
        
            this.scene.add(this.camera);
          }
        
          addAmbientLight() {
            const obj = { color: '#fff' };
            const light = new THREE.AmbientLight(obj.color, 1);
        
            this.scene.add(light);
          }
        
          addDirectionalLight() {
            this.directionalLight = new THREE.DirectionalLight(0xffffff, 1).........完整代码请登录后点击上方下载按钮下载查看