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

@@ -12,6 +12,13 @@ import ThreeScene from './internal/scene';
 import ThreeLoader from './internal/loader';
 import ThreeRenderer from './internal/renderer';
 
+type viewerTheme = {
+  gridColor: string,
+  groundColor: string,
+  backgroundColor: string,
+  centerLineColor: string,
+};
+
 type Props = {
   theme: string,
   source: {
@@ -32,7 +39,7 @@ class ThreeViewer extends React.PureComponent<Props, State> {
     else reject();
   });
 
-  static createOrbitControls(camera, canvas) {
+  static createOrbitControls(camera: any, canvas: any) {
     const controls = new THREE.OrbitControls(camera, canvas);
     // Controls configuration
     controls.enableDamping = true;
@@ -46,7 +53,7 @@ class ThreeViewer extends React.PureComponent<Props, State> {
     return controls;
   }
 
-  static fitMeshToCamera(group) {
+  static fitMeshToCamera(group: any) {
     const max = { x: 0, y: 0, z: 0 };
     const min = { x: 0, y: 0, z: 0 };
 
@@ -82,18 +89,6 @@ class ThreeViewer extends React.PureComponent<Props, State> {
     See: https://github.com/mrdoob/three.js/blob/dev/docs/scenes/js/material.js#L195
   */
 
-  static updateMaterial(material, geometry) {
-    material.vertexColors = +material.vertexColors; // Ensure number
-    material.side = +material.side; // Ensure number
-    material.needsUpdate = true;
-    // If Geometry needs update
-    if (geometry) {
-      geometry.verticesNeedUpdate = true;
-      geometry.normalsNeedUpdate = true;
-      geometry.colorsNeedUpdate = true;
-    }
-  }
-
   constructor(props: Props) {
     super(props);
     const { theme } = this.props;
@@ -124,6 +119,17 @@ class ThreeViewer extends React.PureComponent<Props, State> {
       isReady: false,
       isLoading: false,
     };
+    // Internal objects
+    this.gui = null;
+    this.grid = null;
+    this.mesh = null;
+    this.camera = null;
+    this.frameID = null;
+    this.renderer = null;
+    this.material = null;
+    this.geometry = null;
+    this.targetCenter = null;
+    this.bufferGeometry = null;
   }
 
   componentDidMount() {
@@ -187,7 +193,37 @@ class ThreeViewer extends React.PureComponent<Props, State> {
     }
   }
 
-  transformGroup(group) {
+  // Define component types
+  theme: viewerTheme;
+  themes: { dark: viewerTheme, light: viewerTheme };
+  materialColor: string;
+  // Too complex to add a custom type
+  // Posible solution: https://www.npmjs.com/package/@types/three
+  gui: any;
+  grid: any;
+  mesh: any;
+  scene: any;
+  camera: any;
+  frameID: any;
+  controls: any;
+  material: any;
+  geometry: any;
+  targetCenter: any;
+  bufferGeometry: any;
+
+  updateMaterial(material: any, geometry: any) {
+    this.material.vertexColors = +material.vertexColors; // Ensure number
+    this.material.side = +material.side; // Ensure number
+    this.material.needsUpdate = true;
+    // If Geometry needs update
+    if (geometry) {
+      this.geometry.verticesNeedUpdate = true;
+      this.geometry.normalsNeedUpdate = true;
+      this.geometry.colorsNeedUpdate = true;
+    }
+  }
+
+  transformGroup(group: any) {
     ThreeViewer.fitMeshToCamera(group);
 
     if (!this.targetCenter) {
@@ -203,9 +239,7 @@ class ThreeViewer extends React.PureComponent<Props, State> {
 
       const config = {
         color: this.materialColor,
-      };
-
-      config.reset = () => {
+        reset: () => {
           // Reset material color
           config.color = this.materialColor;
           // Reset material
@@ -217,6 +251,7 @@ class ThreeViewer extends React.PureComponent<Props, State> {
           this.controls.autoRotate = false;
           // Reset camera
           this.restoreCamera();
+        },
       };
 
       const materialFolder = this.gui.addFolder('Material');
@@ -240,7 +275,7 @@ class ThreeViewer extends React.PureComponent<Props, State> {
         .add(this.material, 'flatShading')
         .name('FlatShading')
         .onChange(() => {
-          ThreeViewer.updateMaterial(this.material);
+          this.updateMaterial(this.material);
         })
         .listen();
 
@@ -262,7 +297,7 @@ class ThreeViewer extends React.PureComponent<Props, State> {
     }
   }
 
-  createGeometry(data) {
+  createGeometry(data: any) {
     this.bufferGeometry = data;
     this.bufferGeometry.computeBoundingBox();
     this.bufferGeometry.center();
@@ -308,7 +343,7 @@ class ThreeViewer extends React.PureComponent<Props, State> {
     this.renderer.setSize(width, height);
   };
 
-  updateControlsTarget(point) {
+  updateControlsTarget(point: { x: number, y: number, z: number }) {
     this.controls.target.fromArray([point.x, point.y, point.z]);
     this.controls.update();
   }
@@ -319,7 +354,10 @@ class ThreeViewer extends React.PureComponent<Props, State> {
     this.updateControlsTarget(this.targetCenter);
   }
 
-  renderStl(data) {
+  // Flow requested to add it here
+  renderer: any;
+
+  renderStl(data: any) {
     this.createGeometry(data);
     this.mesh = new THREE.Mesh(this.geometry, this.material);
     this.mesh.name = 'model';
@@ -327,7 +365,7 @@ class ThreeViewer extends React.PureComponent<Props, State> {
     this.transformGroup(this.mesh);
   }
 
-  renderObj(event) {
+  renderObj(event: any) {
     const mesh = event.detail.loaderRootNode;
     this.mesh = new THREE.Group();
     this.mesh.name = 'model';
@@ -352,7 +390,7 @@ class ThreeViewer extends React.PureComponent<Props, State> {
     this.transformGroup(this.mesh);
   }
 
-  renderModel(fileType, parsedData) {
+  renderModel(fileType: string, parsedData: any) {
     const renderTypes = {
       stl: data => this.renderStl(data),
       obj: data => this.renderObj(data),