Centers geometry on the view according to the bounding box and sphere.

sandialabs · May 29, 2015 · 396a3f4 · 396a3f4
1 parent bfcc76b
commit 396a3f4
Showing 1 changed file with 68 additions and 53 deletions.
diff --git a/web-server/js/slycat-stl-viewer.js b/web-server/js/slycat-stl-viewer.js
@@ -27,72 +27,78 @@ define('slycat-stl-viewer', ['slycat-server-root', 'knockout', 'URI'], function(
       var width = viewer.offsetWidth;
       var height = viewer.offsetHeight;
 
+      var renderer = null;
+      var camera = null;
+      var mouse = null;
+      var controls = null;
+      var scene = null;
       var mesh = null;
+      var material = null;
       var animation = { id: null };
-
-      /**
-       * THREE.PerspectiveCamera(
-       *     field of view,
-       *     aspect ratio,
-       *     near clippling pane,
-       *     far clipping pane )
-       */
-      var camera = new THREE.PerspectiveCamera(45, width/height, 0.1, 1000);
-      camera.position.y = 2;
-      camera.position.z = 6;
-
-
-      var mouse = new THREE.Vector2();
-      var controls = new THREE.TrackballControls(camera);
-      controls.rotateSpeed = 2;
-      controls.zoomSpeed = 1.5;
-      controls.panSpeed = 1;
-      controls.noZoom = false;
-      controls.noPan = false;
-      controls.staticMoving = true;
-      controls.dynamicDampingFactor = 0.3;
-
-
-      var scene = new THREE.Scene();
-      scene.add(new THREE.AmbientLight(0xF2F2F2));
-
-      var lightOne = new THREE.PointLight(0xFFFFFF);
-      lightOne.position.set(0, 3, 3);
-      scene.add(lightOne);
-
-      var lightTwo = new THREE.PointLight(0xFFFFFF);
-      lightTwo.position.set(0, -3, -3);
-      scene.add(lightTwo);
+      var lightOne = null;
+      var lightTwo = null;
 
       new THREE.STLLoader().load(mid + '/files/' + aid, function(geometry) {
-        console.log(geometry);
 
-        var material = new THREE.MeshLambertMaterial({ color: 0x337AB7 });
+        geometry.computeBoundingSphere();
+        geometry.computeBoundingBox();
+        var gbs = geometry.boundingSphere;
+        var gbb = geometry.boundingBox;
+
+        /**
+         * THREE.PerspectiveCamera(
+         *     field of view,
+         *     aspect ratio,
+         *     near clippling pane,
+         *     far clipping pane )
+         */
+        camera = new THREE.PerspectiveCamera(75, width/height, 0.1, 1000);
+        camera.position.x = gbb.max.x;
+        camera.position.y = gbb.max.y;
+        camera.position.z = gbb.max.z + (gbs.radius*6);
+
+        mouse = new THREE.Vector2();
+        controls = new THREE.TrackballControls(camera);
+        controls.rotateSpeed = 2;
+        controls.zoomSpeed = 1.5;
+        controls.panSpeed = 1;
+        controls.noZoom = false;
+        controls.noPan = false;
+        controls.staticMoving = true;
+        controls.dynamicDampingFactor = 0.3;
+
+
+        scene = new THREE.Scene();
+        scene.add(new THREE.AmbientLight(0xF2F2F2));
+
+        lightOne = new THREE.PointLight(0xFFFFFF);
+        lightOne.position.set(gbb.max.x + (gbs.radius*6), gbb.max.y + (gbs.radius*6), gbb.max.z + (gbs.radius*6));
+        scene.add(lightOne);
+
+        lightTwo = new THREE.PointLight(0xFFFFFF);
+        lightTwo.position.set(gbb.max.x - (gbs.radius*6), gbb.max.y - (gbs.radius*6), gbb.max.z - (gbs.radius*6));
+        scene.add(lightTwo);
+
+        material = new THREE.MeshLambertMaterial({ color: 0x337AB7 });
 
         mesh = new THREE.Mesh(geometry, material);
-        mesh.position.set(0, 0, 0);
+        mesh.position.set(gbs.center.x, gbs.center.y, gbs.center.z);
 
         scene.add(mesh);
         camera.lookAt(mesh.position);
-      });
 
+        renderer = new THREE.WebGLRenderer({ antialias: true });
+        /** Sets the background color for the scene */
+        renderer.setClearColor(0xF2F2F2);
+        renderer.setPixelRatio(window.devicePixelRatio);
+        renderer.setSize(width, height);
+        document.getElementById(vid).appendChild(renderer.domElement);
 
-      var renderer = new THREE.WebGLRenderer({ antialias: true });
-      /** Sets the background color for the scene */
-      renderer.setClearColor(0xF2F2F2);
-      renderer.setPixelRatio(window.devicePixelRatio);
-      renderer.setSize(width, height);
-      document.getElementById(vid).appendChild(renderer.domElement);
+        renderer.domElement.addEventListener('mousemove', function(e) { onMouseMove(mouse, e); });
 
-      var onMouseMove = function(e) {
-        mouse.x = e.clientX;
-        mouse.y = e.clientY;
-      };
-
-      renderer.domElement.addEventListener('mousemove', onMouseMove);
-
-      /** renders the STL file... */
-      renderFixed(animation, renderer, scene, camera, controls);
+        /** renders the STL file... */
+        renderFixed(animation, renderer, scene, camera, controls);
+      });
 
 
       $('#' + cid + ' .slycat-stl-btn-reset').on('click', function() {
@@ -110,6 +116,15 @@ define('slycat-stl-viewer', ['slycat-server-root', 'knockout', 'URI'], function(
   });
 
 
+  /**
+   * Function executed on mouse events for the renderer.
+   * @param  {} e event
+   */
+  var onMouseMove = function(mouse, e) {
+    mouse.x = e.clientX;
+    mouse.y = e.clientY;
+  };
+
   /**
    * Generates and assigns a unique ID to the STL viewer based off its
    * container, mainly to prevent issues if viewing multiple models on the same