master

分支 (1)

管理

管理

master

verge3d-code-examples
/
webgl_water_flowmap.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Verge3D - water flow map</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link type="text/css" rel="stylesheet" href="main.css">
  </head>
  <body>

    <div id="container"></div>
    <div id="info">
      <a href="https://www.soft8soft.com/verge3d" target="_blank" rel="noopener noreferrer">Verge3D</a> - water flow map
    </div>

    <script type="module">

      import * as v3d from '../build/v3d.module.js';

      import { GUI } from './jsm/libs/dat.gui.module.js';
      import { OrbitControls } from './jsm/controls/OrbitControls.js';
      import { Water } from './jsm/objects/Water2.js';

      let scene, camera, renderer, water;

      init();
      animate();

      function init() {

        // scene

        scene = new v3d.Scene();

        // camera

        camera = new v3d.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200);
        camera.position.set(0, 25, 0);
        camera.lookAt(scene.position);

        // ground

        const groundGeometry = new v3d.PlaneBufferGeometry(20, 20, 10, 10);
        const groundMaterial = new v3d.MeshBasicMaterial({ color: 0xcccccc });
        const ground = new v3d.Mesh(groundGeometry, groundMaterial);
        ground.rotation.x = Math.PI * - 0.5;
        scene.add(ground);

        const textureLoader = new v3d.TextureLoader();
        textureLoader.load('textures/floors/FloorsCheckerboard_S_Diffuse.jpg', function(map) {

          map.wrapS = v3d.RepeatWrapping;
          map.wrapT = v3d.RepeatWrapping;
          map.anisotropy = 16;
          map.repeat.set(4, 4);
          groundMaterial.map = map;
          groundMaterial.needsUpdate = true;

        });

        // water

        const waterGeometry = new v3d.PlaneBufferGeometry(20, 20);
        const flowMap = textureLoader.load('textures/water/Water_1_M_Flow.jpg');

        water = new Water(waterGeometry, {
          scale: 2,
          textureWidth: 1024,
          textureHeight: 1024,
          flowMap: flowMap
        });

        water.position.y = 1;
        water.rotation.x = Math.PI * - 0.5;
        scene.add(water);

        // flow map helper

        const helperGeometry = new v3d.PlaneBufferGeometry(20, 20);
        const helperMaterial = new v3d.MeshBasicMaterial({ map: flowMap });
        const helper = new v3d.Mesh(helperGeometry, helperMaterial);
        helper.position.y = 1.01;
        helper.rotation.x = Math.PI * - 0.5;
        helper.visible = false;
        scene.add(helper);

        // renderer

        renderer = new v3d.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setPixelRatio(window.devicePixelRatio);
        document.body.appendChild(renderer.domElement);

        //

        const gui = new GUI();
        gui.add(helper, 'visible').name('Show Flow Map');
        gui.open();

        //

        const controls = new OrbitControls(camera, renderer.domElement);
        controls.minDistance = 5;
        controls.maxDistance = 50;

        //

        window.addEventListener('resize', onResize, false);

      }

      function onResize() {

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);

      }

      function animate() {

        requestAnimationFrame(animate);

        render();

      }

      function render() {

        renderer.render(scene, camera);

      }

    </script>

</body>
</html>