Compatible with Three R114

Author: MatthijsBurgh

src/models/TriangleList.js

@@ -43,15 +43,15 @@ ROS3D.TriangleList = function(options) {
       }
       geometry.faces.push(faceVert);
     }
-    material.vertexColors = THREE.VertexColors;
+    material.vertexColors = true;
   } else if (colors.length === vertices.length / 3) {
     // use per-triangle color
     for (i = 0; i < vertices.length; i += 3) {
       var faceTri = new THREE.Face3(i, i + 1, i + 2);
       faceTri.color.setRGB(colors[i / 3].r, colors[i / 3].g, colors[i / 3].b);
       geometry.faces.push(faceTri);
     }
-    material.vertexColors = THREE.FaceColors;
+    material.vertexColors = true;
   } else {
     // use marker color
     for (i = 0; i < vertices.length; i += 3) {

src/navigation/OcTreeBase.js

@@ -403,7 +403,7 @@ ROS3D.OcTreeBase.prototype.buildGeometry = function () {
   const material = new THREE.MeshBasicMaterial({
     color: 'white',
     flatShading: true,
-    vertexColors: THREE.VertexColors,
+    vertexColors: true,
     transparent: this.opacity < 1.0,
     opacity: this.opacity
   });

src/sensors/Points.js

@@ -86,7 +86,7 @@ ROS3D.Points.prototype.setup = function(frame, point_step, fields)
 
         if(!this.material.isMaterial) { // if it is an option, apply defaults and pass it to a PointsMaterial
             if(this.colors && this.material.vertexColors === undefined) {
-                this.material.vertexColors = THREE.VertexColors;
+                this.material.vertexColors = true;
             }
             this.material = new THREE.PointsMaterial(this.material);
         }

src/visualization/SceneNode.js

@@ -25,6 +25,7 @@ ROS3D.SceneNode = function(options) {
 
   // Do not render this object until we receive a TF update
   this.visible = false;
+  this.layers.disable(0);
 
   // add the model
   this.add(object);
@@ -43,6 +44,7 @@ ROS3D.SceneNode = function(options) {
     // update the world
     this.updatePose(poseTransformed);
     this.visible = true;
+    this.layers.enable(0);
   };
 
   // listen for TF updates

src/visualization/interaction/Highlighter.js

@@ -97,6 +97,7 @@ ROS3D.Highlighter.prototype.makeEverythingInvisible = function (scene) {
          || currentObject instanceof THREE.Sprite ) {
       currentObject.previousVisibility = currentObject.visible;
       currentObject.visible = false;
+      currentObject.layers.disable(0); // Invisible
     }
   });
 };
@@ -113,13 +114,15 @@ ROS3D.Highlighter.prototype.makeHighlightedVisible = function (scene) {
       if ( currentObject instanceof THREE.Mesh || currentObject instanceof THREE.Line
            || currentObject instanceof THREE.Sprite ) {
         currentObject.visible = true;
+        currentObject.layers.enable(0); // Visible
       }
   };
 
   for (var uuid in this.hoverObjs) {
     var selectedObject = this.hoverObjs[uuid];
     // Make each selected object and all of its children visible
     selectedObject.visible = true;
+    selectedObject.layers.enable(0); // Visible
     selectedObject.traverse(makeVisible);
   }
 };
@@ -134,6 +137,11 @@ ROS3D.Highlighter.prototype.restoreVisibility = function (scene) {
   scene.traverse(function(currentObject) {
     if (currentObject.hasOwnProperty('previousVisibility')) {
       currentObject.visible = currentObject.previousVisibility;
+      if (currentObject.visible) {
+        currentObject.layers.enable(0); // Visible
+      } else {
+        currentObject.layers.disable(0); // Invisible
+      }
     }
   }.bind(this));
 };

src/visualization/interaction/OrbitControls.js

@@ -81,6 +81,7 @@ ROS3D.OrbitControls = function(options) {
     scene.add(this.axes);
     this.axes.traverse(function(obj) {
       obj.visible = false;
+      obj.layers.disable(0); // Invisible
     });
   }
 
@@ -376,13 +377,15 @@ ROS3D.OrbitControls.prototype.showAxes = function() {
 
   this.axes.traverse(function(obj) {
     obj.visible = true;
+    obj.layers.enable(0); // Visible
   });
   if (this.hideTimeout) {
     clearTimeout(this.hideTimeout);
   }
   this.hideTimeout = setTimeout(function() {
     that.axes.traverse(function(obj) {
       obj.visible = false;
+      obj.layers.disable(0); // Invisible
     });
     that.hideTimeout = false;
   }, 1000);