diff --git a/package.json b/package.json index a8c5a22bb..8af544d5f 100644 --- a/package.json +++ b/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" }, diff --git a/src/renderer/component/viewers/threeViewer/index.jsx b/src/renderer/component/viewers/threeViewer/index.jsx index 17ec8daa2..331481a8d 100644 --- a/src/renderer/component/viewers/threeViewer/index.jsx +++ b/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 { 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 { 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 { 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 { 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 { this.renderer = ThreeRenderer({ antialias: true, shadowMap: true, + gammaCorrection: true, }); this.scene = ThreeScene({ @@ -304,7 +298,6 @@ class ThreeViewer extends React.PureComponent { // 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 { // 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 { viewer.appendChild(canvas); const updateScene = () => { - requestAnimationFrame(updateScene); - this.controls.update(); + this.frameID = requestAnimationFrame(updateScene); + // this.controls.update(); this.renderer.render(this.scene, this.camera); }; diff --git a/src/renderer/component/viewers/threeViewer/internal/grid.js b/src/renderer/component/viewers/threeViewer/internal/grid.js index 0793c6913..ad0020172 100644 --- a/src/renderer/component/viewers/threeViewer/internal/grid.js +++ b/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; }; diff --git a/src/renderer/component/viewers/threeViewer/internal/renderer.js b/src/renderer/component/viewers/threeViewer/internal/renderer.js index 11b6c0545..7ddefd48a 100644 --- a/src/renderer/component/viewers/threeViewer/internal/renderer.js +++ b/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; }; diff --git a/yarn.lock b/yarn.lock index f6c146064..d4a14e31e 100644 --- a/yarn.lock +++ b/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"