master

分支 (1)

管理

管理

master

verge3d-code-examples
/
webgl_lod.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Verge3D webgl - level of detail</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="info">
      <a href="https://www.soft8soft.com/verge3d" target="_blank" rel="noopener">Verge3D</a> - level of detail
    </div>

    <script type="module">

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

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

      let container;

      let camera, scene, renderer, controls;

      const clock = new v3d.Clock();

      init();
      animate();

      function init() {

        container = document.createElement('div');
        document.body.appendChild(container);

        camera = new v3d.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 15000);
        camera.position.z = 1000;

        scene = new v3d.Scene();
        scene.fog = new v3d.Fog(0x000000, 1, 15000);

        const pointLight = new v3d.PointLight(0xff2200);
        pointLight.position.set(0, 0, 0);
        scene.add(pointLight);

        const dirLight = new v3d.DirectionalLight(0xffffff);
        dirLight.position.set(0, 0, 1).normalize();
        scene.add(dirLight);

        const geometry = [

          [new v3d.IcosahedronBufferGeometry(100, 16), 50],
          [new v3d.IcosahedronBufferGeometry(100, 8), 300],
          [new v3d.IcosahedronBufferGeometry(100, 4), 1000],
          [new v3d.IcosahedronBufferGeometry(100, 2), 2000],
          [new v3d.IcosahedronBufferGeometry(100, 1), 8000]

        ];

        const material = new v3d.MeshLambertMaterial({ color: 0xffffff, wireframe: true });

        for (let j = 0; j < 1000; j ++) {

          const lod = new v3d.LOD();

          for (let i = 0; i < geometry.length; i++) {

            const mesh = new v3d.Mesh(geometry[i][0], material);
            mesh.scale.set(1.5, 1.5, 1.5);
            mesh.updateMatrix();
            mesh.matrixAutoUpdate = false;
            lod.addLevel(mesh, geometry[i][1]);

          }

          lod.position.x = 10000 * (0.5 - Math.random());
          lod.position.y = 7500 * (0.5 - Math.random());
          lod.position.z = 10000 * (0.5 - Math.random());
          lod.updateMatrix();
          lod.matrixAutoUpdate = false;
          scene.add(lod);

        }


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

        //

        controls = new FlyControls(camera, renderer.domElement);
        controls.movementSpeed = 1000;
        controls.rollSpeed = Math.PI / 10;

        //

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

      }

      function render() {

        controls.update(clock.getDelta());

        renderer.render(scene, camera);

      }

    </script>

  </body>
</html>