master

分支 (1)

管理

管理

master

verge3d-code-examples
/
webgl_loader_draco.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Verge3D webgl - loaders - Draco 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="container"></div>
  <div id="info">
    <a href="https://www.soft8soft.com/verge3d" target="_blank" rel="noopener">Verge3D</a> -
    <a href="https://github.com/google/draco" target="_blank" rel="noopener">DRACO</a> loader
  </div>

  <script type="module">
    import * as v3d from '../build/v3d.module.js';

    import { DRACOLoader } from './jsm/loaders/DRACOLoader.js';

    let camera, scene, renderer;

    const container = document.querySelector('#container');

    // Configure and create Draco decoder.
    const dracoLoader = new DRACOLoader();
    dracoLoader.setDecoderPath('js/libs/draco/');
    dracoLoader.setDecoderConfig({ type: 'js' });

    init();
    animate();

    function init() {

      camera = new v3d.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 15);
      camera.position.set(3, 0.25, 3);

      scene = new v3d.Scene();
      scene.background = new v3d.Color(0x443333);
      scene.fog = new v3d.Fog(0x443333, 1, 4);

      // Ground
      const plane = new v3d.Mesh(
        new v3d.PlaneBufferGeometry(8, 8),
        new v3d.MeshPhongMaterial({ color: 0x999999, specular: 0x101010 })
      );
      plane.rotation.x = - Math.PI / 2;
      plane.position.y = 0.03;
      plane.receiveShadow = true;
      scene.add(plane);

      // Lights
      const hemiLight = new v3d.HemisphereLight(0x443333, 0x111122);
      scene.add(hemiLight);

      const spotLight = new v3d.SpotLight();
      spotLight.angle = Math.PI / 16;
      spotLight.penumbra = 0.5;
      spotLight.castShadow = true;
      spotLight.position.set(- 1, 1, 1);
      scene.add(spotLight);

      dracoLoader.load('models/draco/bunny.drc', function(geometry) {

        geometry.computeVertexNormals();

        const material = new v3d.MeshStandardMaterial({ color: 0x606060 });
        const mesh = new v3d.Mesh(geometry, material);
        mesh.castShadow = true;
        mesh.receiveShadow = true;
        scene.add(mesh);

        // Release decoder resources.
        dracoLoader.dispose();

      });

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

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

    }

    function onWindowResize() {

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

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

    }

    function animate() {

      render();
      requestAnimationFrame(animate);

    }

    function render() {

      const timer = Date.now() * 0.0003;

      camera.position.x = Math.sin(timer) * 0.5;
      camera.position.z = Math.cos(timer) * 0.5;
      camera.lookAt(0, 0.1, 0);

      renderer.render(scene, camera);

    }
  </script>
</body>
</html>