package.json

@@ -81,7 +81,7 @@
     "shapeshift.io": "^1.3.1",
     "source-map-support": "^0.5.4",
     "stream-to-blob-url": "^2.1.1",
-    "three": "^0.93.0",
+    "three": "^0.95.0",
     "tree-kill": "^1.1.0",
     "y18n": "^4.0.0"
   },

src/renderer/component/viewers/threeViewer/index.jsx

@@ -19,7 +19,7 @@ type Props = {
 };
 
 type State = {
-  error?: string,
+  error: ?string,
   isReady: boolean,
   isLoading: boolean,
 };
@@ -138,11 +138,18 @@ class ThreeViewer extends React.PureComponent<Props, State> {
     window.removeEventListener('resize', this.handleResize, false);
 
     // Free memory
-    if (this.mesh) {
+    if (this.renderer && this.mesh) {
+      // Debug
+      console.info('before', this.renderer.info.programs.length);
       // Clean up group
       this.scene.remove(this.mesh);
       if (this.mesh.geometry) this.mesh.geometry.dispose();
       if (this.mesh.material) this.mesh.material.dispose();
+      // Clean up shared material
+      this.material.dispose();
+      // Clean up grid
+      this.grid.material.dispose();
+      this.grid.geometry.dispose();
       // Clean up group items
       this.mesh.traverse(child => {
         if (child instanceof THREE.Mesh) {
@@ -150,18 +157,23 @@ class ThreeViewer extends React.PureComponent<Props, State> {
           if (child.material) child.material.dispose();
         }
       });
-
       // It's unclear if we need this:
-      // https://github.com/mrdoob/three.js/issues/12447
-      this.mesh = null;
       this.renderer.renderLists.dispose();
       this.renderer.dispose();
+      // Debug
+      console.info('after', this.renderer.info.programs.length);
+      // Stop animation
+      cancelAnimationFrame(this.frameID);
+      // Empty objects
+      this.grid = null;
+      this.mesh = null;
+      this.material = null;
+      this.renderer = null;
     }
   }
 
   transformGroup(group) {
     ThreeViewer.fitMeshToCamera(group);
-    this.createWireFrame(group);
     this.updateControlsTarget(group.position);
   }
 
@@ -179,24 +191,6 @@ class ThreeViewer extends React.PureComponent<Props, State> {
     return controls;
   }
 
-  createWireFrame(group) {
-    const wireframeGeometry = new THREE.WireframeGeometry(group.geometry);
-    const wireframeMaterial = new THREE.LineBasicMaterial({
-      opacity: 0,
-      transparent: true,
-      linewidth: 1,
-    });
-    // Set material color
-    wireframeMaterial.color.set(this.materialColors.green);
-    this.wireframe = new THREE.LineSegments(wireframeGeometry, wireframeMaterial);
-    group.add(this.wireframe);
-  }
-
-  toggleWireFrame(show = false) {
-    this.wireframe.opacity = show ? 1 : 0;
-    this.mesh.material.opacity = show ? 0 : 1;
-  }
-
   startLoader() {
     const { source } = this.props;
 
@@ -233,7 +227,6 @@ class ThreeViewer extends React.PureComponent<Props, State> {
     if (!this.mesh) return;
     const pickColor = this.materialColors[color] || this.materialColors.green;
     this.mesh.material.color.set(pickColor);
-    this.wireframe.material.color.set(pickColor);
   }
 
   updateControlsTarget(point) {
@@ -290,6 +283,7 @@ class ThreeViewer extends React.PureComponent<Props, State> {
     this.renderer = ThreeRenderer({
       antialias: true,
       shadowMap: true,
+      gammaCorrection: true,
     });
 
     this.scene = ThreeScene({
@@ -304,7 +298,6 @@ class ThreeViewer extends React.PureComponent<Props, State> {
     // Grid
     this.grid = ThreeGrid({ size: 100, gridColor, centerLineColor });
     this.scene.add(this.grid);
-
     // Camera
     this.camera = new THREE.PerspectiveCamera(80, width / height, 0.1, 1000);
     this.camera.position.set(-9.5, 14, 11);
@@ -317,13 +310,8 @@ class ThreeViewer extends React.PureComponent<Props, State> {
 
     // Create model material
     this.material = new THREE.MeshPhongMaterial({
-      // opacity: 1,
-      // transparent: true,
       depthWrite: true,
       vertexColors: THREE.FaceColors,
-      // Positive value pushes polygon further away
-      // polygonOffsetFactor: 1,
-      // polygonOffsetUnits: 1,
     });
 
     // Set material color
@@ -336,8 +324,8 @@ class ThreeViewer extends React.PureComponent<Props, State> {
     viewer.appendChild(canvas);
 
     const updateScene = () => {
-      requestAnimationFrame(updateScene);
-      this.controls.update();
+      this.frameID = requestAnimationFrame(updateScene);
+      // this.controls.update();
       this.renderer.render(this.scene, this.camera);
     };
 

src/renderer/component/viewers/threeViewer/internal/grid.js

@@ -3,10 +3,8 @@ import { GridHelper, Color } from './three';
 const ThreeGrid = ({ size, gridColor, centerLineColor }) => {
   const divisions = size / 2;
   const grid = new GridHelper(size, divisions, new Color(centerLineColor), new Color(gridColor));
-
   grid.material.opacity = 0.4;
   grid.material.transparent = true;
-
   return grid;
 };
 

src/renderer/component/viewers/threeViewer/internal/renderer.js

@@ -1,14 +1,13 @@
 import { WebGLRenderer } from './three';
 
-const ThreeRenderer = ({ antialias, shadowMap }) => {
-  const renderer = new WebGLRenderer({
-    antialias,
-  });
+const ThreeRenderer = ({ antialias, shadowMap, gammaCorrection }) => {
+  const renderer = new WebGLRenderer({ antialias });
   // Renderer configuration
   renderer.setPixelRatio(window.devicePixelRatio);
-  renderer.gammaInput = true;
-  renderer.gammaOutput = true;
-  renderer.shadowMap.enabled = shadowMap;
+  renderer.gammaInput = gammaCorrection || false;
+  renderer.gammaOutput = gammaCorrection || false;
+  renderer.shadowMap.enabled = shadowMap || false;
+  renderer.shadowMap.autoUpdate = false;
   return renderer;
 };
 

yarn.lock

@@ -9201,9 +9201,9 @@ then-request@^2.0.1:
     promise "^7.1.1"
     qs "^6.1.0"
 
-three@^0.93.0:
-  version "0.93.0"
-  resolved "https://registry.yarnpkg.com/three/-/three-0.93.0.tgz#3fd6c367ef4554abbb6e16ad69936283e895c123"
+three@^0.95.0:
+  version "0.95.0"
+  resolved "https://registry.yarnpkg.com/three/-/three-0.95.0.tgz#b60ea076ba17df9faba9e855b86ab3f541289abf"
 
 throttleit@0.0.2:
   version "0.0.2"