master

分支 (1)

管理

管理

master

verge3d-code-examples
/
webgl_geometry_dynamic.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Verge3D webgl - geometry - dynamic</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">
    <style>
      body {
        color: #666;
      }
    </style>
  </head>
  <body>

    <div id="info">
      <a href="https://www.soft8soft.com/verge3d" target="_blank" rel="noopener">Verge3D</a> - dynamic geometry<br />
      left click: forward, right click: backward
    </div>

    <script type="module">

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

      import Stats from './jsm/libs/stats.module.js';

      import { FirstPersonControls } from './jsm/controls/FirstPersonControls.js';

      let camera, controls, scene, renderer, stats;

      let mesh, geometry, material, clock;

      const worldWidth = 128, worldDepth = 128;

      init();
      animate();

      function init() {

        camera = new v3d.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 20000);
        camera.position.y = 200;

        clock = new v3d.Clock();

        scene = new v3d.Scene();
        scene.background = new v3d.Color(0xaaccff);
        scene.fog = new v3d.FogExp2(0xaaccff, 0.0007);

        geometry = new v3d.PlaneBufferGeometry(20000, 20000, worldWidth - 1, worldDepth - 1);
        geometry.rotateX(- Math.PI / 2);

        const position = geometry.attributes.position;
        position.usage = v3d.DynamicDrawUsage;

        for (let i = 0; i < position.count; i++) {

          const y = 35 * Math.sin(i / 2);
          position.setY(i, y);

        }

        const texture = new v3d.TextureLoader().load('textures/water.jpg');
        texture.wrapS = texture.wrapT = v3d.RepeatWrapping;
        texture.repeat.set(5, 5);

        material = new v3d.MeshBasicMaterial({ color: 0x0044ff, map: texture });

        mesh = new v3d.Mesh(geometry, material);
        scene.add(mesh);

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

        controls = new FirstPersonControls(camera, renderer.domElement);

        controls.movementSpeed = 500;
        controls.lookSpeed = 0.1;

        stats = new Stats();
        document.body.appendChild(stats.dom);

        //

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

      }

      function onWindowResize() {

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

        renderer.setSize(window.innerWidth, window.innerHeight);

        controls.handleResize();

      }

      //

      function animate() {

        requestAnimationFrame(animate);

        render();
        stats.update();

      }

      function render() {

        const delta = clock.getDelta();
        const time = clock.getElapsedTime() * 10;

        const position = geometry.attributes.position;

        for (let i = 0; i < position.count; i++) {

          const y = 35 * Math.sin(i / 5 + (time + i) / 7);
          position.setY(i, y);

        }

        position.needsUpdate = true;

        controls.update(delta);
        renderer.render(scene, camera);

      }

    </script>

  </body>
</html>