new API for the orthographic camera to allow user easily navigate between default, axial, coronal and sagittal views

Author: NicolasRannou

examples/loader_nifti/loader_nifti.js

@@ -87,7 +87,7 @@ window.onload = function() {
 
   // load vtk file
   var loader1 = new THREE.VTKLoader();
-  loader1.load( '../../data/blood.vtk', function ( geometry ) {
+  loader1.load( '../../blood1.vtk', function ( geometry ) {
     geometry.computeVertexNormals();
     console.log( geometry );
     var material = new THREE.MeshLambertMaterial( {
@@ -114,6 +114,7 @@ window.onload = function() {
   var files = t2.map(function(v) {
     return 'https://cdn.rawgit.com/FNNDSC/data/master/nifti/fetalatlas_brain/t2/' + v;
   });
+  files = ['../../data/MRBrainTumor1_PIL.nii'];
 
   // load sequence for each file
   let seriesContainer = [];

examples/viewers_compare/viewers_compare.js

@@ -125,6 +125,7 @@ function init() {
   controls = new ControlsOrthographic(camera, threeD);
   controls.staticMoving = true;
   controls.noRotate = true;
+  camera.controls = controls;
 
   animate();
 }
@@ -445,17 +446,21 @@ window.onload = function() {
     );
 
     // box: {halfDimensions, center}
-    let bbox = {
+    let box = {
       center: stack.worldCenter().clone(),
-      halfDimensions: new THREE.Vector3(lpsDims.x + 500, lpsDims.y + 500, lpsDims.z + 500)
+      halfDimensions: new THREE.Vector3(lpsDims.x + 50, lpsDims.y + 50, lpsDims.z + 50)
     };
 
     // init and zoom
     let canvas = {
         width: threeD.clientWidth,
         height: threeD.clientHeight
       };
-    camera.init(stack.xCosine, stack.yCosine, stack.zCosine, controls, bbox, canvas);
+
+    camera.directions = [stack.xCosine, stack.yCosine, stack.zCosine];
+    camera.box = box;
+    camera.canvas = canvas;
+    camera.update();
     camera.fitBox(2);
 
     // CREATE LUT

examples/viewers_labelmap/viewers_labelmap.js

@@ -97,6 +97,7 @@ function init() {
   controls = new ControlsOrthographic(camera, threeD);
   controls.staticMoving = true;
   controls.noRotate = true;
+  camera.controls = controls;
 
   animate();
 }
@@ -573,7 +574,7 @@ let ds2 = [
     );
 
     // box: {halfDimensions, center}
-    let bbox = {
+    let box = {
       center: stack.worldCenter().clone(),
       halfDimensions: new THREE.Vector3(lpsDims.x + 10, lpsDims.y + 10, lpsDims.z + 10)
     };
@@ -583,7 +584,10 @@ let ds2 = [
         width: threeD.clientWidth,
         height: threeD.clientHeight
       };
-    camera.init(stack.xCosine, stack.yCosine, stack.zCosine, controls, bbox, canvas);
+    camera.directions = [stack.xCosine, stack.yCosine, stack.zCosine];
+    camera.box = box;
+    camera.canvas = canvas;
+    camera.update();
     camera.fitBox(2);
 
     // CREATE LUT

examples/viewers_upload/viewers_upload.js

@@ -20,7 +20,9 @@ let drag = {
 let camUtils = {
   invertRows: false,
   invertColumns: false,
-  rotate: false
+  rotate: false,
+  orientation: 'default',
+  convention: 'radio'
 };
 
 // FUNCTIONS
@@ -64,6 +66,7 @@ function init() {
   controls = new ControlsOrthographic(camera, threeD);
   controls.staticMoving = true;
   controls.noRotate = true;
+  camera.controls = controls;
 
   animate();
 }
@@ -137,6 +140,21 @@ window.onload = function() {
       camera.rotate();
     });
 
+    let orientationUpdate = cameraFolder.add(camUtils, 'orientation', ['default', 'axial', 'coronal', 'sagittal']);
+    orientationUpdate.onChange(function(value) {
+      camera.orientation = value;
+      camera.update();
+      camera.fitBox(2);
+      stackHelper.orientation = camera.stackOrientation;
+    });
+
+    let conventionUpdate = cameraFolder.add(camUtils, 'convention', ['radio', 'neuro']);
+    conventionUpdate.onChange(function(value) {
+      camera.convention = value;
+      camera.update();
+      camera.fitBox(2);
+    });
+
     cameraFolder.open();
   }
 
@@ -233,7 +251,7 @@ window.onload = function() {
     );
 
     // box: {halfDimensions, center}
-    let bbox = {
+    let box = {
       center: stack.worldCenter().clone(),
       halfDimensions: new THREE.Vector3(lpsDims.x + 10, lpsDims.y + 10, lpsDims.z + 10)
     };
@@ -243,7 +261,11 @@ window.onload = function() {
         width: threeD.clientWidth,
         height: threeD.clientHeight
       };
-    camera.init(stack.xCosine, stack.yCosine, stack.zCosine, controls, bbox, canvas);
+  
+    camera.directions = [stack.xCosine, stack.yCosine, stack.zCosine];
+    camera.box = box;
+    camera.canvas = canvas;
+    camera.update();
     camera.fitBox(2);
 
     buildGUI(stackHelper);

lessons/03/demo.js

@@ -26,6 +26,7 @@ var camera = new CamerasOrthographic(container.clientWidth / -2, container.clien
 var controls = new ControlsOrthographic(camera, container);
 controls.staticMoving = true;
 controls.noRotate = true;
+camera.controls = controls;
 
 // handle resize
 function onWindowResize() {
@@ -46,16 +47,19 @@ window.addEventListener('resize', onWindowResize, false);
 function gui(stackHelper){
 
   var gui = new dat.GUI({
-            autoPlace: false
+    autoPlace: false
   });
+
   var customContainer = document.getElementById('my-gui-container');
   customContainer.appendChild(gui.domElement);
   // only reason to use this object is to satusfy data.GUI
   var camUtils = {
     invertRows: false,
     invertColumns: false,
     rotate45: false,
-    rotate: 0
+    rotate: 0,
+    orientation: 'default',
+    convention: 'radio'
   };
 
   // camera
@@ -77,6 +81,21 @@ function gui(stackHelper){
 
   var rotate = cameraFolder.add(camera, 'angle', 0, 360).step(1).listen();
 
+  let orientationUpdate = cameraFolder.add(camUtils, 'orientation', ['default', 'axial', 'coronal', 'sagittal']);
+  orientationUpdate.onChange(function(value) {
+      camera.orientation = value;
+      camera.update();
+      camera.fitBox(2);
+      stackHelper.orientation = camera.stackOrientation;
+  });
+
+  let conventionUpdate = cameraFolder.add(camUtils, 'convention', ['radio', 'neuro']);
+  conventionUpdate.onChange(function(value) {
+      camera.convention = value;
+      camera.update();
+      camera.fitBox(2);
+  });
+
   cameraFolder.open();
 
   // of course we can do everything from lesson 01!
@@ -100,13 +119,7 @@ animate();
 
 // Setup loader
 var loader = new LoadersVolume(container);
-
-var t2 = [
-    '36444280', '36444294', '36444308', '36444322', '36444336'
-];
-var files = t2.map(function(v) {
-    return 'https://cdn.rawgit.com/FNNDSC/data/master/dicom/adi_brain/' + v;
-  });
+var files = ['https://cdn.rawgit.com/FNNDSC/data/master/nifti/adi_brain/adi_brain.nii.gz'];
 
 // load sequence for each file
 // 1- fetch
@@ -173,7 +186,7 @@ Promise
     );
 
     // box: {halfDimensions, center}
-    var bbox = {
+    var box = {
       center: stack.worldCenter().clone(),
       halfDimensions: new THREE.Vector3(lpsDims.x + 10, lpsDims.y + 10, lpsDims.z + 10)
     };
@@ -183,8 +196,13 @@ Promise
         width: container.clientWidth,
         height: container.clientHeight
       };
-    camera.init(stack.xCosine, stack.yCosine, stack.zCosine, controls, bbox, canvas);
+
+    camera.directions = [stack.xCosine, stack.yCosine, stack.zCosine];
+    camera.box = box;
+    camera.canvas = canvas;
+    camera.update();
     camera.fitBox(2);
+
   })
   .catch(function(error) {
     window.console.log('oops... something went wrong...');

lessons/04/demo.js

@@ -101,6 +101,7 @@ function init() {
   controls = new ControlsOrthographic(camera, threeD);
   controls.staticMoving = true;
   controls.noRotate = true;
+  camera.controls = controls;
 
   animate();
 }
@@ -388,7 +389,7 @@ function handleSeries() {
   );
 
   // box: {halfDimensions, center}
-  var bbox = {
+  var box = {
     center: stack.worldCenter().clone(),
     halfDimensions: new THREE.Vector3(lpsDims.x + 10, lpsDims.y + 10, lpsDims.z + 10)
   };
@@ -398,7 +399,10 @@ function handleSeries() {
       width: threeD.clientWidth,
       height: threeD.clientHeight
     };
-  camera.init(stack.xCosine, stack.yCosine, stack.zCosine, controls, bbox, canvas, stack.referenceSpace);
+  camera.directions = [stack.xCosine, stack.yCosine, stack.zCosine];
+  camera.box = box;
+  camera.canvas = canvas;
+  camera.update();
   camera.fitBox(2);
 
   // CREATE LUT