3D Viewer WIP

app/js/viewer.js

@@ -274,63 +274,64 @@ function init3D() {
       antialias: false,
       preserveDrawingBuffer: true
     });
+    // ThreeJS Render/Control/Camera
+    scene = new THREE.Scene();
+    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 20000);
+    camera.position.z = 295;
+
+    var canvas = !!window.CanvasRenderingContext2D;
+
+
+
+    $('#renderArea').append(renderer.domElement);
+    renderer.setClearColor(0xffffff, 1); // Background color of viewer = transparent
+    // renderer.setSize(window.innerWidth - 10, window.innerHeight - 10);
+    renderer.clear();
+
+    sceneWidth = document.getElementById("renderArea").offsetWidth,
+      sceneHeight = document.getElementById("renderArea").offsetHeight;
+    camera.aspect = sceneWidth / sceneHeight;
+    renderer.setSize(sceneWidth, sceneHeight)
+    camera.updateProjectionMatrix();
+
+
+    controls = new THREE.OrbitControls(camera, renderer.domElement);
+    controls.target.set(0, 0, 0); // view direction perpendicular to XY-plane
+    var isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+    if (!isMac) {
+      controls.mouseButtons = {
+        ORBIT: THREE.MOUSE.MIDDLE,
+        ZOOM: false,
+        PAN: THREE.MOUSE.RIGHT
+      };
+    }
+    controls.enableRotate = true;
+    controls.enableZoom = true; // optional
+    controls.maxDistance = 8000; // limit max zoom out
+    controls.enableKeys = false; // Disable Keyboard on canvas
+
+
+    drawWorkspace();
+
+    // Picking stuff
+    projector = new THREE.Projector();
+    mouseVector = new THREE.Vector3();
+    raycaster.linePrecision = 1
+
+    setTimeout(function() {
+      resetView()
+      animate();
+    }, 200)
 
   } else if (canvas) {
     printLog('No WebGL Support found on this computer! Disabled 3D Viewer - Sorry!');
-    return false;
     $('#gcodeviewertab').hide()
     // renderer = new THREE.CanvasRenderer();
 
+    return false;
   };
 
-  // ThreeJS Render/Control/Camera
-  scene = new THREE.Scene();
-  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 20000);
-  camera.position.z = 295;
 
-  var canvas = !!window.CanvasRenderingContext2D;
-
-
-
-  $('#renderArea').append(renderer.domElement);
-  renderer.setClearColor(0xffffff, 1); // Background color of viewer = transparent
-  // renderer.setSize(window.innerWidth - 10, window.innerHeight - 10);
-  renderer.clear();
-
-  sceneWidth = document.getElementById("renderArea").offsetWidth,
-    sceneHeight = document.getElementById("renderArea").offsetHeight;
-  camera.aspect = sceneWidth / sceneHeight;
-  renderer.setSize(sceneWidth, sceneHeight)
-  camera.updateProjectionMatrix();
-
-
-  controls = new THREE.OrbitControls(camera, renderer.domElement);
-  controls.target.set(0, 0, 0); // view direction perpendicular to XY-plane
-  var isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
-  if (!isMac) {
-    controls.mouseButtons = {
-      ORBIT: THREE.MOUSE.MIDDLE,
-      ZOOM: false,
-      PAN: THREE.MOUSE.RIGHT
-    };
-  }
-  controls.enableRotate = true;
-  controls.enableZoom = true; // optional
-  controls.maxDistance = 8000; // limit max zoom out
-  controls.enableKeys = false; // Disable Keyboard on canvas
-
-
-  drawWorkspace();
-
-  // Picking stuff
-  projector = new THREE.Projector();
-  mouseVector = new THREE.Vector3();
-  raycaster.linePrecision = 1
-
-  setTimeout(function() {
-    resetView()
-    animate();
-  }, 200)
 
 }
 

app/js/websocket.js

@@ -10,6 +10,16 @@ var simstopped = false;
 var bellstate = false;
 var toast = Metro.toast.create;
 
+var webgl = (function() {
+  try {
+    return !!window.WebGLRenderingContext && !!document.createElement('canvas').getContext('experimental-webgl');
+  } catch (e) {
+    return false;
+  }
+})();
+
+
+
 $(document).ready(function() {
   initSocket();
 
@@ -248,11 +258,13 @@ function initSocket() {
       $('#zPos').html(zpos);
     }
 
-    if (!isJogWidget) {
-      if (!simRunning) {
-        cone.position.x = status.machine.position.work.x
-        cone.position.y = status.machine.position.work.y
-        cone.position.z = (parseFloat(status.machine.position.work.z) + 20)
+    if (webgl) {
+      if (!isJogWidget) {
+        if (!simRunning) {
+          cone.position.x = status.machine.position.work.x
+          cone.position.y = status.machine.position.work.y
+          cone.position.z = (parseFloat(status.machine.position.work.z) + 20)
+        }
       }
     }