mirror of
https://github.com/Doodle3D/Doodle3D-Slicer.git
synced 2024-12-23 03:23:48 +01:00
improve bundle size
This commit is contained in:
parent
46408e0668
commit
d4743ef867
@ -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` });
|
||||
};
|
||||
|
||||
|
@ -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,
|
||||
|
@ -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: [] });
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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;
|
||||
|
@ -70,7 +70,8 @@ module.exports = {
|
||||
appMountId: 'app'
|
||||
})
|
||||
],
|
||||
devtool: "source-map",
|
||||
devtool: false,
|
||||
devtool: devMode ? 'source-map' : false,
|
||||
devServer: {
|
||||
contentBase: 'dist'
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user