master

分支 (1)

管理

管理

master

verge3d-code-examples
/
webgl_water.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Verge3D - water</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
    </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, clock, renderer, water;

      let torusKnot;

      const params = {
        color: '#ffffff',
        scale: 4,
        flowX: 1,
        flowY: 1
      };

      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(- 15, 7, 15);
        camera.lookAt(scene.position);

        // clock

        clock = new v3d.Clock();

        // mesh

        const torusKnotGeometry = new v3d.TorusKnotBufferGeometry(3, 1, 256, 32);
        const torusKnotMaterial = new v3d.MeshNormalMaterial();

        torusKnot = new v3d.Mesh(torusKnotGeometry, torusKnotMaterial);
        torusKnot.position.y = 4;
        torusKnot.scale.set(0.5, 0.5, 0.5);
        scene.add(torusKnot);

        // ground

        const groundGeometry = new v3d.PlaneBufferGeometry(20, 20);
        const groundMaterial = new v3d.MeshStandardMaterial({ roughness: 0.8, metalness: 0.4 });
        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/hardwood2_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);

        water = new Water(waterGeometry, {
          color: params.color,
          scale: params.scale,
          flowDirection: new v3d.Vector2(params.flowX, params.flowY),
          textureWidth: 1024,
          textureHeight: 1024
        });

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

        // skybox

        const cubeTextureLoader = new v3d.CubeTextureLoader();
        cubeTextureLoader.setPath('textures/cube/Park2/');

        const cubeTexture = cubeTextureLoader.load([
          "posx.jpg", "negx.jpg",
          "posy.jpg", "negy.jpg",
          "posz.jpg", "negz.jpg"
        ]);

        scene.background = cubeTexture;

        // light

        const ambientLight = new v3d.AmbientLight(0xcccccc, 0.4);
        scene.add(ambientLight);

        const directionalLight = new v3d.DirectionalLight(0xffffff, 0.6);
        directionalLight.position.set(- 1, 1, 1);
        scene.add(directionalLight);

        // renderer

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

        // dat.gui

        const gui = new GUI();

        gui.addColor(params, 'color').onChange(function(value) {

          water.material.uniforms['color'].value.set(value);

        });
        gui.add(params, 'scale', 1, 10).onChange(function(value) {

          water.material.uniforms['config'].value.w = value;

        });
        gui.add(params, 'flowX', - 1, 1).step(0.01).onChange(function(value) {

          water.material.uniforms['flowDirection'].value.x = value;
          water.material.uniforms['flowDirection'].value.normalize();

        });
        gui.add(params, 'flowY', - 1, 1).step(0.01).onChange(function(value) {

          water.material.uniforms['flowDirection'].value.y = value;
          water.material.uniforms['flowDirection'].value.normalize();

        });

        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() {

        const delta = clock.getDelta();

        torusKnot.rotation.x += delta;
        torusKnot.rotation.y += delta * 0.5;

        renderer.render(scene, camera);

      }

    </script>

</body>
</html>