Merge pull request #2 from 3DGenomes/master

Add ObjectLoader, Errata, Tidy
Autodesk · Apr 5, 2017 · 27a75b0 · 27a75b0
2 parents c80ed20 + 5aab7c2
commit 27a75b0
Show file tree

Hide file tree

Showing 8 changed files with 124 additions and 475 deletions.
diff --git a/README.md b/README.md
@@ -5,7 +5,7 @@ ThreeD Viewer Component
 This is a 3D viewer web component that presents a model, currently based on 2 parameters:
 
 * Previews - An array of objects, each consisting of two properties:
- 	1. file_type: "obj"/"stl"
+ 	1. file_type: "obj"/"stl"/"json" (where "json" is a valid [THREEjs Scene Object](https://github.com/mrdoob/three.js/wiki/JSON-Object-Scene-format-4))
  	2. file_url: can be an absolute URL (for an S3 bucket for instance), or a relative path
 * Color (optional) - If not provided, a value of #F18D05 will be used
 
@@ -27,7 +27,7 @@ Then add these 2 lines at your HTML file:
 
 From here you just use the tag itself with the parameters, e.g.:
 
-        <three-d-viewer color="ff0000" 
+        <three-d-viewer color="ff0000"
                         previews='[{"file_type": "stl", "file_url": "bower_components/3DViewerComponent/samples/Camel.stl"}]'>
         </three-d-viewer>
 
@@ -40,5 +40,3 @@ If you're running as a new project or a blank new HTML page and don't have your
                 overflow: hidden;
             }
         </style>
-
-
diff --git a/dist/three-d-viewer.html b/dist/three-d-viewer.html
@@ -269,6 +269,30 @@
         $this.scene.remove(obj);
     };
 
+    this.loadJson = function (obj, onViewerReady, onError) {
+        showcaseModel = true;
+        var loader = new THREE.ObjectLoader();
+
+        loader.load(obj, function (object) {
+            var newColor = '#F18D05';
+            var color = new THREE.Color(newColor);
+            var material = new THREE.MeshPhongMaterial({color: color});
+
+            geom = $this.centerGeometry(object.geometry);
+            var mesh = new THREE.Mesh(geom, material);
+
+            if ($this.autorotate) {
+                mesh.rotation.x = -Math.PI / 2;
+            }
+
+            mesh.name = 'objGroup';
+            loadedModel = mesh;
+            $this.scene.add(mesh);
+            $this.fitMeshToCamera(mesh);
+
+            onViewerReady && onViewerReady()
+        }.bind($this), undefined, onError);
+    };
 
     this.loadObj = function (obj, onViewerReady, onError) {
         var self = $this;
@@ -338,6 +362,7 @@
 
     this.centerGeometry = function (geom) {
         var geometry = new THREE.Geometry();
+
         geometry.fromBufferGeometry(geom);
         geometry.computeBoundingBox();
         geometry.center();
@@ -402,6 +427,12 @@
 
     this.loadObject = function (obj, type, onViewerReady, onLoadError) {
         switch (type) {
+            case 'js':
+                $this.loadJson(obj, onViewerReady, onLoadError);
+                break;
+            case 'json':
+                $this.loadJson(obj, onViewerReady, onLoadError);
+                break;
             case 'obj':
                 $this.loadObj(obj, onViewerReady, onLoadError);
                 break;
@@ -445,6 +476,7 @@
     };
 
 };
+
 </script>
   <script>
 // threejs.org/license

diff --git a/index.html b/index.html
@@ -4,16 +4,16 @@
     <meta charset="utf-8">
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="generator" content="Polymer Starter Kit" />
-    <title>Polymer Starter Kit</title>
+    <meta name="generator" content="3D Viewer Web Component" />
+    <title>3D Viewer Web Component</title>
     <meta name="theme-color" content="#2E3AA1">
     <meta name="msapplication-TileColor" content="#3372DF">
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="application-name" content="PSK">
 
     <script src="../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
 
-    <link rel="import" href="bower_components/ViewerWebComponent/dist/three-d-viewer.html">
+    <link rel="import" href="bower_components/3DViewerComponent/dist/three-d-viewer.html">
 
     <style>
     html, body {
@@ -32,7 +32,7 @@
 <body unresolved class="fullbleed layout vertical">
 
 <div class="container">
-    <three-d-viewer id="viewer" color="93AEBF" previews='[{"file_type": "stl","file_url": "../samples/Camel.stl"}]'></three-d-viewer>
+    <three-d-viewer id="viewer" color="93AEBF" previews='[{"file_type": "json","file_url": "../samples/Camel.json"}]'></three-d-viewer>
 </div>
 
 </body>

diff --git a/js/THREEx.WindowResize.js b/js/THREEx.WindowResize.js