vmario/Doodle3D-Slicer
0
0
Fork 0
mirror of https://github.com/Doodle3D/Doodle3D-Slicer.git synced 2024-12-23 03:23:48 +01:00
Code Issues Projects Releases Wiki Activity

improve bundle size

Browse Source
This commit is contained in:
casperlamboo 2018-01-18 12:06:14 +01:00
parent 46408e0668
commit d4743ef867
9 changed files with 52 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/interface/index.js
View File

@ -1,9 +1,6 @@
import * as THREE from 'three';
import _ from 'lodash'; import _ from 'lodash';
import React from 'react'; 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 PropTypes from 'proptypes';
import { centerGeometry, placeOnGround, createScene, fetchProgress, slice, TabTemplate } from './utils.js'; import { centerGeometry, placeOnGround, createScene, fetchProgress, slice, TabTemplate } from './utils.js';
import injectSheet from 'react-jss'; import injectSheet from 'react-jss';
@ -21,7 +18,6 @@ import ReactResizeDetector from 'react-resize-detector';
import JSONToSketchData from 'doodle3d-core/shape/JSONToSketchData'; import JSONToSketchData from 'doodle3d-core/shape/JSONToSketchData';
import createSceneData from 'doodle3d-core/d3/createSceneData.js'; import createSceneData from 'doodle3d-core/d3/createSceneData.js';
import { generateExportMesh } from 'doodle3d-core/utils/exportUtils.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 muiThemeable from 'material-ui/styles/muiThemeable';
import Dialog from 'material-ui/Dialog'; import Dialog from 'material-ui/Dialog';
@ -145,7 +141,7 @@ class Interface extends React.Component {
.then(resonse => resonse.json()) .then(resonse => resonse.json())
.then(json => JSONToSketchData(json)) .then(json => JSONToSketchData(json))
.then(file => createSceneData(file)) .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)); .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); rotateX = () => this.rotate(new THREE.Vector3(0, 0, 1), Math.PI / 2.0);
rotateY = () => this.rotate(new Vector3(1, 0, 0), Math.PI / 2.0); rotateY = () => this.rotate(new THREE.Vector3(1, 0, 0), Math.PI / 2.0);
rotateZ = () => this.rotate(new Vector3(0, 1, 0), Math.PI / 2.0); rotateZ = () => this.rotate(new THREE.Vector3(0, 1, 0), Math.PI / 2.0);
rotate = (axis, angle) => { rotate = (axis, angle) => {
const { scene: { mesh, render }, isSlicing } = this.state; const { scene: { mesh, render }, isSlicing } = this.state;
if (isSlicing) return; if (isSlicing) return;
@ -221,7 +217,7 @@ class Interface extends React.Component {
this.closePopover(); this.closePopover();
this.setState({ isSlicing: true, progress: { action: '', percentage: 0, step: 0 }, error: null }); 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); exportMesh.applyMatrix(matrix);
try { try {
@ -292,7 +288,7 @@ class Interface extends React.Component {
calculateDimensions = () => { calculateDimensions = () => {
const { scene: { mesh } } = this.state; 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` }); this.setState({ objectDimensions: `${Math.round(x)}x${Math.round(y)}x${Math.round(z)}mm` });
}; };

41
src/interface/utils.js
View File

@ -1,17 +1,4 @@
import * as THREE from 'three'; 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 'three/examples/js/controls/EditorControls';
import printerSettings from '../settings/printer.yml'; import printerSettings from '../settings/printer.yml';
import materialSettings from '../settings/material.yml'; import materialSettings from '../settings/material.yml';
@ -23,7 +10,7 @@ import PropTypes from 'prop-types';
import fileSaver from 'file-saver'; import fileSaver from 'file-saver';
export function placeOnGround(mesh) { export function placeOnGround(mesh) {
const boundingBox = new Box3().setFromObject(mesh); const boundingBox = new THREE.Box3().setFromObject(mesh);
mesh.position.y -= boundingBox.min.y; mesh.position.y -= boundingBox.min.y;
mesh.updateMatrix(); mesh.updateMatrix();
@ -33,35 +20,35 @@ export function centerGeometry(mesh) {
// center geometry // center geometry
mesh.geometry.computeBoundingBox(); mesh.geometry.computeBoundingBox();
const center = mesh.geometry.boundingBox.getCenter(); 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 }) { 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.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); directionalLightA.position.set(1, 1, 1);
scene.add(directionalLightA); scene.add(directionalLightA);
const directionalLightB = new DirectionalLight(0xa2a2a2); const directionalLightB = new THREE.DirectionalLight(0xa2a2a2);
directionalLightB.position.set(-1, 1, -1); directionalLightB.position.set(-1, 1, -1);
scene.add(directionalLightB); scene.add(directionalLightB);
const light = new AmbientLight(0x656565); const light = new THREE.AmbientLight(0x656565);
scene.add(light); scene.add(light);
const material = new MeshPhongMaterial({ color: muiTheme.palette.primary2Color, side: DoubleSide, specular: 0xc5c5c5, shininess: 5 }); const material = new THREE.MeshPhongMaterial({ color: muiTheme.palette.primary2Color, side: THREE.DoubleSide, specular: 0xc5c5c5, shininess: 5 });
const mesh = new Mesh(new THREE.Geometry(), material); const mesh = new THREE.Mesh(new THREE.Geometry(), material);
scene.add(mesh); 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); 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); let editorControls = new THREE.EditorControls(camera, renderer.domElement);
box.scale.set(1., 1., 1.); box.scale.set(1., 1., 1.);
@ -80,7 +67,7 @@ export function createScene({ pixelRatio, muiTheme }) {
const updateCanvas = (canvas) => { const updateCanvas = (canvas) => {
if (!renderer || renderer.domElement !== canvas) { if (!renderer || renderer.domElement !== canvas) {
if (renderer) renderer.dispose(); 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); renderer.setClearColor(0xffffff, 0);
} }
if (!editorControls || editorControls.domElement !== canvas) { if (!editorControls || editorControls.domElement !== canvas) {
@ -138,7 +125,7 @@ export async function slice(target, name, mesh, settings, updateProgress) {
const centerX = dimensions.x / 2; const centerX = dimensions.x / 2;
const centerY = dimensions.y / 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 }) => { const { gcode } = await sliceGeometry(settings, mesh.geometry, mesh.material, matrix, false, false, ({ progress }) => {
updateProgress({ updateProgress({
action: progress.action, action: progress.action,

4
src/sliceActions/createLines.js
View File

@ -1,4 +1,4 @@
import { Line3 } from 'three/src/math/Line3.js'; import * as THREE from 'three';
import { normalize } from './helpers/VectorUtils.js'; import { normalize } from './helpers/VectorUtils.js';
function addLine(geometry, lineLookup, lines, a, b, faceIndex) { function addLine(geometry, lineLookup, lines, a, b, faceIndex) {
@ -9,7 +9,7 @@ function addLine(geometry, lineLookup, lines, a, b, faceIndex) {
index = lines.length; index = lines.length;
lineLookup[`${a}_${b}`] = index; 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: [] }); lines.push({ line, faces: [] });
} }

8
src/sliceActions/helpers/GCode.js
View File

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

10
src/sliceActions/optimizePaths.js
View File

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

19
src/sliceActions/slice.js
View File

@ -1,9 +1,4 @@
import { Color } from 'three/src/math/Color.js'; import * as THREE from 'three';
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 calculateLayersIntersections from './calculateLayersIntersections.js';
import createLines from './createLines.js'; import createLines from './createLines.js';
import generateInfills from './generateInfills.js'; import generateInfills from './generateInfills.js';
@ -98,7 +93,7 @@ function gcodeToString(gcode) {
} }
const MAX_SPEED = 100 * 60; const MAX_SPEED = 100 * 60;
const COLOR = new Color(); const COLOR = new THREE.Color();
function createGcodeGeometry(gcode) { function createGcodeGeometry(gcode) {
const positions = []; const positions = [];
const colors = []; 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('position', new THREE.BufferAttribute(new Float32Array(positions), 3));
geometry.addAttribute('color', new BufferAttribute(new Float32Array(colors), 3)); geometry.addAttribute('color', new THREE.BufferAttribute(new Float32Array(colors), 3));
const material = new LineBasicMaterial({ vertexColors: VertexColors }); const material = new THREE.LineBasicMaterial({ vertexColors: THREE.VertexColors });
const linePreview = new LineSegments(geometry, material); const linePreview = new THREE.LineSegments(geometry, material);
return linePreview; return linePreview;
} }

23
src/slicer.js
View File

@ -1,11 +1,6 @@
import { VertexColors } from 'three/src/constants.js'; import * as THREE from 'three';
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 slice from './sliceActions/slice.js'; import slice from './sliceActions/slice.js';
import SlicerWorker from './slicer.worker.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) { export function sliceMesh(settings, mesh, sync = false, constructLinePreview = false, onProgress) {
if (!mesh || !mesh.isMesh) { if (!mesh || !mesh.isMesh) {
@ -21,7 +16,7 @@ export function sliceGeometry(settings, geometry, materials, matrix, sync = fals
if (!geometry) { if (!geometry) {
throw new Error('Missing required geometry argument'); throw new Error('Missing required geometry argument');
} else if (geometry.isBufferGeometry) { } else if (geometry.isBufferGeometry) {
geometry = new Geometry().fromBufferGeometry(geometry); geometry = new THREE.Geometry().fromBufferGeometry(geometry);
} else if (geometry.isGeometry) { } else if (geometry.isGeometry) {
geometry = geometry.clone(); geometry = geometry.clone();
} else { } else {
@ -38,9 +33,9 @@ export function sliceGeometry(settings, geometry, materials, matrix, sync = fals
const openObjectIndexes = materials instanceof Array ? materials.map(({ side }) => { const openObjectIndexes = materials instanceof Array ? materials.map(({ side }) => {
switch (side) { switch (side) {
case FrontSide: case THREE.FrontSide:
return false; return false;
case DoubleSide: case THREE.DoubleSide:
return true; return true;
default: default:
return false; return false;
@ -76,14 +71,14 @@ function sliceAsync(settings, geometry, openObjectIndexes, constructLinePreview,
slicerWorker.terminate(); slicerWorker.terminate();
if (data.gcode.linePreview) { if (data.gcode.linePreview) {
const geometry = new BufferGeometry(); const geometry = new THREE.BufferGeometry();
const { position, color } = data.gcode.linePreview; const { position, color } = data.gcode.linePreview;
geometry.addAttribute('position', new BufferAttribute(new Float32Array(position), 3)); geometry.addAttribute('position', new THREE.BufferAttribute(new Float32Array(position), 3));
geometry.addAttribute('color', new BufferAttribute(new Float32Array(color), 3)); geometry.addAttribute('color', new THREE.BufferAttribute(new Float32Array(color), 3));
const material = new LineBasicMaterial({ vertexColors: VertexColors }); const material = new THREE.LineBasicMaterial({ vertexColors: THREE.VertexColors });
const linePreview = new LineSegments(geometry, material); const linePreview = new THREE.LineSegments(geometry, material);
data.gcode.linePreview = linePreview; data.gcode.linePreview = linePreview;
} }

5
src/slicer.worker.js
View File

@ -1,7 +1,6 @@
import 'core-js'; // polyfills import 'core-js'; // polyfills
import slice from './sliceActions/slice.js'; import slice from './sliceActions/slice.js';
import { Matrix4 } from 'three/src/math/Matrix4.js'; import * as THREE from 'three';
import { JSONLoader } from 'three/src/loaders/JSONLoader.js';
const onProgress = progress => { const onProgress = progress => {
self.postMessage({ self.postMessage({
@ -10,7 +9,7 @@ const onProgress = progress => {
}); });
} }
const loader = new JSONLoader(); const loader = new THREE.JSONLoader();
self.addEventListener('message', (event) => { self.addEventListener('message', (event) => {
const { message, data } = event.data; const { message, data } = event.data;

3
webpack.config.js
View File

@ -70,7 +70,8 @@ module.exports = {
appMountId: 'app' appMountId: 'app'
}) })
], ],
devtool: "source-map", devtool: false,
devtool: devMode ? 'source-map' : false,
devServer: { devServer: {
contentBase: 'dist' contentBase: 'dist'
} }