master

分支 (1)

管理

管理

master

verge3d-code-examples
/
webgl_loader_gltf.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Verge3D webgl - glTF loader</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> - GLTFLoader<br />
      Battle Damaged Sci-fi Helmet by
      <a href="https://sketchfab.com/theblueturtle_" target="_blank" rel="noopener">theblueturtle_</a><br />
      <a href="https://hdrihaven.com/hdri/?h=royal_esplanade" target="_blank" rel="noopener">Royal Esplanade</a> by <a href="https://hdrihaven.com/" target="_blank" rel="noopener">HDRI Haven</a>
    </div>

    <script type="module">

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

      import { OrbitControls } from './jsm/controls/OrbitControls.js';
      import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
      import { RGBELoader } from './jsm/loaders/RGBELoader.js';
      import { RoughnessMipmapper } from './jsm/utils/RoughnessMipmapper.js';

      let camera, scene, renderer;

      init();
      render();

      function init() {

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

        camera = new v3d.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.25, 20);
        camera.position.set(- 1.8, 0.6, 2.7);

        scene = new v3d.Scene();

        new RGBELoader()
          .setDataType(v3d.UnsignedByteType)
          .setPath('textures/equirectangular/')
          .load('royal_esplanade_1k.hdr', function(texture) {

            const envMap = pmremGenerator.fromEquirectangular(texture).texture;

            scene.background = envMap;
            scene.environment = envMap;

            texture.dispose();
            pmremGenerator.dispose();

            render();

            // model

            // use of RoughnessMipmapper is optional
            const roughnessMipmapper = new RoughnessMipmapper(renderer);

            const loader = new GLTFLoader().setPath('models/gltf/DamagedHelmet/glTF/');
            loader.load('DamagedHelmet.gltf', function(gltf) {

              gltf.scene.traverse(function(child) {

                if (child.isMesh) {

                  // TOFIX RoughnessMipmapper seems to be broken with WebGL 2.0
                  // roughnessMipmapper.generateMipmaps(child.material);

                }

              });

              scene.add(gltf.scene);

              roughnessMipmapper.dispose();

              render();

            });

          });

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

        const pmremGenerator = new v3d.PMREMGenerator(renderer);
        pmremGenerator.compileEquirectangularShader();

        const controls = new OrbitControls(camera, renderer.domElement);
        controls.addEventListener('change', render); // use if there is no animation loop
        controls.minDistance = 2;
        controls.maxDistance = 10;
        controls.target.set(0, 0, - 0.2);
        controls.update();

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

      }

      function onWindowResize() {

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

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

        render();

      }

      //

      function render() {

        renderer.render(scene, camera);

      }

    </script>

  </body>
</html>