fix 3d transparency

src/d3/ShapeMesh.js

@@ -36,10 +36,9 @@ class ShapeMesh extends THREE.Object3D {
       });
     }
 
-    this._mesh = new THREE.Mesh(new THREE.BufferGeometry(), material);
+    this._mesh = new THREE.Mesh(new THREE.BufferGeometry(), material.clone());
     this._mesh.name = shapeData.UID;
     this._mesh.isShapeMesh = true;
-    this.add(this._mesh);
 
     this._toonShader = toonShader;
 
@@ -60,10 +59,9 @@ class ShapeMesh extends THREE.Object3D {
     this._fill = fill;
     this.updatePoints(shapeData);
 
-    this._holeMesh = new THREE.Mesh(new THREE.Geometry().fromBufferGeometry(this._mesh.geometry), material);
+    this._holeMesh = new THREE.Mesh(new THREE.Geometry().fromBufferGeometry(this._mesh.geometry), material.clone());
     this._holeMesh.name = shapeData.UID;
     this._holeMesh.isShapeMesh = true;
-    this.add(this._holeMesh);
 
     this.updateSolid(solid, active);
   }
@@ -141,6 +139,11 @@ class ShapeMesh extends THREE.Object3D {
     return changed;
   }
 
+  setOpaque(opaque) {
+    this._holeMesh.material.opacity = opaque ? 1.0 : DESELECT_TRANSPARENCY;
+    this._holeMesh.material.transparent = !opaque;
+  }
+
   dispose() {
     this._mesh.geometry.dispose();
     this._holeMesh.geometry.dispose();
@@ -218,7 +221,7 @@ class ShapeMesh extends THREE.Object3D {
       throw new Error(`Cannot update object ${this.name}: color is an invalid value.`);
     }
 
-    this._mesh.material.color.setHex(color);
+    this._holeMesh.material.color.setHex(color);
     this._color = color;
   }
 

src/d3/ShapesManager.js

@@ -112,6 +112,13 @@ export default class ShapesManager extends THREE.Object3D {
   }
 
   updateTransparent(selectedUIDs) {
+    for (const UID in this._meshes) {
+      const { mesh } = this._meshes[UID];
+      const selected = selectedUIDs.indexOf(UID) !== -1;
+      const opaque = selected || selectedUIDs.length === 0;
+
+      mesh.setOpaque(opaque);
+    }
   }
 
   _handleShapeRemove(id) {