master

分支 (1)

管理

管理

master

verge3d-code-examples
/
webgl_instancing_dynamic.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Verge3D webgl - instancing - 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">
  </head>
  <body>

    <script type="module">

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

      import Stats from './jsm/libs/stats.module.js';
      import { GUI } from './jsm/libs/dat.gui.module.js';

      let camera, scene, renderer, stats;

      let mesh;
      const amount = parseInt(window.location.search.substr(1)) || 10;
      const count = Math.pow(amount, 3);
      const dummy = new v3d.Object3D();

      init();
      animate();

      function init() {

        camera = new v3d.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 100);
        camera.position.set(amount * 0.9, amount * 0.9, amount * 0.9);
        camera.lookAt(0, 0, 0);

        scene = new v3d.Scene();

        const loader = new v3d.BufferGeometryLoader();
        loader.load('models/json/suzanne_buffergeometry.json', function(geometry) {

          geometry.computeVertexNormals();
          geometry.scale(0.5, 0.5, 0.5);

          const material = new v3d.MeshNormalMaterial();
          // check overdraw
          // let material = new v3d.MeshBasicMaterial({ color: 0xff0000, opacity: 0.1, transparent: true });

          mesh = new v3d.InstancedMesh(geometry, material, count);
          mesh.instanceMatrix.setUsage(v3d.DynamicDrawUsage); // will be updated every frame
          scene.add(mesh);

          //

          const gui = new GUI();
          gui.add(mesh, 'count', 0, count);

        });

        //

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

        //

        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);

      }

      //

      function animate() {

        requestAnimationFrame(animate);

        render();

        stats.update();

      }

      function render() {

        if (mesh) {

          const time = Date.now() * 0.001;

          mesh.rotation.x = Math.sin(time / 4);
          mesh.rotation.y = Math.sin(time / 2);

          let i = 0;
          const offset = (amount - 1) / 2;

          for (let x = 0; x < amount; x ++) {

            for (let y = 0; y < amount; y ++) {

              for (let z = 0; z < amount; z ++) {

                dummy.position.set(offset - x, offset - y, offset - z);
                dummy.rotation.y = (Math.sin(x / 4 + time) + Math.sin(y / 4 + time) + Math.sin(z / 4 + time));
                dummy.rotation.z = dummy.rotation.y * 2;

                dummy.updateMatrix();

                mesh.setMatrixAt(i++, dummy.matrix);

              }

            }

          }

          mesh.instanceMatrix.needsUpdate = true;

        }

        renderer.render(scene, camera);

      }

    </script>

  </body>
</html>