master

分支 (1)

管理

管理

master

verge3d-code-examples
/
webgl_loader_3dm.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Verge3D webgl - loaders - Rhino 3DM 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> - Rhino 3DM loader
    </div>

    <script type="module">

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

      import { OrbitControls } from './jsm/controls/OrbitControls.js';
      import { Rhino3dmLoader } from './jsm/loaders/3DMLoader.js';

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

      let container, controls;
      let camera, scene, renderer;
      let gui;

      init();
      animate();

      function init() {

        v3d.Object3D.DefaultUp = new v3d.Vector3(0, 0, 1);
        container = document.createElement('div');
        document.body.appendChild(container);

        camera = new v3d.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
        camera.position.set(26, - 40, 5);

        scene = new v3d.Scene();

        const directionalLight = new v3d.DirectionalLight(0xffffff);
        directionalLight.position.set(0, 0, 2);
        directionalLight.castShadow = true;
        directionalLight.intensity = 2;
        scene.add(directionalLight);

        const loader = new Rhino3dmLoader();
        loader.setLibraryPath('jsm/libs/rhino3dm/');

        loader.load('models/3dm/Rhino_Logo.3dm', function(object) {

          scene.add(object);
          initGUI(object.userData.layers);

        });

        const width = window.innerWidth;
        const height = window.innerHeight;

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

        controls = new OrbitControls(camera, container);

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

      }

      function resize() {

        const width = window.innerWidth;
        const height = window.innerHeight;

        camera.aspect = width / height;
        camera.updateProjectionMatrix();

        renderer.setSize(width, height);

      }

      function animate() {

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

        requestAnimationFrame(animate);

      }

      function initGUI(layers) {

        gui = new GUI({ width: 300 });
        const layersControl = gui.addFolder('layers');
        layersControl.open();

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

          const layer = layers[i];
          layersControl.add(layer, 'visible').name(layer.name).onChange(function(val) {

            const name = this.object.name;

            scene.traverse(function(child) {

              if (child.userData.hasOwnProperty('attributes')) {

                if ('layerIndex' in child.userData.attributes) {

                  const layerName = layers[child.userData.attributes.layerIndex].name;

                  if (layerName === name) {

                    child.visible = val;
                    layer.visible = val;

                  }

                }

              }

            });

          });

        }

      }
    </script>

  </body>
</html>