From 6b845729317f1401a294b41ff2d19ec7809343b1 Mon Sep 17 00:00:00 2001 From: casperlamboo Date: Wed, 6 Dec 2017 11:54:09 +0100 Subject: [PATCH] use three as modules --- index.js | 4 +- package-lock.json | 12 ++++-- package.json | 3 +- src/interface/index.js | 14 +++---- src/interface/utils.js | 38 +++++++++++++------ .../calculateLayersIntersections.js | 4 +- src/sliceActions/createLines.js | 7 ++-- src/sliceActions/helpers/GCode.js | 8 ++-- src/sliceActions/intersectionsToShapes.js | 10 ++--- src/sliceActions/optimizePaths.js | 10 ++--- src/sliceActions/slice.js | 19 ++++++---- src/slicer.js | 19 ++++++---- src/slicer.worker.js | 4 +- webpack.config.js | 3 ++ 14 files changed, 94 insertions(+), 61 deletions(-) diff --git a/index.js b/index.js index 1799116..859a0a7 100644 --- a/index.js +++ b/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(( diff --git a/package-lock.json b/package-lock.json index ada8368..73f5ee7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5677,6 +5677,12 @@ "unpipe": "1.0.0" } }, + "raw-loader": { + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-0.5.1.tgz", + "integrity": "sha1-DD0L6u2KAclm2Xh793goElKpeao=", + "dev": true + }, "react": { "version": "16.1.0", "resolved": "https://registry.npmjs.org/react/-/react-16.1.0.tgz", @@ -6478,9 +6484,9 @@ } }, "three": { - "version": "0.83.0", - "resolved": "https://registry.npmjs.org/three/-/three-0.83.0.tgz", - "integrity": "sha1-O3+UeQrz4CHawfRKJhdWnKIDKws=" + "version": "0.88.0", + "resolved": "https://registry.npmjs.org/three/-/three-0.88.0.tgz", + "integrity": "sha1-QlbC/Djk+yOg0j66K2zOTfjkZtU=" }, "thunky": { "version": "0.1.0", diff --git a/package.json b/package.json index 0e59ef2..16d542d 100644 --- a/package.json +++ b/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", diff --git a/src/interface/index.js b/src/interface/index.js index ec9e9e1..22795c5 100644 --- a/src/interface/index.js +++ b/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(); } diff --git a/src/interface/utils.js b/src/interface/utils.js index d38eb2c..4e75a6c 100644 --- a/src/interface/utils.js +++ b/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,6 +118,8 @@ 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; @@ -113,7 +127,7 @@ export async function slice(name, mesh, settings, printers, quality, material, u 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, diff --git a/src/sliceActions/calculateLayersIntersections.js b/src/sliceActions/calculateLayersIntersections.js index 4d3dba2..edad896 100644 --- a/src/sliceActions/calculateLayersIntersections.js +++ b/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); } } } diff --git a/src/sliceActions/createLines.js b/src/sliceActions/createLines.js index 5a6e3fc..ff26c91 100644 --- a/src/sliceActions/createLines.js +++ b/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); diff --git a/src/sliceActions/helpers/GCode.js b/src/sliceActions/helpers/GCode.js index 980d34f..6955cbf 100644 --- a/src/sliceActions/helpers/GCode.js +++ b/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; diff --git a/src/sliceActions/intersectionsToShapes.js b/src/sliceActions/intersectionsToShapes.js index f416f79..174cb5f 100644 --- a/src/sliceActions/intersectionsToShapes.js +++ b/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); diff --git a/src/sliceActions/optimizePaths.js b/src/sliceActions/optimizePaths.js index 18043ef..661e7e0 100644 --- a/src/sliceActions/optimizePaths.js +++ b/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; diff --git a/src/sliceActions/slice.js b/src/sliceActions/slice.js index a1cbaad..3cf9a87 100644 --- a/src/sliceActions/slice.js +++ b/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; } diff --git a/src/slicer.js b/src/slicer.js index 69c823c..5932af6 100644 --- a/src/slicer.js +++ b/src/slicer.js @@ -1,4 +1,9 @@ -import * as THREE from 'three'; +import { Geometry } from 'three/src/core/Geometry.js'; +import { BufferGeometry } from 'three/src/core/BufferGeometry.js'; +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 slice from './sliceActions/slice.js'; import SlicerWorker from './slicer.worker.js'; @@ -16,7 +21,7 @@ export function sliceGeometry(settings, geometry, matrix, sync = false, construc if (!geometry) { throw new Error('Missing required geometry argument'); } else if (geometry.isBufferGeometry) { - geometry = new THREE.Geometry().fromBufferGeometry(geometry); + geometry = new Geometry().fromBufferGeometry(geometry); } else if (geometry.isGeometry) { geometry = geometry.clone(); } else { @@ -60,14 +65,14 @@ function sliceAsync(settings, geometry, constructLinePreview, onProgress) { slicerWorker.terminate(); if (data.gcode.linePreview) { - const geometry = new THREE.BufferGeometry(); + const geometry = new BufferGeometry(); const { position, color } = data.gcode.linePreview; - geometry.addAttribute('position', new THREE.BufferAttribute(new Float32Array(position), 3)); - geometry.addAttribute('color', new THREE.BufferAttribute(new Float32Array(color), 3)); + geometry.addAttribute('position', new BufferAttribute(new Float32Array(position), 3)); + geometry.addAttribute('color', new BufferAttribute(new Float32Array(color), 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); data.gcode.linePreview = linePreview; } diff --git a/src/slicer.worker.js b/src/slicer.worker.js index c80a968..b9f03e2 100644 --- a/src/slicer.worker.js +++ b/src/slicer.worker.js @@ -1,8 +1,8 @@ import 'core-js'; // polyfills import slice from './sliceActions/slice.js'; -import * as THREE from 'three'; +import { JSONLoader } from 'three/src/loaders/JSONLoader.js'; -const loader = new THREE.JSONLoader(); +const loader = new JSONLoader(); const onProgress = progress => { self.postMessage({ diff --git a/webpack.config.js b/webpack.config.js index bec27f2..46f2d18 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -46,6 +46,9 @@ module.exports = { }, { test: /\.worker\.js$/, use: ['worker-loader', babelLoader] + }, { + test: /\.glsl$/, + use: ['raw-loader'] } ] },