use three as modules

index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import * as THREE from 'three';
+import { JSONLoader } from 'three/src/loaders/JSONLoader.js';
 import { Interface } from 'doodle3d-slicer';
 import fileURL from '!url-loader!./models/shape.json';
 import { render } from 'react-dom';
@@ -20,7 +20,7 @@ const downloadGCode = ({ gcode: { gcode } }) => {
   fileSaver.saveAs(file);
 };
 
-const jsonLoader = new THREE.JSONLoader();
+const jsonLoader = new JSONLoader();
 jsonLoader.load(fileURL, geometry => {
   render((
     <MuiThemeProvider>

package.json

@@ -23,9 +23,10 @@
     "react-dom": "^16.0.0",
     "react-jss": "^7.2.0",
     "react-resize-detector": "^1.1.0",
-    "three": "^0.83.0"
+    "three": "^0.88.0"
   },
   "devDependencies": {
+    "raw-loader": "^0.5.1",
     "babel-plugin-inline-import": "^2.0.6",
     "babel-preset-stage-0": "^6.24.1",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",

src/interface/index.js

@@ -1,6 +1,7 @@
 import _ from 'lodash';
 import React from 'react';
-import * as THREE from 'three';
+import { Quaternion } from 'three/src/math/Quaternion.js';
+import { Vector3 } from 'three/src/math/Vector3.js';
 import PropTypes from 'proptypes';
 import { placeOnGround, createScene, fetchProgress, slice, TabTemplate } from './utils.js';
 import injectSheet from 'react-jss';
@@ -161,16 +162,13 @@ class Interface extends React.Component {
     }
   };
 
-  rotateX = () => this.rotate(new THREE.Vector3(0, 0, 1), Math.PI / 2.0);
-  rotateY = () => this.rotate(new THREE.Vector3(1, 0, 0), Math.PI / 2.0);
-  rotateZ = () => this.rotate(new THREE.Vector3(0, 1, 0), Math.PI / 2.0);
+  rotateX = () => this.rotate(new Vector3(0, 0, 1), Math.PI / 2.0);
+  rotateY = () => this.rotate(new Vector3(1, 0, 0), Math.PI / 2.0);
+  rotateZ = () => this.rotate(new Vector3(0, 1, 0), Math.PI / 2.0);
   rotate = (axis, angle) => {
     const { mesh, render } = this.state;
     if (mesh) {
-      const quaternion = new THREE.Quaternion();
-      quaternion.setFromAxisAngle(axis, angle);
-      mesh.quaternion.premultiply(quaternion);
-      mesh.updateMatrix();
+      mesh.rotateOnWorldAxis(axis, angle);
       placeOnGround(mesh);
       render();
     }

src/interface/utils.js

@@ -1,4 +1,16 @@
 import * as THREE from 'three';
+import { Box3 } from 'three/src/math/Box3.js';
+import { Matrix4 } from 'three/src/math/Matrix4.js';
+import { Scene } from 'three/src/scenes/Scene.js';
+import { PerspectiveCamera } from 'three/src/cameras/PerspectiveCamera.js';
+import { AmbientLight } from 'three/src/lights/AmbientLight.js';
+import { DirectionalLight } from 'three/src/lights/DirectionalLight.js';
+import { MeshPhongMaterial } from 'three/src/materials/MeshPhongMaterial.js';
+import { BoxGeometry } from 'three/src/geometries/BoxGeometry.js';
+import { Mesh } from 'three/src/objects/Mesh.js';
+import { BoxHelper } from 'three/src/helpers/BoxHelper.js';
+import { WebGLRenderer } from 'three/src/renderers/WebGLRenderer.js';
+import { DoubleSide } from 'three/src/constants.js';
 import 'three/examples/js/controls/EditorControls';
 import printerSettings from '../settings/printer.yml';
 import materialSettings from '../settings/material.yml';
@@ -8,7 +20,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 export function placeOnGround(mesh) {
-  const boundingBox = new THREE.Box3().setFromObject(mesh);
+  const boundingBox = new Box3().setFromObject(mesh);
 
   mesh.position.y -= boundingBox.min.y;
   mesh.updateMatrix();
@@ -21,30 +33,30 @@ export function createScene(canvas, props, state) {
   // center geometry
   geometry.computeBoundingBox();
   const center = geometry.boundingBox.getCenter();
-  geometry.applyMatrix(new THREE.Matrix4().makeTranslation(-center.x, -center.y, -center.z));
+  geometry.applyMatrix(new Matrix4().makeTranslation(-center.x, -center.y, -center.z));
 
-  const scene = new THREE.Scene();
+  const scene = new Scene();
 
-  const camera = new THREE.PerspectiveCamera(50, 1, 1, 10000);
+  const camera = new PerspectiveCamera(50, 1, 1, 10000);
   camera.position.set(0, 400, 300);
 
-  const directionalLightA = new THREE.DirectionalLight(0xa2a2a2);
+  const directionalLightA = new DirectionalLight(0xa2a2a2);
   directionalLightA.position.set(1, 1, 1);
   scene.add(directionalLightA);
 
-  const directionalLightB = new THREE.DirectionalLight(0xa2a2a2);
+  const directionalLightB = new DirectionalLight(0xa2a2a2);
   directionalLightB.position.set(-1, 1, -1);
   scene.add(directionalLightB);
 
-  const light = new THREE.AmbientLight(0x656565);
+  const light = new AmbientLight(0x656565);
   scene.add(light);
 
-  const material = new THREE.MeshPhongMaterial({ color: 0x2194ce, side: THREE.DoubleSide, specular: 0xc5c5c5, shininess: 5 });
-  const mesh = new THREE.Mesh(geometry, material);
+  const material = new MeshPhongMaterial({ color: 0x2194ce, side: DoubleSide, specular: 0xc5c5c5, shininess: 5 });
+  const mesh = new Mesh(geometry, material);
   placeOnGround(mesh);
   scene.add(mesh);
 
-  const box = new THREE.BoxHelper(new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1).applyMatrix(new THREE.Matrix4().makeTranslation(0, 0.5, 0))), 0x72bcd4);
+  const box = new BoxHelper(new Mesh(new BoxGeometry(1, 1, 1).applyMatrix(new Matrix4().makeTranslation(0, 0.5, 0))), 0x72bcd4);
   scene.add(box);
 
   const { dimensions } = settings;
@@ -66,7 +78,7 @@ export function createScene(canvas, props, state) {
   const updateCanvas = (canvas) => {
     if (!renderer || renderer.domElement !== canvas) {
       if (renderer) renderer.dispose();
-      renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true });
+      renderer = new WebGLRenderer({ canvas, alpha: true, antialias: true });
       renderer.setClearColor(0xffffff, 0);
     }
     if (!editorControls || editorControls.domElement !== canvas) {
@@ -106,14 +118,16 @@ const GCODE_SERVER_URL = 'https://gcodeserver.doodle3d.com';
 const CONNECT_URL = 'http://connect.doodle3d.com/';
 
 export async function slice(name, mesh, settings, printers, quality, material, updateProgress) {
+  if (!printers) throw new Error('Please select a printer');
+
   const { dimensions } = settings;
   const centerX = dimensions.x / 2;
   const centerY = dimensions.y / 2;
 
   const geometry = mesh.geometry.clone();
   mesh.updateMatrix();
 
-  const matrix = new THREE.Matrix4().makeTranslation(centerY, 0, centerX).multiply(mesh.matrix);
+  const matrix = new Matrix4().makeTranslation(centerY, 0, centerX).multiply(mesh.matrix);
   const { gcode } = await sliceGeometry(settings, geometry, matrix, false, false, ({ progress }) => {
     updateProgress({
       action: progress.action,

src/sliceActions/calculateLayersIntersections.js

@@ -1,4 +1,4 @@
-import * as THREE from 'three';
+import { Vector2 } from 'three/src/math/Vector2.js';
 
 export default function calculateLayersIntersections(lines, settings) {
   const {
@@ -38,7 +38,7 @@ export default function calculateLayersIntersections(lines, settings) {
           z = line.end.z * alpha + line.start.z * alpha1;
         }
 
-        layerIntersectionPoints[layerIndex][lineIndex] = new THREE.Vector2(z, x);
+        layerIntersectionPoints[layerIndex][lineIndex] = new Vector2(z, x);
       }
     }
   }

src/sliceActions/createLines.js

@@ -1,11 +1,12 @@
-import * as THREE from 'three';
+import { Line3 } from 'three/src/math/Line3.js';
+import { Vector2 } from 'three/src/math/Vector2.js';
 
 function addLine(geometry, lineLookup, lines, a, b, isFlat) {
   const index = lines.length;
   lineLookup[`${a}_${b}`] = index;
 
   lines.push({
-    line: new THREE.Line3(geometry.vertices[a], geometry.vertices[b]),
+    line: new Line3(geometry.vertices[a], geometry.vertices[b]),
     connects: [],
     normals: [],
     isFlat
@@ -38,7 +39,7 @@ export default function createLines(geometry, settings) {
     lines[lineIndexB].connects.push(lineIndexC, lineIndexA);
     lines[lineIndexC].connects.push(lineIndexA, lineIndexB);
 
-    const normal = new THREE.Vector2(face.normal.z, face.normal.x).normalize();
+    const normal = new Vector2(face.normal.z, face.normal.x).normalize();
     lines[lineIndexA].normals.push(normal);
     lines[lineIndexB].normals.push(normal);
     lines[lineIndexC].normals.push(normal);

src/sliceActions/helpers/GCode.js

@@ -1,4 +1,4 @@
-import * as THREE from 'three';
+import { Vector2 } from 'three/src/math/Vector2.js';
 import { PRECISION } from '../../constants.js';
 
 export const MOVE = 'G';
@@ -16,7 +16,7 @@ export default class {
 
     this._gcode = [];
     this._currentValues = {};
-    this._nozzlePosition = new THREE.Vector2(0, 0);
+    this._nozzlePosition = new Vector2(0, 0);
     this._extruder = 0.0;
     this._duration = 0.0;
     this._isRetracted = false;
@@ -47,7 +47,7 @@ export default class {
   }
 
   moveTo(x, y, z, { speed }) {
-    const newNozzlePosition = new THREE.Vector2(x, y).multiplyScalar(PRECISION);
+    const newNozzlePosition = new Vector2(x, y).multiplyScalar(PRECISION);
     const lineLength = this._nozzlePosition.distanceTo(newNozzlePosition);
 
     this._duration += lineLength / speed;
@@ -66,7 +66,7 @@ export default class {
   }
 
   lineTo(x, y, z, { speed, flowRate }) {
-    const newNozzlePosition = new THREE.Vector2(x, y).multiplyScalar(PRECISION);
+    const newNozzlePosition = new Vector2(x, y).multiplyScalar(PRECISION);
     const lineLength = this._nozzlePosition.distanceTo(newNozzlePosition);
 
     this._extruder += this._nozzleToFilamentRatio * lineLength * flowRate;

src/sliceActions/intersectionsToShapes.js

@@ -1,4 +1,4 @@
-import * as THREE from 'three';
+import { Vector2 } from 'three/src/math/Vector2.js';
 import Shape from 'clipper-js';
 
 export default function intersectionsToShapes(layerIntersectionIndexes, layerIntersectionPoints, lines, settings) {
@@ -48,8 +48,8 @@ export default function intersectionsToShapes(layerIntersectionIndexes, layerInt
           if (typeof intersectionPoints[index] !== 'undefined') {
             const faceNormal = faceNormals[Math.floor(i / 2)];
 
-            const a = new THREE.Vector2(intersection.x, intersection.y);
-            const b = new THREE.Vector2(intersectionPoints[index].x, intersectionPoints[index].y);
+            const a = new Vector2(intersection.x, intersection.y);
+            const b = new Vector2(intersectionPoints[index].x, intersectionPoints[index].y);
 
             // can't calculate normal between points if distance is smaller as 0.0001
             if ((faceNormal.x === 0 && faceNormal.y === 0) || a.distanceTo(b) < 0.0001) {
@@ -64,7 +64,7 @@ export default function intersectionsToShapes(layerIntersectionIndexes, layerInt
               index = -1;
             } else {
               // make sure the path goes the right direction
-              // THREE.Vector2.normal is not yet implimented
+              // Vector2.normal is not yet implimented
               // const normal = a.sub(b).normal().normalize();
               const normal = a.sub(b);
               normal.set(-normal.y, normal.x).normalize();
@@ -111,7 +111,7 @@ export default function intersectionsToShapes(layerIntersectionIndexes, layerInt
         if (openShape) {
           lineShapesOpen.push(shape);
         } else {
-          lineShapesClosed.push(shape);          
+          lineShapesClosed.push(shape);
         }
       } else {
         fillShapes.push(shape);

src/sliceActions/optimizePaths.js

@@ -1,8 +1,8 @@
-import * as THREE from 'three';
+import { Vector2 } from 'three/src/math/Vector2.js';
 import Shape from 'clipper-js';
 
 export default function optimizePaths(slices, settings) {
-  const start = new THREE.Vector2(0, 0);
+  const start = new Vector2(0, 0);
 
   for (let layer = 0; layer < slices.length; layer ++) {
     const slice = slices[layer];
@@ -102,7 +102,7 @@ function optimizeShape(shape, start) {
 
       if (shape.closed) {
         for (let j = 0; j < path.length; j += 1) {
-          const point = new THREE.Vector2().copy(path[j]);
+          const point = new Vector2().copy(path[j]);
           const length = point.sub(start).length();
           if (minLength === false || length < minLength) {
             minPath = path;
@@ -112,7 +112,7 @@ function optimizeShape(shape, start) {
           }
         }
       } else {
-        const startPoint = new THREE.Vector2().copy(path[0]);
+        const startPoint = new Vector2().copy(path[0]);
         const lengthToStart = startPoint.sub(start).length();
         if (minLength === false || lengthToStart < minLength) {
           minPath = path;
@@ -121,7 +121,7 @@ function optimizeShape(shape, start) {
           pathIndex = i;
         }
 
-        const endPoint = new THREE.Vector2().copy(path[path.length - 1]);
+        const endPoint = new Vector2().copy(path[path.length - 1]);
         const lengthToEnd = endPoint.sub(start).length();
         if (lengthToEnd < minLength) {
           minPath = path;

src/sliceActions/slice.js

@@ -1,4 +1,9 @@
-import * as THREE from 'three';
+import { Color } from 'three/src/math/Color.js';
+import { BufferGeometry } from 'three/src/core/BufferGeometry.js';
+import { BufferAttribute } from 'three/src/core/BufferAttribute.js';
+import { LineBasicMaterial } from 'three/src/materials/LineBasicMaterial.js';
+import { VertexColors } from 'three/src/constants.js';
+import { LineSegments } from 'three/src/objects/LineSegments.js';
 import calculateLayersIntersections from './calculateLayersIntersections.js';
 import createLines from './createLines.js';
 import generateInfills from './generateInfills.js';
@@ -99,7 +104,7 @@ function gcodeToString(gcode) {
 }
 
 const MAX_SPEED = 100 * 60;
-const COLOR = new THREE.Color();
+const COLOR = new Color();
 function createGcodeGeometry(gcode) {
   const positions = [];
   const colors = [];
@@ -121,13 +126,13 @@ function createGcodeGeometry(gcode) {
     }
   }
 
-  const geometry = new THREE.BufferGeometry();
+  const geometry = new BufferGeometry();
 
-  geometry.addAttribute('position', new THREE.BufferAttribute(new Float32Array(positions), 3));
-  geometry.addAttribute('color', new THREE.BufferAttribute(new Float32Array(colors), 3));
+  geometry.addAttribute('position', new BufferAttribute(new Float32Array(positions), 3));
+  geometry.addAttribute('color', new BufferAttribute(new Float32Array(colors), 3));
 
-  const material = new THREE.LineBasicMaterial({ vertexColors: THREE.VertexColors });
-  const linePreview = new THREE.LineSegments(geometry, material);
+  const material = new LineBasicMaterial({ vertexColors: VertexColors });
+  const linePreview = new LineSegments(geometry, material);
 
   return linePreview;
 }