model-viewer.html

<link rel="import" href="../paper-styles/paper-styles.html">
<link rel="import" href="../paper-item/paper-item.html">
<link rel="import" href="../paper-toolbar/paper-toolbar.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../paper-toggle-button/paper-toggle-button.html">
<link rel="import" href="../paper-spinner/paper-spinner.html">

<link rel="import" href="../paper-input/paper-input.html">

<link rel="import" href="../iron-icons/iron-icons.html">
<link rel="import" href="../iron-collapse/iron-collapse.html">

<script src="../three.js/build/three.min.js"></script>
<script src="../three.js/examples/js/controls/OrbitControls.js"></script>
<script src="../three.js/examples/js/Detector.js"></script>
<script src="../three.js/examples/js/loaders/STLLoader.js"></script>
<script src="../bytebuffer/dist/ByteBufferAB.js"></script>
<script src="../protobuf/dist/ProtoBuf.js"></script>
<script src="utility.js"></script>

<dom-module id="model-viewer">
  <style>
    :host {
    }

    .placeholderimg {
      width: 100%;
      height: auto;
    }

    .viewercontainer {
      position: relative;
      margin: 0 10%;
      padding: 0;
    }

    .loadingspinner {
      position: absolute;
      top: 50%;
      right: 50%;
      z-index: 10;
    }

    .buttonloadmodel {
      position: absolute;
      right: 10px;
      top: 10px;
      background: blue;
      color: white;
      z-index: 10;
    }

    .viewertoolbarcontainer {
      position: relative;
      margin-left: 2em;
    }

    @media (max-width: 900px) {
    }

    .viewertoolbar {
      --paper-toolbar-background: white;
    }

    .viewertoolscontainer {
      position: relative;
      margin: 0 10%;
      padding: 0;
    }

    .viewertoolbarbuttons {
      background: blue;
      color: white;
    }

    .viewertoolbartoggles {
    }

    paper-button[disabled] {
      background-color: gray;
    }

    .viewertoolbarlabels {
      color: black;
      text-transform: uppercase;
      display: inline;
      margin: 0.5em;
    }

    .btnexportlabel {
      color: white;
      text-transform: uppercase;
      font-weight: bold;
      display: inline;
    }

    .numfloat {
      width: 4em;
    }

    .scaleinputs {
      margin: 0 1em;
    }

  </style>

  <template>
      <div class="viewercontainer" on-scenerendered="scenerendered" on-loadedmodel="loadedmodel">
        <img class="placeholderimg" src="{{previewimg}}"/>
        <paper-button class="buttonloadmodel" on-click="loadmodel" raised>
          <iron-icon icon="icons:3d-rotation"></iron-icon>
        </paper-button class="viewertoolbar">
        <paper-spinner class="loadingspinner" inactive></paper-spinner>
      </div>

      <iron-collapse class="toolbarcollapse">
        <div class="viewertoolscontainer">
          <paper-item class="viewertoolbarlabels">Scene Controls</paper-item>
          <div class="viewertoolbarcontainer horizontal layout wrap flex">
            <paper-item>
              <paper-toggle-button class="viewertoolbartoggles" on-change="onclickbtnwireframe" checked={{togglewireframe}} disabled></paper-toggle-button>
              <span class="viewertoolbarlabels">Wireframe</span>
            </paper-item>
            <paper-item>
              <paper-toggle-button class="viewertoolbartoggles" on-change="onclickbtnsolid" checked={{togglesolid}} disabled></paper-toggle-button>
              <span class="viewertoolbarlabels">Solid</span>
            </paper-item>
            <paper-item>
              <paper-toggle-button class="viewertoolbartoggles" on-change="onclickbtnboundingbox" checked={{toggleboundingbox}} disabled></paper-toggle-button>
              <span class="viewertoolbarlabels">Bounding Box</span>
            </paper-item>
            <paper-button id="button-scene-snapshot" class="viewertoolbarbuttons" on-click="onclickbtncapture" raised disabled>
              <iron-icon icon="icons:camera-enhance"></iron-icon>
            </paper-button>
          </div>

          <paper-item class="viewertoolbarlabels">Model Scale</paper-item>
          <div class="viewertoolbarcontainer horizontal layout wrap flex">
            <paper-input name="Scale X" label="Scale X" class="scaleinputs numfloat" type="number" value="{{scalex}}" on-change="onscalechange"></paper-input>
            <paper-input name="Scale Y" label="Scale Y" class="scaleinputs numfloat" type="number" value="{{scaley}}" on-change="onscalechange"></paper-input>
            <paper-input name="Scale Z" label="Scale Z" class="scaleinputs numfloat" type="number" value="{{scalez}}" on-change="onscalechange"></paper-input>
            <paper-item>
              <paper-toggle-button class="viewertoolbartoggles" on-change="onscalechange" checked={{scaleconstrain}} on-change="onscalechange" disabled></paper-toggle-button>
              <span class="viewertoolbarlabels">Constrain Scale</span>
            </paper-item>
          </div>

          <paper-item class="viewertoolbarlabels">Model Rotation</paper-item>
          <div class="viewertoolbarcontainer horizontal layout wrap flex">
            <paper-input label="Rotate X" class="scaleinputs numfloat" type="number" value="{{rotatex}}" on-change="onrotatechange"></paper-input>
            <paper-input label="Rotate Y" class="scaleinputs numfloat" type="number" value="{{rotatey}}" on-change="onrotatechange"></paper-input>
            <paper-input label="Rotate Z" class="scaleinputs numfloat" type="number" value="{{rotatez}}" on-change="onrotatechange"></paper-input>
          </div>

          <paper-item class="viewertoolbarlabels">Export</paper-item>
          <div class="viewertoolbarcontainer horizontal layout wrap flex">
            <paper-button id="button-scene-snapshot" class="viewertoolbarbuttons" on-click="onclickbtnexportstl" raised disabled>
              <iron-icon icon="icons:launch"></iron-icon>
              <paper-item class="btnexportlabel">STL</paper-item>
            </paper-button>
          </div>

        </div>
      </iron-collapse>
  </template>
</dom-module>

<script>
  Polymer({
    is: 'model-viewer',

    ready: function() {
    },

    attached: function() {
    },

    loadmodel: function() {
      var renderel = this.getElementsByClassName("viewercontainer")[0];

      if(!Detector.webgl) {
        var glerror = Detector.getWebGLErrorMessage();
        glerror.style.padding = "";
        glerror.style.margin = "";
        glerror.style.width = "100%";

        renderel.innerHTML = '';
        renderel.appendChild(glerror);

        return;
      }

      var spinner = this.getElementsByClassName("loadingspinner")[0];

      this.renderel = renderel;
      this.spinner = spinner;

      // Keep square by using width twice
      var viewerheight = renderel.offsetWidth;
      var viewerwidth = renderel.offsetWidth;
      var aspectratio = viewerwidth / viewerheight;

      this.viewerheight = viewerheight;
      this.viewerwidth = viewerwidth;
      this.aspectratio = aspectratio;

      var scene = new THREE.Scene();
      this.scene = scene;

      var camera = new THREE.PerspectiveCamera(60, this.aspectratio, 0.1, 1000);
      this.camera = camera;

      scene.fog = new THREE.Fog(0xeeeeee, 1, 500);

      var lights = {"camera": null,
                    "ambient": null};

      this.lights = lights;

      lights.camera = new THREE.DirectionalLight(this.lightcolor, this.lightintensity);
      lights.ambient = new THREE.AmbientLight(this.lightambientcolor);

      camera.add(lights.camera);
      camera.name = "Camera";
      scene.add(camera);

      lights.ambient.name = "Ambient Light";
      scene.add(lights.ambient);

      // Z is *up* for 3D printing! :)
      camera.up = new THREE.Vector3(0, 0, 1);

      camera.lookAt(new THREE.Vector3(0, 0, 0));

      camera.updateProjectionMatrix();

      var renderer = new THREE.WebGLRenderer({antialias: true});
      this.renderer = renderer;

      var render = function() {
        this.renderer.render(this.scene, this.camera);
      }

      renderer.setSize(viewerwidth, viewerheight);

      this.spinner.setAttribute('active', true);

      if (this.loadmethod == "stl" || this.loadmethod == "json") {

        if(this.loadmethod == "stl") {
          var loader = new THREE.STLLoader();
        } else if(this.loadmethod == "json") {
          var loader = new THREE.JSONLoader();
        }
        var loadedmodeldispatch = function(geometry, materials) {
          this.renderel.dispatchEvent(new CustomEvent('loadedmodel', {'detail': { 'geometry': geometry, 'materials': materials, 'name': this.modelname}}));
        };

        loader.load(this.model, loadedmodeldispatch.bind(this));
      } else if (this.loadmethod == "protobuf") {
        var xhr = new XMLHttpRequest();
        xhr.renderel = this.renderel;

        xhr.open("GET", this.proto, true);

        xhr.onload = function(e) {
          console.log("Loaded proto buffer definition.");

          var ProtoBuf = dcodeIO.ProtoBuf;
          var MeshMsg = ProtoBuf.loadJson(this.response).build("meshthreejs").MeshThreeJS;

          var pb_xhr = ProtoBuf.Util.XHR();

          pb_xhr.open("GET", this.modelviewer.model, true);

          pb_xhr.responseType = "arraybuffer";

          pb_xhr.onload = function(e) {
            console.log("Loaded protobuffer.");

            var msg = this.MeshMsg.decode(this.response);

            var loader = new THREE.JSONLoader();
            var m = loader.parse(msg);
            var loadedModelEvent = new CustomEvent('loadedmodel', {'detail': {'name': this.modelname, 'materials': m.materials, 'geometry': m.geometry}});
            this.renderel.dispatchEvent(loadedModelEvent);
          }

          pb_xhr.MeshMsg = MeshMsg;
          pb_xhr.renderel = this.renderel;
          pb_xhr.modelname = this.modelname
          pb_xhr.send();

        }

        xhr.modelviewer = {model: this.model};
        xhr.send();

      } else {
        console.log("Element has weird loadmethod: " + this.loadmethod);
      }

      var controls = new THREE.OrbitControls(camera, renderer.domElement);
      controls.damping = 0.2;
      controls.addEventListener('change', render.bind(this));
      this.controls = controls;

      window.addEventListener("resize", this.viewerresized.bind(this));
    },

    loadedmodel: function(e) {
      console.log("Loaded model event");

      var materials = e.detail.materials;
      var renderer = this.renderer;
      var scene = this.scene;
      var camera = this.camera;

      var geometry = e.detail.geometry;

      if(e.detail.geometry instanceof THREE.Geometry) {
        geometry = new THREE.BufferGeometry();
        geometry.fromGeometry(e.detail.geometry);
      }

      e.detail.geometry.dispose();

      renderer.setClearColor(this.backgroundcolor);

      var matsolid = new THREE.MeshPhongMaterial({ color: this.modelcolor, shading: THREE.FlatShading });

      renderobject = new THREE.Mesh(geometry, matsolid);
      renderobject.name = e.detail.name || this.modelname;

      if(this.togglesolid) {
        scene.add(renderobject);
      }

      var renderobjectwireframe = new THREE.WireframeHelper(renderobject, this.wireframecolor);
      renderobjectwireframe.name = renderobject.name + "-wireframe";

      if(this.togglewireframe) {
        scene.add(renderobjectwireframe);
      }

      var boundingbox = new THREE.Box3().setFromObject(renderobject);
      var renderobjectboxhelper = new THREE.BoxHelper(renderobject);
      renderobjectboxhelper.material.color.set(this.wireframecolor);

      if(this.togglebox) {
        scene.add(renderobjectboxhelper);
      }

      var objectcenter = boundingbox.center();

      var objectfloorgrid = new THREE.GridHelper(Math.round(Math.max(boundingbox.size().y, boundingbox.size().x)/10)*10,
                                                 10.0);

      objectfloorgrid.name = "GridHelper";

      objectfloorgrid.setColors(this.gridcolor, this.gridcolor);

      // Turn floor to match Z-up orientation
      objectfloorgrid.rotation.x = 90*(Math.PI/180);

      if(boundingbox.min.z < 0) {
        renderobject.translateZ(-boundingbox.min.z);
        boundingbox.setFromObject(renderobject);
        renderobjectboxhelper.update(renderobject);
      }

      scene.add(objectfloorgrid);

      camera.position.z = boundingbox.max.z;
      camera.position.y = boundingbox.max.y*-3;
      camera.position.x = 0;

      console.log(objectcenter);
      camera.lookAt(objectcenter);

      this.controls.target = objectcenter;

      camera.updateProjectionMatrix();

      renderer.render(scene, camera);

      this.matsolid = matsolid;
      this.renderobject = renderobject;
      this.renderobjectwireframe = renderobjectwireframe;
      this.renderobjectboxhelper = renderobjectboxhelper;
      this.renderobjectboundingbox = boundingbox;

      this.renderel.dispatchEvent(new CustomEvent('scenerendered', {'detail': {'renderElement': this.renderer.domElement}}));
    },

    scenerendered: function(e) {
      console.log("Scene rendered!");

      this.spinner.removeAttribute('active');
      this.renderel.innerHTML = "";
      this.modelscene = e.detail;

      this.renderel.innerHTML = '';
      this.renderel.appendChild(e.detail.renderElement);

      var toolbarbuttons = this.getElementsByClassName('viewertoolbarbuttons');
      var toolbartoggles = this.getElementsByClassName('viewertoolbartoggles');

      for(var i = 0; i < toolbarbuttons.length; i++) {
        toolbarbuttons[i].removeAttribute('disabled');
      }

      for(var i = 0; i < toolbartoggles.length; i++) {
        toolbartoggles[i].removeAttribute('disabled');
      }

      var collapsed = this.getElementsByClassName('toolbarcollapse');

      collapsed[0].toggle();
    },

    viewerresized: function(e) {
      var renderwidth = this.renderel.offsetWidth;
      var renderheight = this.renderel.offsetWidth;

      // Keep squared
      this.renderwidth = renderwidth;
      this.renderheight = renderheight;

      this.aspectratio = renderwidth / renderheight;

      if(this.renderer)
        this.renderer.setSize(renderwidth, renderheight);
    },

    onclickbtncapture: function(e) {
      this.renderer.render(this.scene, this.camera);
      this.renderer.capture = this.renderer.domElement.toDataURL();

      var downloadlink = document.createElement('a');
      downloadlink.download = this.modelname + ".png";
      downloadlink.href = this.renderer.capture;
      downloadlink.click();
    },

    onclickbtnsolid: function (e) {
      if(this.togglesolid) {
        this.scene.add(this.renderobject);
      } else {
        this.scene.remove(this.renderobject);
      }

      this.renderer.render(this.scene, this.camera);
    },

    onclickbtnwireframe: function (e) {
      if(this.togglewireframe) {
        this.scene.add(this.renderobjectwireframe);
      } else {
        this.scene.remove(this.renderobjectwireframe);
      }

      this.renderer.render(this.scene, this.camera);
    },

    onclickbtnboundingbox: function (e) {
      if(this.toggleboundingbox) {
        this.scene.add(this.renderobjectboxhelper);
      } else {
        this.scene.remove(this.renderobjectboxhelper);
      }

      this.renderer.render(this.scene, this.camera);
    },

    onclickbtnexportstl: function (e) {
      var mesh = this.scene.getObjectByName(this.modelname);

      var vertices = mesh.geometry.getAttribute('position').array.slice();

      var sizeofstl = 80+4+((vertices.length/9)*50);
      var faces = vertices.length/9;

      console.log("Faces: " + faces + ", Vertices: " + vertices.length);
      console.log("Size of STL: " + sizeofstl);

      var stlbuffer = new dcodeIO.ByteBuffer(capacity=sizeofstl, littleEndian=true);
      var headerstring = "TamarinTech Model-Viewer STL Exporter: " + mesh.name;

      stlbuffer.writeUTF8String(headerstring.substring(0, 80));
      stlbuffer.skip(80 - headerstring.length);

      stlbuffer.writeUint32(vertices.length/9);

      mesh.matrix.applyToVector3Array(vertices);

      for(var vi = 0; vi < vertices.length; ) {
        stlbuffer.writeFloat32(0); // Normal a
        stlbuffer.writeFloat32(0); // Normal b
        stlbuffer.writeFloat32(0); // Normal c

        for(var facei = 0; facei < 9; facei++) {
          stlbuffer.writeFloat32(vertices[vi++]);
        }

        stlbuffer.writeUint16(0); // Attribute
      }

      stlbuffer.flip();

      var a = document.createElement('a');
      var stlblob = new Blob([stlbuffer.toArrayBuffer()], {type: "octet/stream"});
      a.href = window.URL.createObjectURL(stlblob);
      a.download = mesh.name + ".stl";
      a.click();
    },

    onscalechange: function (e) {
      var obj = this.scene.getObjectByName(this.modelname);

      if(this.scaleconstrain) {
        if(e.target.name == "Scale X") {
          this.scaley = this.scalex;
          this.scalez = this.scalex;
        } else if(e.target.name == "Scale Y") {
          this.scalex = this.scaley;
          this.scalez = this.scaley;
        } else if(e.target.name == "Scale Z") {
          this.scalex = this.scalez;
          this.scaley = this.scalez;
        } else {
          var scale = Math.max(this.scalex, this.scaley, this.scalez);
          this.scalex = scale;
          this.scaley = scale;
          this.scalez = scale;
        }
      }

      if(this.scalex <= 0) {
        this.scalex = 0.1;
      }

      if(this.scaley <= 0) {
        this.scaley = 0.1;
      }

      if(this.scalez <= 0) {
        this.scalez = 0.1;
      }

      obj.scale.set(this.scalex, this.scaley, this.scalez);

      this.renderobjectboundingbox.setFromObject(this.renderobject);

      // Keep object above floor
      if(this.renderobjectboundingbox.min.z < 0) {
        obj.translateZ(-this.renderobjectboundingbox.min.z);
      }

      this.renderobjectboundingbox.setFromObject(this.renderobject);
      this.renderobjectboxhelper.update(this.renderobject);

      this.renderer.render(this.scene, this.camera);
    },

    onrotatechange: function (e) {
      var obj = this.scene.getObjectByName(this.modelname);

      obj.rotation.set(0, 0, 0, 0);

      obj.rotateOnAxis(new THREE.Vector3(1, 0, 0), this.rotatex*(Math.PI/180));
      obj.rotateOnAxis(new THREE.Vector3(0, 1, 0), this.rotatey*(Math.PI/180));
      obj.rotateOnAxis(new THREE.Vector3(0, 0, 1), this.rotatez*(Math.PI/180));

      this.renderer.render(this.scene, this.camera);
    },

    properties: {
      model: {
        type: String
      },
      modelname: {
        type: String
      },
      loadmethod: {
        type: String
      },
      proto: {
        type: String
      },
      previewimg: {
        type: String
      },
      backgroundcolor: {
        type: Number,
        value: 0x0
      },
      gridcolor: {
        type: Number,
        value: 0xffffff
      },
      modelcolor: {
        type: Number,
        value: 0xaaaaff
      },
      wireframecolor: {
        type: Number,
        value: 0xaaaaff
      },
      lightambientcolor: {
        type: Number,
        value: 0x777777
      },
      lightcolor: {
        type: Number,
        value: 0xffffff
      },
      lightintensity: {
        type: Number,
        value: 0.6
      },

      togglesolid: {
        type: Boolean,
        value: true
      },
      togglewireframe: {
        type: Boolean,
        value: false
      },
      toggleboundingbox: {
        type: Boolean,
        value: false
      },

      rotatex: {
        type: Number,
        value: 0
      },
      rotatey: {
        type: Number,
        value: 0
      },
      rotatez: {
        type: Number,
        value: 0
      },

      scalex: {
        type: Number,
        value: 1.0
      },
      scaley: {
        type: Number,
        value: 1.0
      },
      scalez: {
        type: Number,
        value: 1.0
      },

      scaleconstrain: {
        type: Boolean,
        value: false
      }

    }
  });
</script>