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

代码语言：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);
            this.directionalLight.castShadow = true;
            this.directionalLight.position.set(0, 1, 0);
        
            this.directionalLight.shadow.camera.far = 1000;
            this.directionalLight.shadow.camera.near = -100;
        
            this.directionalLight.shadow.camera.left = -40;
            this.directionalLight.shadow.camera.right = 40;
            this.directionalLight.shadow.camera.top = 20;
            this.directionalLight.shadow.camera.bottom = -20;
            this.directionalLight.shadow.camera.zoom = 1;
            this.directionalLight.shadow.camera.needsUpdate = true;
        
            const targetObject = new THREE.Object3D();
            targetObject.position.set(-50, -82, 40);
            this.directionalLight.target = targetObject;
        
            this.scene.add(this.directionalLight);
            this.scene.add(this.directionalLight.target);
          }
        
          createGrid() {
            this.groupMesh = new THREE.Object3D();
        
            const meshParams = {
              color: '#00229a' };
        
        
            const material = new THREE.MeshLambertMaterial(meshParams);
        
            const gui = this.gui.addFolder('Water');
        
            gui.addColor(meshParams, 'color').onChange(color => {
              material.color = hexToRgbTreeJs(color);
            });
        
            const geometry = new THREE.BoxBufferGeometry(1, 1, 1);
            this.mesh = this.getMesh(geometry, material, this.grid.rows * this.grid.cols);
            this.scene.add(this.mesh);
        
            this.centerX = (this.grid.cols + this.grid.cols * this.gutter.size) * .4;
            this.centerZ = (this.grid.rows + this.grid.rows * this.gutter.size) * .6;
        
            let ii = 0;
            for (let row = 0; row < this.grid.rows; row++) {
              this.meshes[row] = [];
        
              for (let col = 0; col < this.grid.cols; col++) {
                const pivot = new THREE.Object3D();
                const x = col + col * this.gutter.size;
                const z = row + row * this.gutter.size;
        
                pivot.scale.set(1, 1, 1);
                pivot.position.set(x - this.centerX, 0, z - this.centerZ);
        
                this.meshes[r.........完整代码请登录后点击上方下载按钮下载查看