From d4743ef867796adf36ef8235f0c1553011c83be5 Mon Sep 17 00:00:00 2001 From: casperlamboo Date: Thu, 18 Jan 2018 12:06:14 +0100 Subject: [PATCH] improve bundle size --- src/interface/index.js | 18 ++++++-------- src/interface/utils.js | 41 +++++++++++-------------------- src/sliceActions/createLines.js | 4 +-- src/sliceActions/helpers/GCode.js | 8 +++--- src/sliceActions/optimizePaths.js | 10 ++++---- src/sliceActions/slice.js | 19 ++++++-------- src/slicer.js | 23 +++++++---------- src/slicer.worker.js | 5 ++-- webpack.config.js | 3 ++- 9 files changed, 52 insertions(+), 79 deletions(-) diff --git a/src/interface/index.js b/src/interface/index.js index 0bd4969..10b94ff 100644 --- a/src/interface/index.js +++ b/src/interface/index.js @@ -1,9 +1,6 @@ +import * as THREE from 'three'; import _ from 'lodash'; import React from 'react'; -import { Quaternion } from 'three/src/math/Quaternion.js'; -import { Vector3 } from 'three/src/math/Vector3.js'; -import { Mesh } from 'three/src/objects/Mesh.js'; -import { Box3 } from 'three/src/math/Box3.js'; import PropTypes from 'proptypes'; import { centerGeometry, placeOnGround, createScene, fetchProgress, slice, TabTemplate } from './utils.js'; import injectSheet from 'react-jss'; @@ -21,7 +18,6 @@ import ReactResizeDetector from 'react-resize-detector'; import JSONToSketchData from 'doodle3d-core/shape/JSONToSketchData'; import createSceneData from 'doodle3d-core/d3/createSceneData.js'; import { generateExportMesh } from 'doodle3d-core/utils/exportUtils.js'; -import { Matrix4 } from 'three/src/math/Matrix4.js'; import muiThemeable from 'material-ui/styles/muiThemeable'; import Dialog from 'material-ui/Dialog'; @@ -145,7 +141,7 @@ class Interface extends React.Component { .then(resonse => resonse.json()) .then(json => JSONToSketchData(json)) .then(file => createSceneData(file)) - .then(sketch => generateExportMesh(sketch, { offsetSingleWalls: false, matrix: new Matrix4() })) + .then(sketch => generateExportMesh(sketch, { offsetSingleWalls: false, matrix: new THREE.Matrix4() })) .then(mesh => this.updateMesh(mesh)); }; @@ -194,9 +190,9 @@ class Interface extends React.Component { } }; - 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); + 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); rotate = (axis, angle) => { const { scene: { mesh, render }, isSlicing } = this.state; if (isSlicing) return; @@ -221,7 +217,7 @@ class Interface extends React.Component { this.closePopover(); this.setState({ isSlicing: true, progress: { action: '', percentage: 0, step: 0 }, error: null }); - const exportMesh = new Mesh(mesh.geometry, mesh.material); + const exportMesh = new THREE.Mesh(mesh.geometry, mesh.material); exportMesh.applyMatrix(matrix); try { @@ -292,7 +288,7 @@ class Interface extends React.Component { calculateDimensions = () => { const { scene: { mesh } } = this.state; - const { x, y, z } = new Box3().setFromObject(mesh).getSize(); + const { x, y, z } = new THREE.Box3().setFromObject(mesh).getSize(); this.setState({ objectDimensions: `${Math.round(x)}x${Math.round(y)}x${Math.round(z)}mm` }); }; diff --git a/src/interface/utils.js b/src/interface/utils.js index 7f98ec4..4f2b811 100644 --- a/src/interface/utils.js +++ b/src/interface/utils.js @@ -1,17 +1,4 @@ import * as THREE from 'three'; -import { Box3 } from 'three/src/math/Box3.js'; -import { Matrix4 } from 'three/src/math/Matrix4.js'; -import { Vector3 } from 'three/src/math/Vector3.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'; @@ -23,7 +10,7 @@ import PropTypes from 'prop-types'; import fileSaver from 'file-saver'; export function placeOnGround(mesh) { - const boundingBox = new Box3().setFromObject(mesh); + const boundingBox = new THREE.Box3().setFromObject(mesh); mesh.position.y -= boundingBox.min.y; mesh.updateMatrix(); @@ -33,35 +20,35 @@ export function centerGeometry(mesh) { // center geometry mesh.geometry.computeBoundingBox(); const center = mesh.geometry.boundingBox.getCenter(); - mesh.geometry.applyMatrix(new Matrix4().makeTranslation(-center.x, -center.y, -center.z)); + mesh.geometry.applyMatrix(new THREE.Matrix4().makeTranslation(-center.x, -center.y, -center.z)); } export function createScene({ pixelRatio, muiTheme }) { - const scene = new Scene(); + const scene = new THREE.Scene(); - const camera = new PerspectiveCamera(50, 1, 1, 10000); + const camera = new THREE.PerspectiveCamera(50, 1, 1, 10000); camera.position.set(0, 400, 300); - camera.lookAt(new Vector3(0, 0, 0)); + camera.lookAt(new THREE.Vector3(0, 0, 0)); - const directionalLightA = new DirectionalLight(0xa2a2a2); + const directionalLightA = new THREE.DirectionalLight(0xa2a2a2); directionalLightA.position.set(1, 1, 1); scene.add(directionalLightA); - const directionalLightB = new DirectionalLight(0xa2a2a2); + const directionalLightB = new THREE.DirectionalLight(0xa2a2a2); directionalLightB.position.set(-1, 1, -1); scene.add(directionalLightB); - const light = new AmbientLight(0x656565); + const light = new THREE.AmbientLight(0x656565); scene.add(light); - const material = new MeshPhongMaterial({ color: muiTheme.palette.primary2Color, side: DoubleSide, specular: 0xc5c5c5, shininess: 5 }); - const mesh = new Mesh(new THREE.Geometry(), material); + const material = new THREE.MeshPhongMaterial({ color: muiTheme.palette.primary2Color, side: THREE.DoubleSide, specular: 0xc5c5c5, shininess: 5 }); + const mesh = new THREE.Mesh(new THREE.Geometry(), material); scene.add(mesh); - const box = new BoxHelper(new Mesh(new BoxGeometry(1, 1, 1).applyMatrix(new Matrix4().makeTranslation(0, 0.5, 0))), muiTheme.palette.primary2Color); + const box = new THREE.BoxHelper(new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1).applyMatrix(new THREE.Matrix4().makeTranslation(0, 0.5, 0))), muiTheme.palette.primary2Color); scene.add(box); - let renderer = new WebGLRenderer({ alpha: true, antialias: true }); + let renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }); let editorControls = new THREE.EditorControls(camera, renderer.domElement); box.scale.set(1., 1., 1.); @@ -80,7 +67,7 @@ export function createScene({ pixelRatio, muiTheme }) { const updateCanvas = (canvas) => { if (!renderer || renderer.domElement !== canvas) { if (renderer) renderer.dispose(); - renderer = new WebGLRenderer({ canvas, alpha: true, antialias: true }); + renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true }); renderer.setClearColor(0xffffff, 0); } if (!editorControls || editorControls.domElement !== canvas) { @@ -138,7 +125,7 @@ export async function slice(target, name, mesh, settings, updateProgress) { const centerX = dimensions.x / 2; const centerY = dimensions.y / 2; - const matrix = new Matrix4().makeTranslation(centerY, 0, centerX).multiply(mesh.matrix); + const matrix = new THREE.Matrix4().makeTranslation(centerY, 0, centerX).multiply(mesh.matrix); const { gcode } = await sliceGeometry(settings, mesh.geometry, mesh.material, matrix, false, false, ({ progress }) => { updateProgress({ action: progress.action, diff --git a/src/sliceActions/createLines.js b/src/sliceActions/createLines.js index 62b7c19..e9f9fd2 100644 --- a/src/sliceActions/createLines.js +++ b/src/sliceActions/createLines.js @@ -1,4 +1,4 @@ -import { Line3 } from 'three/src/math/Line3.js'; +import * as THREE from 'three'; import { normalize } from './helpers/VectorUtils.js'; function addLine(geometry, lineLookup, lines, a, b, faceIndex) { @@ -9,7 +9,7 @@ function addLine(geometry, lineLookup, lines, a, b, faceIndex) { index = lines.length; lineLookup[`${a}_${b}`] = index; - const line = new Line3(geometry.vertices[a], geometry.vertices[b]); + const line = new THREE.Line3(geometry.vertices[a], geometry.vertices[b]); lines.push({ line, faces: [] }); } diff --git a/src/sliceActions/helpers/GCode.js b/src/sliceActions/helpers/GCode.js index cf2fbb4..ea51272 100644 --- a/src/sliceActions/helpers/GCode.js +++ b/src/sliceActions/helpers/GCode.js @@ -1,4 +1,4 @@ -import { Vector2 } from 'three/src/math/Vector2.js'; +import * as THREE from 'three'; import { PRECISION, VERSION } from '../../constants.js'; export const MOVE = 'G'; @@ -16,7 +16,7 @@ export default class { this._gcode = [`; Generated with Doodle3D Slicer V${VERSION}`]; this._currentValues = {}; - this._nozzlePosition = new Vector2(0, 0); + this._nozzlePosition = new THREE.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 Vector2(x, y).multiplyScalar(PRECISION); + const newNozzlePosition = new THREE.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 Vector2(x, y).multiplyScalar(PRECISION); + const newNozzlePosition = new THREE.Vector2(x, y).multiplyScalar(PRECISION); const lineLength = this._nozzlePosition.distanceTo(newNozzlePosition); this._extruder += this._nozzleToFilamentRatio * lineLength * flowRate; diff --git a/src/sliceActions/optimizePaths.js b/src/sliceActions/optimizePaths.js index 661e7e0..18043ef 100644 --- a/src/sliceActions/optimizePaths.js +++ b/src/sliceActions/optimizePaths.js @@ -1,8 +1,8 @@ -import { Vector2 } from 'three/src/math/Vector2.js'; +import * as THREE from 'three'; import Shape from 'clipper-js'; export default function optimizePaths(slices, settings) { - const start = new Vector2(0, 0); + const start = new THREE.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 Vector2().copy(path[j]); + const point = new THREE.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 Vector2().copy(path[0]); + const startPoint = new THREE.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 Vector2().copy(path[path.length - 1]); + const endPoint = new THREE.Vector2().copy(path[path.length - 1]); const lengthToEnd = endPoint.sub(start).length(); if (lengthToEnd < minLength) { minPath = path; diff --git a/src/sliceActions/slice.js b/src/sliceActions/slice.js index a7064e3..fcd13fc 100644 --- a/src/sliceActions/slice.js +++ b/src/sliceActions/slice.js @@ -1,9 +1,4 @@ -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 * as THREE from 'three'; import calculateLayersIntersections from './calculateLayersIntersections.js'; import createLines from './createLines.js'; import generateInfills from './generateInfills.js'; @@ -98,7 +93,7 @@ function gcodeToString(gcode) { } const MAX_SPEED = 100 * 60; -const COLOR = new Color(); +const COLOR = new THREE.Color(); function createGcodeGeometry(gcode) { const positions = []; const colors = []; @@ -123,13 +118,13 @@ function createGcodeGeometry(gcode) { } } - const geometry = new BufferGeometry(); + const geometry = new THREE.BufferGeometry(); - geometry.addAttribute('position', new BufferAttribute(new Float32Array(positions), 3)); - geometry.addAttribute('color', new BufferAttribute(new Float32Array(colors), 3)); + geometry.addAttribute('position', new THREE.BufferAttribute(new Float32Array(positions), 3)); + geometry.addAttribute('color', new THREE.BufferAttribute(new Float32Array(colors), 3)); - const material = new LineBasicMaterial({ vertexColors: VertexColors }); - const linePreview = new LineSegments(geometry, material); + const material = new THREE.LineBasicMaterial({ vertexColors: THREE.VertexColors }); + const linePreview = new THREE.LineSegments(geometry, material); return linePreview; } diff --git a/src/slicer.js b/src/slicer.js index 5341d9f..c49ec2e 100644 --- a/src/slicer.js +++ b/src/slicer.js @@ -1,11 +1,6 @@ -import { VertexColors } from 'three/src/constants.js'; -import { BufferAttribute } from 'three/src/core/BufferAttribute.js'; -import { LineBasicMaterial } from 'three/src/materials/LineBasicMaterial.js'; -import { LineSegments } from 'three/src/objects/LineSegments.js'; +import * as THREE from 'three'; import slice from './sliceActions/slice.js'; import SlicerWorker from './slicer.worker.js'; -import { FrontSide, DoubleSide } from 'three/src/constants.js'; -import { BufferGeometry } from 'three/src/core/BufferGeometry.js' export function sliceMesh(settings, mesh, sync = false, constructLinePreview = false, onProgress) { if (!mesh || !mesh.isMesh) { @@ -21,7 +16,7 @@ export function sliceGeometry(settings, geometry, materials, matrix, sync = fals if (!geometry) { throw new Error('Missing required geometry argument'); } else if (geometry.isBufferGeometry) { - geometry = new Geometry().fromBufferGeometry(geometry); + geometry = new THREE.Geometry().fromBufferGeometry(geometry); } else if (geometry.isGeometry) { geometry = geometry.clone(); } else { @@ -38,9 +33,9 @@ export function sliceGeometry(settings, geometry, materials, matrix, sync = fals const openObjectIndexes = materials instanceof Array ? materials.map(({ side }) => { switch (side) { - case FrontSide: + case THREE.FrontSide: return false; - case DoubleSide: + case THREE.DoubleSide: return true; default: return false; @@ -76,14 +71,14 @@ function sliceAsync(settings, geometry, openObjectIndexes, constructLinePreview, slicerWorker.terminate(); if (data.gcode.linePreview) { - const geometry = new BufferGeometry(); + const geometry = new THREE.BufferGeometry(); const { position, color } = data.gcode.linePreview; - geometry.addAttribute('position', new BufferAttribute(new Float32Array(position), 3)); - geometry.addAttribute('color', new BufferAttribute(new Float32Array(color), 3)); + geometry.addAttribute('position', new THREE.BufferAttribute(new Float32Array(position), 3)); + geometry.addAttribute('color', new THREE.BufferAttribute(new Float32Array(color), 3)); - const material = new LineBasicMaterial({ vertexColors: VertexColors }); - const linePreview = new LineSegments(geometry, material); + const material = new THREE.LineBasicMaterial({ vertexColors: THREE.VertexColors }); + const linePreview = new THREE.LineSegments(geometry, material); data.gcode.linePreview = linePreview; } diff --git a/src/slicer.worker.js b/src/slicer.worker.js index 2d866ef..f06ce93 100644 --- a/src/slicer.worker.js +++ b/src/slicer.worker.js @@ -1,7 +1,6 @@ import 'core-js'; // polyfills import slice from './sliceActions/slice.js'; -import { Matrix4 } from 'three/src/math/Matrix4.js'; -import { JSONLoader } from 'three/src/loaders/JSONLoader.js'; +import * as THREE from 'three'; const onProgress = progress => { self.postMessage({ @@ -10,7 +9,7 @@ const onProgress = progress => { }); } -const loader = new JSONLoader(); +const loader = new THREE.JSONLoader(); self.addEventListener('message', (event) => { const { message, data } = event.data; diff --git a/webpack.config.js b/webpack.config.js index 985b6b9..9e4da86 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -70,7 +70,8 @@ module.exports = { appMountId: 'app' }) ], - devtool: "source-map", + devtool: false, + devtool: devMode ? 'source-map' : false, devServer: { contentBase: 'dist' }