31:T564,function generateGeometries(ps) { let epsilon = 0.0625; let offset = toolDiameter * 4 + epsilon; let fixtureOffsetY = 2; let origins = { top: new ps.Point(offset, offset + fixtureOffsetY).multiply(SHELF_UPSCALE), bottom: new ps.Point( offset, 2 * offset + caseDepth + fixtureOffsetY ).multiply(SHELF_UPSCALE), left: new ps.Point( 2 * offset + caseWidth, offset + fixtureOffsetY ).multiply(SHELF_UPSCALE), right: new ps.Point( 3 * offset + (caseWidth + caseDepth), offset + fixtureOffsetY ).multiply(SHELF_UPSCALE) }; let top = generateTopBottomGeometry(origins.top)(ps); let bottom = generateTopBottomGeometry(origins.bottom)(ps); let left = generateSideGeometry(origins.left)(ps); let right = generateSideGeometry(origins.right)(ps); let shelves = shelfHeights.map((height, index) => { let currShelfOrigin = new ps.Point( 4 * offset + (caseWidth + 2 * caseDepth), offset * (index + 1) + caseDepth * index + fixtureOffsetY ).multiply(SHELF_UPSCALE); return generateShelfGeometry(currShelfOrigin)(ps); }); let data = { totalInchesX: 5 * offset + (caseWidth + 2 * caseDepth) + (caseWidth - shelfThickness), totalInchesY: offset * (shelfHeights.length + 1) + caseDepth * shelfHeights.length }; return { top, bottom, left, right, shelves, data }; }32:T40f,function generateTopBottomGeometry(origin) { return function (ps) { let size = new ps.Size(caseWidth, caseDepth); let rect = new ps.Path.Rectangle(origin, size); rect.strokeColor = "black"; rect.strokeWidth = 1; rect.cutType = "cutThrough"; let leftRabbet = new ps.Path.Rectangle( origin, new ps.Size(shelfThickness / 2, caseDepth) ); // leftRabbet.fillColor = "red"; leftRabbet.strokeColor = "black"; leftRabbet.strokeWidth = 1; leftRabbet.dashArray = [2, 1]; leftRabbet.cutType = "rabbet"; let rightRabbet = new ps.Path.Rectangle( new ps.Point(origin.x + (caseWidth - shelfThickness / 2), origin.y), new ps.Size(shelfThickness / 2, caseDepth) ); // rightRabbet.fillColor = "red"; rightRabbet.cutType = "rabbet"; rightRabbet.strokeColor = "black"; rightRabbet.strokeWidth = 1; rightRabbet.dashArray = [2, 1]; let group = new ps.Group([rect, leftRabbet, rightRabbet]); group.scale(SHELF_UPSCALE, origin); return group; }; }33:T5d2,function generateSideGeometry(origin) { // TODO: rename dovetail -> groove return function (ps) { let makeDovetailAtHeight = (height) => { let dovetail = new ps.Path.Rectangle( new ps.Point(origin.x, origin.y + height), new ps.Size(caseDepth, shelfThickness / 2) ); dovetail.strokeColor = "black"; dovetail.strokeWidth = 1; dovetail.dashArray = [2, 1]; dovetail.cutType = "groove"; return dovetail; }; let size = new ps.Size(caseDepth, caseHeight); let rect = new ps.Path.Rectangle(origin, size); rect.strokeColor = "black"; rect.strokeWidth = 1; rect.cutType = "cutThrough"; let bottomRabbet = new ps.Path.Rectangle( origin, new ps.Size(caseDepth, shelfThickness / 2) ); bottomRabbet.strokeColor = "black"; bottomRabbet.strokeWidth = 1; bottomRabbet.dashArray = [2, 1]; bottomRabbet.cutType = "rabbet"; let topRabbet = new ps.Path.Rectangle( new ps.Point(origin.x, caseHeight - shelfThickness / 2 + origin.y), new ps.Size(caseDepth, shelfThickness / 2) ); topRabbet.strokeColor = "black"; topRabbet.strokeWidth = 1; topRabbet.dashArray = [2, 1]; topRabbet.cutType = "rabbet"; let dovetails = shelfHeights.map((height) => makeDovetailAtHeight(height)); mutable test = dovetails; let group = new ps.Group([rect, bottomRabbet, topRabbet, ...dovetails]); group.scale(SHELF_UPSCALE, origin); return group; }; }34:T7a4,function make3dRendering(vizSpace) { const st = shelfThickness; const ht = shelfThickness / 2; const numFaces = [6, 6, 6]; const sideGeom = new THREE.BoxGeometry( shelfThickness, caseHeight, caseDepth, ...numFaces ); const topGeom = new THREE.BoxGeometry( caseWidth, shelfThickness, caseDepth, ...numFaces ); const shelfGeom = new THREE.BoxGeometry( caseWidth - 2 * shelfThickness, shelfThickness, caseDepth, ...numFaces ); sideGeom.computeBoundingSphere(); topGeom.computeBoundingSphere(); shelfGeom.computeBoundingSphere(); // const material = new THREE.MeshPhongMaterial({ // color: 0xf39c12, // transparent: true, // opacity: 0.8 // }); const material = new THREE.MeshLambertMaterial({ color: 0xf39c12, transparent: true, opacity: 1.0 }); const left = new THREE.Mesh(sideGeom, material); const right = new THREE.Mesh(sideGeom, material); const top = new THREE.Mesh(topGeom, material); const bottom = new THREE.Mesh(topGeom, material); const shelves = shelfHeights.map((shelfHeight) => { let mesh = new THREE.Mesh(shelfGeom, material); mesh.position.set(caseWidth / 2 - ht, -shelfHeight, 0); mesh.frustumCulled = false; return mesh; }); left.position.set(0, -caseHeight / 2, 0); right.position.set(caseWidth - st, -caseHeight / 2, 0); top.position.set(caseWidth / 2 - ht, -caseHeight - ht, 0); bottom.position.set(caseWidth / 2 - ht, 0 + ht, 0); // const group = new THREE.Group([left, right]); vizSpace.scene.add(left); vizSpace.scene.add(right); vizSpace.scene.add(top); vizSpace.scene.add(bottom); shelves.forEach((shelf) => vizSpace.scene.add(shelf)); vizSpace.threeRenderScene(); invalidation.then((_) => { sideGeom.dispose(); topGeom.dispose(); left.dispose(); right.dispose(); top.dispose(); bottom.dispose(); shelves.forEach((shelf) => shelf.dispose()); }); }35:T976,function zigzagPocket(rectangle) { let localOrigin = { x: rectangle.bounds.x / SHELF_UPSCALE, y: rectangle.bounds.y / SHELF_UPSCALE }; let dims = { width: rectangle.bounds.width / SHELF_UPSCALE, height: rectangle.bounds.height / SHELF_UPSCALE }; let longerAxis = dims.width > dims.height ? "x" : "y"; let shorterAxis = longerAxis === "x" ? "y" : "x"; let longerLength = Math.max(dims.width, dims.height); let shorterLength = Math.min(dims.width, dims.height); if (shorterAxis < toolDiameter) { throw Error("The mill diameter is too large."); } let toolOffset = toolDiameter / 2; let numPasses = shorterLength / stepover; let numFullPasses = Math.floor(numPasses); let doPass = (passIndex) => { let first = { [shorterAxis]: localOrigin[shorterAxis] + toolOffset + passIndex * stepover, // Change: we actually want to over extend the pockets because we can // afford to (nothing in way) and we want to get rid of artifacts // [longerAxis]: localOrigin[longerAxis] + longerLength - toolOffset [longerAxis]: localOrigin[longerAxis] + longerLength + toolOffset }; let second = { [shorterAxis]: localOrigin[shorterAxis] + toolOffset + passIndex * stepover, // [longerAxis]: localOrigin[longerAxis] + toolOffset [longerAxis]: localOrigin[longerAxis] - toolOffset }; return passIndex % 2 === 0 ? [`M2,${first.x},${first.y}`, `M2,${second.x},${second.y}`] : [`M2,${second.x},${second.y}`, `M2,${first.x},${first.y}`]; }; let doLastPass = (passIndex) => { let first = { [shorterAxis]: localOrigin[shorterAxis] + shorterLength - toolOffset, //[longerAxis]: localOrigin[longerAxis] + longerLength - toolOffset [longerAxis]: localOrigin[longerAxis] + longerLength + toolOffset }; let second = { [shorterAxis]: localOrigin[shorterAxis] + shorterLength - toolOffset, // [longerAxis]: localOrigin[longerAxis] + toolOffset [longerAxis]: localOrigin[longerAxis] - toolOffset }; return passIndex % 2 === 0 ? [`M2,${first.x},${first.y}`, `M2,${second.x},${second.y}`] : [`M2,${second.x},${second.y}`, `M2,${first.x},${first.y}`]; }; let fullPasses = [...Array(numFullPasses).keys()] .map((passIndex) => doPass(passIndex)) .flat(); let lastPass = doLastPass(numFullPasses); return fullPasses.concat(lastPass); }36:T8d0,function extrudeInstructions( profileInstructions, depthToCut, materialThickness, tabSegments ) { if (!depthToCut || !materialThickness) { throw new Error("Please specify depth to cut and material thickness."); } const handleLastLayer = (profileInsts, depth) => { return profileInsts .map((inst, instIdx) => { let toks = inst.split(","); let opcode = toks[0]; if (opcode === "M2" || opcode === "J2") { if (tabSegments && tabSegments.includes(instIdx)) { let x = toks[1]; let y = toks[2]; return [`JZ,${-depth + stepdown}`, `J2,${x},${y}`, `MZ,${-depth}`]; } } return inst; }) .flat(); }; const epsilon = 0.03215; const spindleOn = "C6"; const spindleOff = "C7"; const travelDepth = 1; if (profileInstructions.length === 0) { return []; } if (depthToCut > materialThickness) { throw new Error(`Cutting at a depth ${depthToCut} will cut into the bed.`); } let numPasses = depthToCut / stepdown; let numFullPasses = Math.floor(numPasses); let depths = [...Array(numFullPasses).keys()] .map((layerNum) => (layerNum + 1) * stepdown) .concat(numPasses - numFullPasses > 0 ? [depthToCut] : []); if (depthToCut === materialThickness) { depths[depths.length - 1] += epsilon; } let profileFirstX = parseFloat(profileInstructions[0].split(",")[1]); let profileFirstY = parseFloat(profileInstructions[0].split(",")[2]); // return profileFirstX; // Per-layer procedure: // 1. Move to travel height (ideally different per layer) // 2. Move to profile first xy point // 3. Move z to depth at plunge feed rate // 4. Execute profile XY instructions return depths.map((depth, depthIndex) => { let layerComment = `' Begin layer z=${-depth}`; let moveToTravelZ = `JZ,${travelDepth}`; let moveToCurveStart = `J2,${profileFirstX},${profileFirstY}`; let plunge = `MZ,${-depth}`; return [layerComment, moveToTravelZ, moveToCurveStart, plunge].concat( // Discard the first XY move since we're already there depthIndex === depths.length - 1 ? handleLastLayer(profileInstructions, depth) : profileInstructions.slice(1) ); }); }37:T1d05,VisualizationSpace = /** @class */ (function () { function VisualizationSpace(containerDom, stockDimensions) { this.containerDom = containerDom; this.scene = this.initScene(); this.envelopeGroup = stockDimensions ? this.createEnvelopeGroup(stockDimensions) : undefined; this.vizGroupWrapper = new THREE.Group(); this.scene.add(this.envelopeGroup); this.scene.add(this.vizGroupWrapper); this.camera = this.initCamera( this.scene, this.envelopeGroup ? this.envelopeGroup.position : new THREE.Vector3(caseWidth / 2, 0, caseDepth / 2), true ); this.renderRequested = false; this.initPostDomLoadLogistics(); // For debugging window.vs = this; } VisualizationSpace.prototype.componentWillUnmount = function () { this.removeAllViz(); }; VisualizationSpace.prototype.cloneCamera = function () { return this.camera.clone(); }; VisualizationSpace.prototype.cloneScene = function () { return this.scene.clone(); }; Object.defineProperty(VisualizationSpace.prototype, "domElement", { get: function () { if (!this.threeRenderer) { return undefined; } return this.threeRenderer.domElement; }, enumerable: false, configurable: true }); VisualizationSpace.prototype.addVizWithName = function ( vizGroup, interpreterName ) { // if (this.vizGroupWrapper.children.length >= 1) { // console.error( // "Cannot add another vizGroup without clearing the" + " existing one." // ); // return; // } vizGroup.name = interpreterName; this.vizGroupWrapper.add(vizGroup); this.threeRenderScene(); }; VisualizationSpace.prototype.getCurrentVizNames = function () { return this.vizGroupWrapper.children.map(function (alsoCalledVizGroup) { return alsoCalledVizGroup.name; }); }; VisualizationSpace.prototype.removeAllViz = function () { // TODO: cast as THREE.Mesh and call dispose on geom and mat var wrappedVizGroup = this.vizGroupWrapper.children[0]; if (!wrappedVizGroup) { return; } wrappedVizGroup.children.forEach(function (child) { child.geometry.dispose(); child.material.dispose(); child.remove(); }); this.vizGroupWrapper.children = []; this.threeRenderScene(); }; VisualizationSpace.prototype.createExampleToolpath = function () { var line = new THREE.LineCurve3( new THREE.Vector3(0, 0, 0), new THREE.Vector3(100, 100, 40) ); var geom = new THREE.TubeBufferGeometry(line, 64, 1, 64, false); var material = new THREE.MeshToonMaterial({ color: 0xe44242, side: THREE.DoubleSide }); var mesh = new THREE.Mesh(geom, material); return mesh; }; VisualizationSpace.prototype.initPostDomLoadLogistics = function () { this.threeRenderer = this.initThreeRenderer(); this.controls = this.initControls(this.camera, this.threeRenderer); this.threeRenderScene(); // let animate = () => { // let maxFramerate = 20; // setTimeout(() => { // requestAnimationFrame(animate); // }, 1000 / maxFramerate); // this.threeRenderScene(); // }; // animate(); }; VisualizationSpace.prototype.initScene = function () { var scene = new THREE.Scene(); // scene.background = new THREE.Color(0x23241f); scene.background = new THREE.Color(0xffffff); var topDirectionalLight = new THREE.DirectionalLight(0xffffff, 0.25); var leftDirectionalLight = new THREE.DirectionalLight(0xffffff, 0.5); var rightDirectionalLight = new THREE.DirectionalLight(0xffffff, 0.75); var ambientLight = new THREE.AmbientLight(0x404040); topDirectionalLight.position.set(0, -10.0, 0); leftDirectionalLight.position.set(-10.0, 0.0, 0.0); rightDirectionalLight.position.set(0.0, 0.0, -10.0); scene.add(topDirectionalLight); scene.add(leftDirectionalLight); scene.add(rightDirectionalLight); scene.add(ambientLight); return scene; }; VisualizationSpace.prototype.initCamera = function ( scene, centerPoint, isOrtho ) { var camera; if (isOrtho) { camera = new THREE.OrthographicCamera( -720 / 2, 720 / 2, 480 / 2, -480 / 2, 1, 10000 ); camera.up = new THREE.Vector3(0, -1, 0); camera.zoom = 10; camera.updateProjectionMatrix(); camera.position.set(-50, -50, -50); camera.lookAt(centerPoint); camera.updateProjectionMatrix(); } else { var fov = 50; camera = new THREE.PerspectiveCamera(fov, 720 / 480, 0.01, 30000); camera.lookAt(centerPoint); camera.position.set(-500, 500, 500); camera.updateProjectionMatrix(); } return camera; }; VisualizationSpace.prototype.initControls = function (camera, renderer) { var controls = new OrbitControls(camera, renderer.domElement); controls.rotateSpeed = 1.0; controls.zoomSpeed = 0.8; controls.panSpeed = 0.8; controls.addEventListener("change", this.requestRenderScene.bind(this)); controls.enableDamping = true; controls.dampingFactor = 0.5; return controls; }; VisualizationSpace.prototype.initThreeRenderer = function () { var renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(720, 480); if (this.containerDom) { this.containerDom.appendChild(renderer.domElement); } else { throw new Error("No container DOM element provided."); } return renderer; }; VisualizationSpace.prototype.requestRenderScene = function () { if (!this.renderRequested) { this.renderRequested = true; requestAnimationFrame(this.threeRenderScene.bind(this)); } }; VisualizationSpace.prototype.threeRenderScene = function () { // this.controls.update(); // let deltaSeconds = this.clock.getDelta(); // this.mixers.forEach((mixer) => { // mixer.update(deltaSeconds); // }); if (!this.controls || !this.threeRenderer) { return; } this.renderRequested = false; this.controls.update(); this.threeRenderer.render(this.scene, this.camera); }; VisualizationSpace.prototype.createEnvelopeGroup = function ( stockDimensions ) { // FIXME: eventually have work envelopes be a 3-vector var dimensions = { width: stockDimensions.width, height: stockDimensions.thickness, length: stockDimensions.height }; var whitesmoke = 0xf5f5f5; var boxGeom = new THREE.BoxBufferGeometry( dimensions.width, dimensions.height, dimensions.length, 2, 2, 2 ); var edgesGeom = new THREE.EdgesGeometry(boxGeom); var material = new THREE.LineDashedMaterial({ color: 0x111111, linewidth: 1, scale: 1, dashSize: 0.5, gapSize: 0.5 }); var mesh = new THREE.LineSegments(edgesGeom, material); mesh.computeLineDistances(); var envelopeGroup = new THREE.Group(); envelopeGroup.add(mesh); envelopeGroup.position.set( dimensions.width / 2, dimensions.height / 2, dimensions.length / 2 ); return envelopeGroup; }; VisualizationSpace.prototype.toString = function () { return ""); }; return VisualizationSpace; })()38:Tae5,VisualizationInterpreters = /** @class */ (function () { function VisualizationInterpreters() {} VisualizationInterpreters.sbpBasicViz = function ( toolpath, materialParams, providedOrigin ) { const SCALE_FACTOR = 25; let currentPosition; if (providedOrigin) { currentPosition = new THREE.Vector3( providedOrigin.x, providedOrigin.y, providedOrigin.z ); } else { currentPosition = new THREE.Vector3(0, 0, 0); } var newPosition = currentPosition.clone(); var tokens, opcode, duration; var posChange; let positions = []; let colors = []; toolpath.forEach(function (instruction) { if (instruction.trim()[0] === "'") { return; } let tokens = instruction.trim().split(","); let opcode = tokens[0]; let opX, opY, opZ; if (opcode === "M2" || opcode === "J2") { opX = parseFloat(tokens[1]); opY = parseFloat(tokens[2]); newPosition = new THREE.Vector3(opX, opY, currentPosition.z); } else if (opcode === "M3" || opcode === "J3") { opX = parseFloat(tokens[1]); opY = parseFloat(tokens[2]); opZ = parseFloat(tokens[3]); newPosition = new THREE.Vector3(opX, opY, opZ); } else if (opcode === "MZ" || opcode === "JZ") { opZ = parseFloat(tokens[1]); newPosition = new THREE.Vector3( currentPosition.x, currentPosition.y, opZ ); } else { // Unrecognized opcode return; } positions.push(newPosition); let isTravelMove = currentPosition.z > 0 && newPosition.z > 0; if (isTravelMove) { let green = [0, 0, 255]; colors.push(...green); } else { let red = [255, 0, 0]; colors.push(...red); } currentPosition = newPosition; }); mutable test = positions; let positionsFlat = positions.map((vec) => [vec.x, vec.y, vec.z]).flat(); let lineGeom = new LineGeometry(); lineGeom.setPositions(positionsFlat); lineGeom.setColors(colors); let material = new LineMaterial({ linewidth: 0.5, vertexColors: true, //resolution: // to be set by renderer, eventually // Hmmm the below vector works? It was never set on its own and // crashed the browser resolution: new THREE.Vector2(640, 480), dashed: false }); let line = new Line2(lineGeom, material); line.scale.set(1, 1, 1); line.computeLineDistances(); let wrapperGroup = new THREE.Group(); const initialZDrop = 0.6996; // line.translateZ(-initialZDrop * SCALE_FACTOR); wrapperGroup.add(line); wrapperGroup.rotateX(Math.PI / 2); return wrapperGroup; }; return VisualizationInterpreters; })()39:T5d6,LineGeometry = (function () { class LineGeometry extends LineSegmentsGeometry { constructor() { super(); this.isLineGeometry = true; this.type = "LineGeometry"; } setPositions(array) { // converts [ x1, y1, z1, x2, y2, z2, ... ] to pairs format const length = array.length - 3; const points = new Float32Array(2 * length); for (let i = 0; i < length; i += 3) { points[2 * i] = array[i]; points[2 * i + 1] = array[i + 1]; points[2 * i + 2] = array[i + 2]; points[2 * i + 3] = array[i + 3]; points[2 * i + 4] = array[i + 4]; points[2 * i + 5] = array[i + 5]; } super.setPositions(points); return this; } setColors(array) { // converts [ r1, g1, b1, r2, g2, b2, ... ] to pairs format const length = array.length - 3; const colors = new Float32Array(2 * length); for (let i = 0; i < length; i += 3) { colors[2 * i] = array[i]; colors[2 * i + 1] = array[i + 1]; colors[2 * i + 2] = array[i + 2]; colors[2 * i + 3] = array[i + 3]; colors[2 * i + 4] = array[i + 4]; colors[2 * i + 5] = array[i + 5]; } super.setColors(colors); return this; } fromLine(line) { const geometry = line.geometry; this.setPositions(geometry.attributes.position.array); // assumes non-indexed // set colors, maybe return this; } } return LineGeometry; })()3a:T1425,LineSegmentsGeometry = (function () { const _box = new THREE.Box3(); const _vector = new THREE.Vector3(); class LineSegmentsGeometry extends THREE.InstancedBufferGeometry { constructor() { super(); this.isLineSegmentsGeometry = true; this.type = "LineSegmentsGeometry"; const positions = [ -1, 2, 0, 1, 2, 0, -1, 1, 0, 1, 1, 0, -1, 0, 0, 1, 0, 0, -1, -1, 0, 1, -1, 0 ]; const uvs = [-1, 2, 1, 2, -1, 1, 1, 1, -1, -1, 1, -1, -1, -2, 1, -2]; const index = [0, 2, 1, 2, 3, 1, 2, 4, 3, 4, 5, 3, 4, 6, 5, 6, 7, 5]; this.setIndex(index); this.setAttribute( "position", new THREE.Float32BufferAttribute(positions, 3) ); this.setAttribute("uv", new THREE.Float32BufferAttribute(uvs, 2)); } applyMatrix4(matrix) { const start = this.attributes.instanceStart; const end = this.attributes.instanceEnd; if (start !== undefined) { start.applyMatrix4(matrix); end.applyMatrix4(matrix); start.needsUpdate = true; } if (this.boundingBox !== null) { this.computeBoundingBox(); } if (this.boundingSphere !== null) { this.computeBoundingSphere(); } return this; } setPositions(array) { let lineSegments; if (array instanceof Float32Array) { lineSegments = array; } else if (Array.isArray(array)) { lineSegments = new Float32Array(array); } const instanceBuffer = new THREE.InstancedInterleavedBuffer( lineSegments, 6, 1 ); // xyz, xyz this.setAttribute( "instanceStart", new THREE.InterleavedBufferAttribute(instanceBuffer, 3, 0) ); // xyz this.setAttribute( "instanceEnd", new THREE.InterleavedBufferAttribute(instanceBuffer, 3, 3) ); // xyz // this.computeBoundingBox(); this.computeBoundingSphere(); return this; } setColors(array) { let colors; if (array instanceof Float32Array) { colors = array; } else if (Array.isArray(array)) { colors = new Float32Array(array); } const instanceColorBuffer = new THREE.InstancedInterleavedBuffer( colors, 6, 1 ); // rgb, rgb this.setAttribute( "instanceColorStart", new THREE.InterleavedBufferAttribute(instanceColorBuffer, 3, 0) ); // rgb this.setAttribute( "instanceColorEnd", new THREE.InterleavedBufferAttribute(instanceColorBuffer, 3, 3) ); // rgb return this; } fromWireframeGeometry(geometry) { this.setPositions(geometry.attributes.position.array); return this; } fromEdgesGeometry(geometry) { this.setPositions(geometry.attributes.position.array); return this; } fromMesh(mesh) { this.fromWireframeGeometry(new THREE.WireframeGeometry(mesh.geometry)); // set colors, maybe return this; } fromLineSegments(lineSegments) { const geometry = lineSegments.geometry; this.setPositions(geometry.attributes.position.array); // assumes non-indexed // set colors, maybe return this; } computeBoundingBox() { if (this.boundingBox === null) { this.boundingBox = new THREE.Box3(); } const start = this.attributes.instanceStart; const end = this.attributes.instanceEnd; if (start !== undefined && end !== undefined) { this.boundingBox.setFromBufferAttribute(start); _box.setFromBufferAttribute(end); this.boundingBox.union(_box); } } computeBoundingSphere() { if (this.boundingSphere === null) { this.boundingSphere = new THREE.Sphere(); } if (this.boundingBox === null) { this.computeBoundingBox(); } const start = this.attributes.instanceStart; const end = this.attributes.instanceEnd; if (start !== undefined && end !== undefined) { const center = this.boundingSphere.center; this.boundingBox.getCenter(center); let maxRadiusSq = 0; for (let i = 0, il = start.count; i < il; i++) { _vector.fromBufferAttribute(start, i); maxRadiusSq = Math.max( maxRadiusSq, center.distanceToSquared(_vector) ); _vector.fromBufferAttribute(end, i); maxRadiusSq = Math.max( maxRadiusSq, center.distanceToSquared(_vector) ); } this.boundingSphere.radius = Math.sqrt(maxRadiusSq); if (isNaN(this.boundingSphere.radius)) { console.error( "THREE.LineSegmentsGeometry.computeBoundingSphere(): Computed radius is NaN. The instanced position data is likely to have NaN values.", this ); } } } toJSON() { // todo } applyMatrix(matrix) { console.warn( "THREE.LineSegmentsGeometry: applyMatrix() has been renamed to applyMatrix4()." ); return this.applyMatrix4(matrix); } } return LineSegmentsGeometry; })()3b:T7137,OrbitControls = (function () { // Unlike TrackballControls, it maintains the "up" direction object.up (+Y by default). // // Orbit - left mouse / touch: one-finger move // Zoom - middle mouse, or mousewheel / touch: two-finger spread or squish // Pan - right mouse, or left mouse + ctrl/meta/shiftKey, or arrow keys / touch: two-finger move const _changeEvent = { type: "change" }; const _startEvent = { type: "start" }; const _endEvent = { type: "end" }; class OrbitControls extends THREE.EventDispatcher { constructor(object, domElement) { super(); if (domElement === undefined) console.warn( 'THREE.OrbitControls: The second parameter "domElement" is now mandatory.' ); if (domElement === document) console.error( 'THREE.OrbitControls: "document" should not be used as the target "domElement". Please use "renderer.domElement" instead.' ); this.object = object; this.domElement = domElement; this.domElement.style.touchAction = "none"; // disable touch scroll // Set to false to disable this control this.enabled = true; // "target" sets the location of focus, where the object orbits around this.target = new THREE.Vector3(); // How far you can dolly in and out ( PerspectiveCamera only ) this.minDistance = 0; this.maxDistance = Infinity; // How far you can zoom in and out ( OrthographicCamera only ) this.minZoom = 0; this.maxZoom = Infinity; // How far you can orbit vertically, upper and lower limits. // Range is 0 to Math.PI radians. this.minPolarAngle = 0; // radians this.maxPolarAngle = Math.PI; // radians // How far you can orbit horizontally, upper and lower limits. // If set, the interval [ min, max ] must be a sub-interval of [ - 2 PI, 2 PI ], with ( max - min < 2 PI ) this.minAzimuthAngle = -Infinity; // radians this.maxAzimuthAngle = Infinity; // radians // Set to true to enable damping (inertia) // If damping is enabled, you must call controls.update() in your animation loop this.enableDamping = false; this.dampingFactor = 0.05; // This option actually enables dollying in and out; left as "zoom" for backwards compatibility. // Set to false to disable zooming this.enableZoom = true; this.zoomSpeed = 1.0; // Set to false to disable rotating this.enableRotate = true; this.rotateSpeed = 1.0; // Set to false to disable panning this.enablePan = true; this.panSpeed = 1.0; this.screenSpacePanning = true; // if false, pan orthogonal to world-space direction camera.up this.keyPanSpeed = 7.0; // pixels moved per arrow key push // Set to true to automatically rotate around the target // If auto-rotate is enabled, you must call controls.update() in your animation loop this.autoRotate = false; this.autoRotateSpeed = 2.0; // 30 seconds per orbit when fps is 60 // The four arrow keys this.keys = { LEFT: "ArrowLeft", UP: "ArrowUp", RIGHT: "ArrowRight", BOTTOM: "ArrowDown" }; // Mouse buttons this.mouseButtons = { LEFT: THREE.MOUSE.ROTATE, MIDDLE: THREE.MOUSE.DOLLY, RIGHT: THREE.MOUSE.PAN }; // Touch fingers this.touches = { ONE: THREE.TOUCH.ROTATE, TWO: THREE.TOUCH.DOLLY_PAN }; // for reset this.target0 = this.target.clone(); this.position0 = this.object.position.clone(); this.zoom0 = this.object.zoom; // the target DOM element for key events this._domElementKeyEvents = null; // // public methods // this.getPolarAngle = function () { return spherical.phi; }; this.getAzimuthalAngle = function () { return spherical.theta; }; this.getDistance = function () { return this.object.position.distanceTo(this.target); }; this.listenToKeyEvents = function (domElement) { domElement.addEventListener("keydown", onKeyDown); this._domElementKeyEvents = domElement; }; this.saveState = function () { scope.target0.copy(scope.target); scope.position0.copy(scope.object.position); scope.zoom0 = scope.object.zoom; }; this.reset = function () { scope.target.copy(scope.target0); scope.object.position.copy(scope.position0); scope.object.zoom = scope.zoom0; scope.object.updateProjectionMatrix(); scope.dispatchEvent(_changeEvent); scope.update(); state = STATE.NONE; }; // this method is exposed, but perhaps it would be better if we can make it private... this.update = (function () { const offset = new THREE.Vector3(); // so camera.up is the orbit axis const quat = new THREE.Quaternion().setFromUnitVectors( object.up, new THREE.Vector3(0, 1, 0) ); const quatInverse = quat.clone().invert(); const lastPosition = new THREE.Vector3(); const lastQuaternion = new THREE.Quaternion(); const twoPI = 2 * Math.PI; return function update() { const position = scope.object.position; offset.copy(position).sub(scope.target); // rotate offset to "y-axis-is-up" space offset.applyQuaternion(quat); // angle from z-axis around y-axis spherical.setFromVector3(offset); if (scope.autoRotate && state === STATE.NONE) { rotateLeft(getAutoRotationAngle()); } if (scope.enableDamping) { spherical.theta += sphericalDelta.theta * scope.dampingFactor; spherical.phi += sphericalDelta.phi * scope.dampingFactor; } else { spherical.theta += sphericalDelta.theta; spherical.phi += sphericalDelta.phi; } // restrict theta to be between desired limits let min = scope.minAzimuthAngle; let max = scope.maxAzimuthAngle; if (isFinite(min) && isFinite(max)) { if (min < -Math.PI) min += twoPI; else if (min > Math.PI) min -= twoPI; if (max < -Math.PI) max += twoPI; else if (max > Math.PI) max -= twoPI; if (min <= max) { spherical.theta = Math.max(min, Math.min(max, spherical.theta)); } else { spherical.theta = spherical.theta > (min + max) / 2 ? Math.max(min, spherical.theta) : Math.min(max, spherical.theta); } } // restrict phi to be between desired limits spherical.phi = Math.max( scope.minPolarAngle, Math.min(scope.maxPolarAngle, spherical.phi) ); spherical.makeSafe(); spherical.radius *= scale; // restrict radius to be between desired limits spherical.radius = Math.max( scope.minDistance, Math.min(scope.maxDistance, spherical.radius) ); // move target to panned location if (scope.enableDamping === true) { scope.target.addScaledVector(panOffset, scope.dampingFactor); } else { scope.target.add(panOffset); } offset.setFromSpherical(spherical); // rotate offset back to "camera-up-vector-is-up" space offset.applyQuaternion(quatInverse); position.copy(scope.target).add(offset); scope.object.lookAt(scope.target); if (scope.enableDamping === true) { sphericalDelta.theta *= 1 - scope.dampingFactor; sphericalDelta.phi *= 1 - scope.dampingFactor; panOffset.multiplyScalar(1 - scope.dampingFactor); } else { sphericalDelta.set(0, 0, 0); panOffset.set(0, 0, 0); } scale = 1; // update condition is: // min(camera displacement, camera rotation in radians)^2 > EPS // using small-angle approximation cos(x/2) = 1 - x^2 / 8 if ( zoomChanged || lastPosition.distanceToSquared(scope.object.position) > EPS || 8 * (1 - lastQuaternion.dot(scope.object.quaternion)) > EPS ) { scope.dispatchEvent(_changeEvent); lastPosition.copy(scope.object.position); lastQuaternion.copy(scope.object.quaternion); zoomChanged = false; return true; } return false; }; })(); this.dispose = function () { scope.domElement.removeEventListener("contextmenu", onContextMenu); scope.domElement.removeEventListener("pointerdown", onPointerDown); scope.domElement.removeEventListener("pointercancel", onPointerCancel); scope.domElement.removeEventListener("wheel", onMouseWheel); scope.domElement.removeEventListener("pointermove", onPointerMove); scope.domElement.removeEventListener("pointerup", onPointerUp); if (scope._domElementKeyEvents !== null) { scope._domElementKeyEvents.removeEventListener("keydown", onKeyDown); } //scope.dispatchEvent( { type: 'dispose' } ); // should this be added here? }; // // internals // const scope = this; const STATE = { NONE: -1, ROTATE: 0, DOLLY: 1, PAN: 2, TOUCH_ROTATE: 3, TOUCH_PAN: 4, TOUCH_DOLLY_PAN: 5, TOUCH_DOLLY_ROTATE: 6 }; let state = STATE.NONE; const EPS = 0.000001; // current position in spherical coordinates const spherical = new THREE.Spherical(); const sphericalDelta = new THREE.Spherical(); let scale = 1; const panOffset = new THREE.Vector3(); let zoomChanged = false; const rotateStart = new THREE.Vector2(); const rotateEnd = new THREE.Vector2(); const rotateDelta = new THREE.Vector2(); const panStart = new THREE.Vector2(); const panEnd = new THREE.Vector2(); const panDelta = new THREE.Vector2(); const dollyStart = new THREE.Vector2(); const dollyEnd = new THREE.Vector2(); const dollyDelta = new THREE.Vector2(); const pointers = []; const pointerPositions = {}; function getAutoRotationAngle() { return ((2 * Math.PI) / 60 / 60) * scope.autoRotateSpeed; } function getZoomScale() { return Math.pow(0.95, scope.zoomSpeed); } function rotateLeft(angle) { sphericalDelta.theta -= angle; } function rotateUp(angle) { sphericalDelta.phi -= angle; } const panLeft = (function () { const v = new THREE.Vector3(); return function panLeft(distance, objectMatrix) { v.setFromMatrixColumn(objectMatrix, 0); // get X column of objectMatrix v.multiplyScalar(-distance); panOffset.add(v); }; })(); const panUp = (function () { const v = new THREE.Vector3(); return function panUp(distance, objectMatrix) { if (scope.screenSpacePanning === true) { v.setFromMatrixColumn(objectMatrix, 1); } else { v.setFromMatrixColumn(objectMatrix, 0); v.crossVectors(scope.object.up, v); } v.multiplyScalar(distance); panOffset.add(v); }; })(); // deltaX and deltaY are in pixels; right and down are positive const pan = (function () { const offset = new THREE.Vector3(); return function pan(deltaX, deltaY) { const element = scope.domElement; if (scope.object.isPerspectiveCamera) { // perspective const position = scope.object.position; offset.copy(position).sub(scope.target); let targetDistance = offset.length(); // half of the fov is center to top of screen targetDistance *= Math.tan( ((scope.object.fov / 2) * Math.PI) / 180.0 ); // we use only clientHeight here so aspect ratio does not distort speed panLeft( (2 * deltaX * targetDistance) / element.clientHeight, scope.object.matrix ); panUp( (2 * deltaY * targetDistance) / element.clientHeight, scope.object.matrix ); } else if (scope.object.isOrthographicCamera) { // orthographic panLeft( (deltaX * (scope.object.right - scope.object.left)) / scope.object.zoom / element.clientWidth, scope.object.matrix ); panUp( (deltaY * (scope.object.top - scope.object.bottom)) / scope.object.zoom / element.clientHeight, scope.object.matrix ); } else { // camera neither orthographic nor perspective console.warn( "WARNING: OrbitControls.js encountered an unknown camera type - pan disabled." ); scope.enablePan = false; } }; })(); function dollyOut(dollyScale) { if (scope.object.isPerspectiveCamera) { scale /= dollyScale; } else if (scope.object.isOrthographicCamera) { scope.object.zoom = Math.max( scope.minZoom, Math.min(scope.maxZoom, scope.object.zoom * dollyScale) ); scope.object.updateProjectionMatrix(); zoomChanged = true; } else { console.warn( "WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled." ); scope.enableZoom = false; } } function dollyIn(dollyScale) { if (scope.object.isPerspectiveCamera) { scale *= dollyScale; } else if (scope.object.isOrthographicCamera) { scope.object.zoom = Math.max( scope.minZoom, Math.min(scope.maxZoom, scope.object.zoom / dollyScale) ); scope.object.updateProjectionMatrix(); zoomChanged = true; } else { console.warn( "WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled." ); scope.enableZoom = false; } } // // event callbacks - update the object state // function handleMouseDownRotate(event) { rotateStart.set(event.clientX, event.clientY); } function handleMouseDownDolly(event) { dollyStart.set(event.clientX, event.clientY); } function handleMouseDownPan(event) { panStart.set(event.clientX, event.clientY); } function handleMouseMoveRotate(event) { rotateEnd.set(event.clientX, event.clientY); rotateDelta .subVectors(rotateEnd, rotateStart) .multiplyScalar(scope.rotateSpeed); const element = scope.domElement; rotateLeft((2 * Math.PI * rotateDelta.x) / element.clientHeight); // yes, height rotateUp((2 * Math.PI * rotateDelta.y) / element.clientHeight); rotateStart.copy(rotateEnd); scope.update(); } function handleMouseMoveDolly(event) { dollyEnd.set(event.clientX, event.clientY); dollyDelta.subVectors(dollyEnd, dollyStart); if (dollyDelta.y > 0) { dollyOut(getZoomScale()); } else if (dollyDelta.y < 0) { dollyIn(getZoomScale()); } dollyStart.copy(dollyEnd); scope.update(); } function handleMouseMovePan(event) { panEnd.set(event.clientX, event.clientY); panDelta.subVectors(panEnd, panStart).multiplyScalar(scope.panSpeed); pan(panDelta.x, panDelta.y); panStart.copy(panEnd); scope.update(); } function handleMouseWheel(event) { if (event.deltaY < 0) { dollyIn(getZoomScale()); } else if (event.deltaY > 0) { dollyOut(getZoomScale()); } scope.update(); } function handleKeyDown(event) { let needsUpdate = false; switch (event.code) { case scope.keys.UP: pan(0, scope.keyPanSpeed); needsUpdate = true; break; case scope.keys.BOTTOM: pan(0, -scope.keyPanSpeed); needsUpdate = true; break; case scope.keys.LEFT: pan(scope.keyPanSpeed, 0); needsUpdate = true; break; case scope.keys.RIGHT: pan(-scope.keyPanSpeed, 0); needsUpdate = true; break; } if (needsUpdate) { // prevent the browser from scrolling on cursor keys event.preventDefault(); scope.update(); } } function handleTouchStartRotate() { if (pointers.length === 1) { rotateStart.set(pointers[0].pageX, pointers[0].pageY); } else { const x = 0.5 * (pointers[0].pageX + pointers[1].pageX); const y = 0.5 * (pointers[0].pageY + pointers[1].pageY); rotateStart.set(x, y); } } function handleTouchStartPan() { if (pointers.length === 1) { panStart.set(pointers[0].pageX, pointers[0].pageY); } else { const x = 0.5 * (pointers[0].pageX + pointers[1].pageX); const y = 0.5 * (pointers[0].pageY + pointers[1].pageY); panStart.set(x, y); } } function handleTouchStartDolly() { const dx = pointers[0].pageX - pointers[1].pageX; const dy = pointers[0].pageY - pointers[1].pageY; const distance = Math.sqrt(dx * dx + dy * dy); dollyStart.set(0, distance); } function handleTouchStartDollyPan() { if (scope.enableZoom) handleTouchStartDolly(); if (scope.enablePan) handleTouchStartPan(); } function handleTouchStartDollyRotate() { if (scope.enableZoom) handleTouchStartDolly(); if (scope.enableRotate) handleTouchStartRotate(); } function handleTouchMoveRotate(event) { if (pointers.length == 1) { rotateEnd.set(event.pageX, event.pageY); } else { const position = getSecondPointerPosition(event); const x = 0.5 * (event.pageX + position.x); const y = 0.5 * (event.pageY + position.y); rotateEnd.set(x, y); } rotateDelta .subVectors(rotateEnd, rotateStart) .multiplyScalar(scope.rotateSpeed); const element = scope.domElement; rotateLeft((2 * Math.PI * rotateDelta.x) / element.clientHeight); // yes, height rotateUp((2 * Math.PI * rotateDelta.y) / element.clientHeight); rotateStart.copy(rotateEnd); } function handleTouchMovePan(event) { if (pointers.length === 1) { panEnd.set(event.pageX, event.pageY); } else { const position = getSecondPointerPosition(event); const x = 0.5 * (event.pageX + position.x); const y = 0.5 * (event.pageY + position.y); panEnd.set(x, y); } panDelta.subVectors(panEnd, panStart).multiplyScalar(scope.panSpeed); pan(panDelta.x, panDelta.y); panStart.copy(panEnd); } function handleTouchMoveDolly(event) { const position = getSecondPointerPosition(event); const dx = event.pageX - position.x; const dy = event.pageY - position.y; const distance = Math.sqrt(dx * dx + dy * dy); dollyEnd.set(0, distance); dollyDelta.set(0, Math.pow(dollyEnd.y / dollyStart.y, scope.zoomSpeed)); dollyOut(dollyDelta.y); dollyStart.copy(dollyEnd); } function handleTouchMoveDollyPan(event) { if (scope.enableZoom) handleTouchMoveDolly(event); if (scope.enablePan) handleTouchMovePan(event); } function handleTouchMoveDollyRotate(event) { if (scope.enableZoom) handleTouchMoveDolly(event); if (scope.enableRotate) handleTouchMoveRotate(event); } // // event handlers - FSM: listen for events and reset state // function onPointerDown(event) { if (scope.enabled === false) return; if (pointers.length === 0) { scope.domElement.setPointerCapture(event.pointerId); scope.domElement.addEventListener("pointermove", onPointerMove); scope.domElement.addEventListener("pointerup", onPointerUp); } // addPointer(event); if (event.pointerType === "touch") { onTouchStart(event); } else { onMouseDown(event); } } function onPointerMove(event) { if (scope.enabled === false) return; if (event.pointerType === "touch") { onTouchMove(event); } else { onMouseMove(event); } } function onPointerUp(event) { removePointer(event); if (pointers.length === 0) { scope.domElement.releasePointerCapture(event.pointerId); scope.domElement.removeEventListener("pointermove", onPointerMove); scope.domElement.removeEventListener("pointerup", onPointerUp); } scope.dispatchEvent(_endEvent); state = STATE.NONE; } function onPointerCancel(event) { removePointer(event); } function onMouseDown(event) { let mouseAction; switch (event.button) { case 0: mouseAction = scope.mouseButtons.LEFT; break; case 1: mouseAction = scope.mouseButtons.MIDDLE; break; case 2: mouseAction = scope.mouseButtons.RIGHT; break; default: mouseAction = -1; } switch (mouseAction) { case THREE.MOUSE.DOLLY: if (scope.enableZoom === false) return; handleMouseDownDolly(event); state = STATE.DOLLY; break; case THREE.MOUSE.ROTATE: if (event.ctrlKey || event.metaKey || event.shiftKey) { if (scope.enablePan === false) return; handleMouseDownPan(event); state = STATE.PAN; } else { if (scope.enableRotate === false) return; handleMouseDownRotate(event); state = STATE.ROTATE; } break; case THREE.MOUSE.PAN: if (event.ctrlKey || event.metaKey || event.shiftKey) { if (scope.enableRotate === false) return; handleMouseDownRotate(event); state = STATE.ROTATE; } else { if (scope.enablePan === false) return; handleMouseDownPan(event); state = STATE.PAN; } break; default: state = STATE.NONE; } if (state !== STATE.NONE) { scope.dispatchEvent(_startEvent); } } function onMouseMove(event) { if (scope.enabled === false) return; switch (state) { case STATE.ROTATE: if (scope.enableRotate === false) return; handleMouseMoveRotate(event); break; case STATE.DOLLY: if (scope.enableZoom === false) return; handleMouseMoveDolly(event); break; case STATE.PAN: if (scope.enablePan === false) return; handleMouseMovePan(event); break; } } function onMouseWheel(event) { if ( scope.enabled === false || scope.enableZoom === false || state !== STATE.NONE ) return; event.preventDefault(); scope.dispatchEvent(_startEvent); handleMouseWheel(event); scope.dispatchEvent(_endEvent); } function onKeyDown(event) { if (scope.enabled === false || scope.enablePan === false) return; handleKeyDown(event); } function onTouchStart(event) { trackPointer(event); switch (pointers.length) { case 1: switch (scope.touches.ONE) { case THREE.TOUCH.ROTATE: if (scope.enableRotate === false) return; handleTouchStartRotate(); state = STATE.TOUCH_ROTATE; break; case THREE.TOUCH.PAN: if (scope.enablePan === false) return; handleTouchStartPan(); state = STATE.TOUCH_PAN; break; default: state = STATE.NONE; } break; case 2: switch (scope.touches.TWO) { case THREE.TOUCH.DOLLY_PAN: if (scope.enableZoom === false && scope.enablePan === false) return; handleTouchStartDollyPan(); state = STATE.TOUCH_DOLLY_PAN; break; case THREE.TOUCH.DOLLY_ROTATE: if (scope.enableZoom === false && scope.enableRotate === false) return; handleTouchStartDollyRotate(); state = STATE.TOUCH_DOLLY_ROTATE; break; default: state = STATE.NONE; } break; default: state = STATE.NONE; } if (state !== STATE.NONE) { scope.dispatchEvent(_startEvent); } } function onTouchMove(event) { trackPointer(event); switch (state) { case STATE.TOUCH_ROTATE: if (scope.enableRotate === false) return; handleTouchMoveRotate(event); scope.update(); break; case STATE.TOUCH_PAN: if (scope.enablePan === false) return; handleTouchMovePan(event); scope.update(); break; case STATE.TOUCH_DOLLY_PAN: if (scope.enableZoom === false && scope.enablePan === false) return; handleTouchMoveDollyPan(event); scope.update(); break; case STATE.TOUCH_DOLLY_ROTATE: if (scope.enableZoom === false && scope.enableRotate === false) return; handleTouchMoveDollyRotate(event); scope.update(); break; default: state = STATE.NONE; } } function onContextMenu(event) { if (scope.enabled === false) return; event.preventDefault(); } function addPointer(event) { pointers.push(event); } function removePointer(event) { delete pointerPositions[event.pointerId]; for (let i = 0; i < pointers.length; i++) { if (pointers[i].pointerId == event.pointerId) { pointers.splice(i, 1); return; } } } function trackPointer(event) { let position = pointerPositions[event.pointerId]; if (position === undefined) { position = new THREE.Vector2(); pointerPositions[event.pointerId] = position; } position.set(event.pageX, event.pageY); } function getSecondPointerPosition(event) { const pointer = event.pointerId === pointers[0].pointerId ? pointers[1] : pointers[0]; return pointerPositions[pointer.pointerId]; } // scope.domElement.addEventListener("contextmenu", onContextMenu); scope.domElement.addEventListener("pointerdown", onPointerDown); scope.domElement.addEventListener("pointercancel", onPointerCancel); scope.domElement.addEventListener("wheel", onMouseWheel, { passive: false }); // force an update at start this.update(); } } // This set of controls performs orbiting, dollying (zooming), and panning. // Unlike TrackballControls, it maintains the "up" direction object.up (+Y by default). // This is very similar to OrbitControls, another set of touch behavior // // Orbit - right mouse, or left mouse + ctrl/meta/shiftKey / touch: two-finger rotate // Zoom - middle mouse, or mousewheel / touch: two-finger spread or squish // Pan - left mouse, or arrow keys / touch: one-finger move class MapControls extends OrbitControls { constructor(object, domElement) { super(object, domElement); this.screenSpacePanning = false; // pan orthogonal to world-space direction camera.up this.mouseButtons.LEFT = THREE.MOUSE.PAN; this.mouseButtons.RIGHT = THREE.MOUSE.ROTATE; this.touches.ONE = THREE.TOUCH.PAN; this.touches.TWO = THREE.TOUCH.DOLLY_ROTATE; } } return OrbitControls; })()3c:Ta80,ParametricGeometry = (function () { /** * Parametric Surfaces Geometry * based on the brilliant article by @prideout https://prideout.net/blog/old/blog/index.html@p=44.html */ class ParametricGeometry extends THREE.BufferGeometry { constructor( func = (u, v, target) => target.set(u, v, Math.cos(u) * Math.sin(v)), slices = 8, stacks = 8 ) { super(); this.type = "ParametricGeometry"; this.parameters = { func: func, slices: slices, stacks: stacks }; // buffers const indices = []; const vertices = []; const normals = []; const uvs = []; const EPS = 0.00001; const normal = new THREE.Vector3(); const p0 = new THREE.Vector3(), p1 = new THREE.Vector3(); const pu = new THREE.Vector3(), pv = new THREE.Vector3(); // generate vertices, normals and uvs const sliceCount = slices + 1; for (let i = 0; i <= stacks; i++) { const v = i / stacks; for (let j = 0; j <= slices; j++) { const u = j / slices; // vertex func(u, v, p0); vertices.push(p0.x, p0.y, p0.z); // normal // approximate tangent vectors via finite differences if (u - EPS >= 0) { func(u - EPS, v, p1); pu.subVectors(p0, p1); } else { func(u + EPS, v, p1); pu.subVectors(p1, p0); } if (v - EPS >= 0) { func(u, v - EPS, p1); pv.subVectors(p0, p1); } else { func(u, v + EPS, p1); pv.subVectors(p1, p0); } // cross product of tangent vectors returns surface normal normal.crossVectors(pu, pv).normalize(); normals.push(normal.x, normal.y, normal.z); // uv uvs.push(u, v); } } // generate indices for (let i = 0; i < stacks; i++) { for (let j = 0; j < slices; j++) { const a = i * sliceCount + j; const b = i * sliceCount + j + 1; const c = (i + 1) * sliceCount + j + 1; const d = (i + 1) * sliceCount + j; // faces one and two indices.push(a, b, d); indices.push(b, c, d); } } // build geometry this.setIndex(indices); this.setAttribute( "position", new THREE.Float32BufferAttribute(vertices, 3) ); this.setAttribute("normal", new THREE.Float32BufferAttribute(normals, 3)); this.setAttribute("uv", new THREE.Float32BufferAttribute(uvs, 2)); } } return ParametricGeometry; })()3d:T33a5,LineMaterial = (function () { /** * parameters = { * color: , * linewidth: , * dashed: , * dashScale: , * dashSize: , * dashOffset: , * gapSize: , * resolution: , // to be set by renderer * } */ THREE.UniformsLib.line = { worldUnits: { value: 1 }, linewidth: { value: 1 }, resolution: { value: new THREE.Vector2(1, 1) }, dashOffset: { value: 0 }, dashScale: { value: 1 }, dashSize: { value: 1 }, gapSize: { value: 1 } // todo FIX - maybe change to totalSize }; THREE.ShaderLib["line"] = { uniforms: THREE.UniformsUtils.merge([ THREE.UniformsLib.common, THREE.UniformsLib.fog, THREE.UniformsLib.line ]), vertexShader: /* glsl */ ` #include #include #include #include #include uniform float linewidth; uniform vec2 resolution; attribute vec3 instanceStart; attribute vec3 instanceEnd; attribute vec3 instanceColorStart; attribute vec3 instanceColorEnd; #ifdef WORLD_UNITS varying vec4 worldPos; varying vec3 worldStart; varying vec3 worldEnd; #ifdef USE_DASH varying vec2 vUv; #endif #else varying vec2 vUv; #endif #ifdef USE_DASH uniform float dashScale; attribute float instanceDistanceStart; attribute float instanceDistanceEnd; varying float vLineDistance; #endif void trimSegment( const in vec4 start, inout vec4 end ) { // trim end segment so it terminates between the camera plane and the near plane // conservative estimate of the near plane float a = projectionMatrix[ 2 ][ 2 ]; // 3nd entry in 3th column float b = projectionMatrix[ 3 ][ 2 ]; // 3nd entry in 4th column float nearEstimate = - 0.5 * b / a; float alpha = ( nearEstimate - start.z ) / ( end.z - start.z ); end.xyz = mix( start.xyz, end.xyz, alpha ); } void main() { #ifdef USE_COLOR vColor.xyz = ( position.y < 0.5 ) ? instanceColorStart : instanceColorEnd; #endif #ifdef USE_DASH vLineDistance = ( position.y < 0.5 ) ? dashScale * instanceDistanceStart : dashScale * instanceDistanceEnd; vUv = uv; #endif float aspect = resolution.x / resolution.y; // camera space vec4 start = modelViewMatrix * vec4( instanceStart, 1.0 ); vec4 end = modelViewMatrix * vec4( instanceEnd, 1.0 ); #ifdef WORLD_UNITS worldStart = start.xyz; worldEnd = end.xyz; #else vUv = uv; #endif // special case for perspective projection, and segments that terminate either in, or behind, the camera plane // clearly the gpu firmware has a way of addressing this issue when projecting into ndc space // but we need to perform ndc-space calculations in the shader, so we must address this issue directly // perhaps there is a more elegant solution -- WestLangley bool perspective = ( projectionMatrix[ 2 ][ 3 ] == - 1.0 ); // 4th entry in the 3rd column if ( perspective ) { if ( start.z < 0.0 && end.z >= 0.0 ) { trimSegment( start, end ); } else if ( end.z < 0.0 && start.z >= 0.0 ) { trimSegment( end, start ); } } // clip space vec4 clipStart = projectionMatrix * start; vec4 clipEnd = projectionMatrix * end; // ndc space vec3 ndcStart = clipStart.xyz / clipStart.w; vec3 ndcEnd = clipEnd.xyz / clipEnd.w; // direction vec2 dir = ndcEnd.xy - ndcStart.xy; // account for clip-space aspect ratio dir.x *= aspect; dir = normalize( dir ); #ifdef WORLD_UNITS // get the offset direction as perpendicular to the view vector vec3 worldDir = normalize( end.xyz - start.xyz ); vec3 offset; if ( position.y < 0.5 ) { offset = normalize( cross( start.xyz, worldDir ) ); } else { offset = normalize( cross( end.xyz, worldDir ) ); } // sign flip if ( position.x < 0.0 ) offset *= - 1.0; float forwardOffset = dot( worldDir, vec3( 0.0, 0.0, 1.0 ) ); // don't extend the line if we're rendering dashes because we // won't be rendering the endcaps #ifndef USE_DASH // extend the line bounds to encompass endcaps start.xyz += - worldDir * linewidth * 0.5; end.xyz += worldDir * linewidth * 0.5; // shift the position of the quad so it hugs the forward edge of the line offset.xy -= dir * forwardOffset; offset.z += 0.5; #endif // endcaps if ( position.y > 1.0 || position.y < 0.0 ) { offset.xy += dir * 2.0 * forwardOffset; } // adjust for linewidth offset *= linewidth * 0.5; // set the world position worldPos = ( position.y < 0.5 ) ? start : end; worldPos.xyz += offset; // project the worldpos vec4 clip = projectionMatrix * worldPos; // shift the depth of the projected points so the line // segments overlap neatly vec3 clipPose = ( position.y < 0.5 ) ? ndcStart : ndcEnd; clip.z = clipPose.z * clip.w; #else vec2 offset = vec2( dir.y, - dir.x ); // undo aspect ratio adjustment dir.x /= aspect; offset.x /= aspect; // sign flip if ( position.x < 0.0 ) offset *= - 1.0; // endcaps if ( position.y < 0.0 ) { offset += - dir; } else if ( position.y > 1.0 ) { offset += dir; } // adjust for linewidth offset *= linewidth; // adjust for clip-space to screen-space conversion // maybe resolution should be based on viewport ... offset /= resolution.y; // select end vec4 clip = ( position.y < 0.5 ) ? clipStart : clipEnd; // back to clip space offset *= clip.w; clip.xy += offset; #endif gl_Position = clip; vec4 mvPosition = ( position.y < 0.5 ) ? start : end; // this is an approximation #include #include #include } `, fragmentShader: /* glsl */ ` uniform vec3 diffuse; uniform float opacity; uniform float linewidth; #ifdef USE_DASH uniform float dashOffset; uniform float dashSize; uniform float gapSize; #endif varying float vLineDistance; #ifdef WORLD_UNITS varying vec4 worldPos; varying vec3 worldStart; varying vec3 worldEnd; #ifdef USE_DASH varying vec2 vUv; #endif #else varying vec2 vUv; #endif #include #include #include #include #include vec2 closestLineToLine(vec3 p1, vec3 p2, vec3 p3, vec3 p4) { float mua; float mub; vec3 p13 = p1 - p3; vec3 p43 = p4 - p3; vec3 p21 = p2 - p1; float d1343 = dot( p13, p43 ); float d4321 = dot( p43, p21 ); float d1321 = dot( p13, p21 ); float d4343 = dot( p43, p43 ); float d2121 = dot( p21, p21 ); float denom = d2121 * d4343 - d4321 * d4321; float numer = d1343 * d4321 - d1321 * d4343; mua = numer / denom; mua = clamp( mua, 0.0, 1.0 ); mub = ( d1343 + d4321 * ( mua ) ) / d4343; mub = clamp( mub, 0.0, 1.0 ); return vec2( mua, mub ); } void main() { #include #ifdef USE_DASH if ( vUv.y < - 1.0 || vUv.y > 1.0 ) discard; // discard endcaps if ( mod( vLineDistance + dashOffset, dashSize + gapSize ) > dashSize ) discard; // todo - FIX #endif float alpha = opacity; #ifdef WORLD_UNITS // Find the closest points on the view ray and the line segment vec3 rayEnd = normalize( worldPos.xyz ) * 1e5; vec3 lineDir = worldEnd - worldStart; vec2 params = closestLineToLine( worldStart, worldEnd, vec3( 0.0, 0.0, 0.0 ), rayEnd ); vec3 p1 = worldStart + lineDir * params.x; vec3 p2 = rayEnd * params.y; vec3 delta = p1 - p2; float len = length( delta ); float norm = len / linewidth; #ifndef USE_DASH #ifdef USE_ALPHA_TO_COVERAGE float dnorm = fwidth( norm ); alpha = 1.0 - smoothstep( 0.5 - dnorm, 0.5 + dnorm, norm ); #else if ( norm > 0.5 ) { discard; } #endif #endif #else #ifdef USE_ALPHA_TO_COVERAGE // artifacts appear on some hardware if a derivative is taken within a conditional float a = vUv.x; float b = ( vUv.y > 0.0 ) ? vUv.y - 1.0 : vUv.y + 1.0; float len2 = a * a + b * b; float dlen = fwidth( len2 ); if ( abs( vUv.y ) > 1.0 ) { alpha = 1.0 - smoothstep( 1.0 - dlen, 1.0 + dlen, len2 ); } #else if ( abs( vUv.y ) > 1.0 ) { float a = vUv.x; float b = ( vUv.y > 0.0 ) ? vUv.y - 1.0 : vUv.y + 1.0; float len2 = a * a + b * b; if ( len2 > 1.0 ) discard; } #endif #endif vec4 diffuseColor = vec4( diffuse, alpha ); #include #include gl_FragColor = vec4( diffuseColor.rgb, alpha ); #include #include #include #include } ` }; class LineMaterial extends THREE.ShaderMaterial { constructor(parameters) { super({ type: "LineMaterial", uniforms: THREE.UniformsUtils.clone(THREE.ShaderLib["line"].uniforms), vertexShader: THREE.ShaderLib["line"].vertexShader, fragmentShader: THREE.ShaderLib["line"].fragmentShader, clipping: true // required for clipping support }); this.isLineMaterial = true; Object.defineProperties(this, { color: { enumerable: true, get: function () { return this.uniforms.diffuse.value; }, set: function (value) { this.uniforms.diffuse.value = value; } }, worldUnits: { enumerable: true, get: function () { return "WORLD_UNITS" in this.defines; }, set: function (value) { if (value === true) { this.defines.WORLD_UNITS = ""; } else { delete this.defines.WORLD_UNITS; } } }, linewidth: { enumerable: true, get: function () { return this.uniforms.linewidth.value; }, set: function (value) { this.uniforms.linewidth.value = value; } }, dashed: { enumerable: true, get: function () { return Boolean("USE_DASH" in this.defines); }, set(value) { if (Boolean(value) !== Boolean("USE_DASH" in this.defines)) { this.needsUpdate = true; } if (value === true) { this.defines.USE_DASH = ""; } else { delete this.defines.USE_DASH; } } }, dashScale: { enumerable: true, get: function () { return this.uniforms.dashScale.value; }, set: function (value) { this.uniforms.dashScale.value = value; } }, dashSize: { enumerable: true, get: function () { return this.uniforms.dashSize.value; }, set: function (value) { this.uniforms.dashSize.value = value; } }, dashOffset: { enumerable: true, get: function () { return this.uniforms.dashOffset.value; }, set: function (value) { this.uniforms.dashOffset.value = value; } }, gapSize: { enumerable: true, get: function () { return this.uniforms.gapSize.value; }, set: function (value) { this.uniforms.gapSize.value = value; } }, opacity: { enumerable: true, get: function () { return this.uniforms.opacity.value; }, set: function (value) { this.uniforms.opacity.value = value; } }, resolution: { enumerable: true, get: function () { return this.uniforms.resolution.value; }, set: function (value) { this.uniforms.resolution.value.copy(value); } }, alphaToCoverage: { enumerable: true, get: function () { return Boolean("USE_ALPHA_TO_COVERAGE" in this.defines); }, set: function (value) { if ( Boolean(value) !== Boolean("USE_ALPHA_TO_COVERAGE" in this.defines) ) { this.needsUpdate = true; } if (value === true) { this.defines.USE_ALPHA_TO_COVERAGE = ""; this.extensions.derivatives = true; } else { delete this.defines.USE_ALPHA_TO_COVERAGE; this.extensions.derivatives = false; } } } }); this.setValues(parameters); } } return LineMaterial; })()3e:T2676,LineSegments2 = (function () { const _start = new THREE.Vector3(); const _end = new THREE.Vector3(); const _start4 = new THREE.Vector4(); const _end4 = new THREE.Vector4(); const _ssOrigin = new THREE.Vector4(); const _ssOrigin3 = new THREE.Vector3(); const _mvMatrix = new THREE.Matrix4(); const _line = new THREE.Line3(); const _closestPoint = new THREE.Vector3(); const _box = new THREE.Box3(); const _sphere = new THREE.Sphere(); const _clipToWorldVector = new THREE.Vector4(); let _ray, _instanceStart, _instanceEnd, _lineWidth; // Returns the margin required to expand by in world space given the distance from the camera, // line width, resolution, and camera projection function getWorldSpaceHalfWidth(camera, distance, resolution) { // transform into clip space, adjust the x and y values by the pixel width offset, then // transform back into world space to get world offset. Note clip space is [-1, 1] so full // width does not need to be halved. _clipToWorldVector .set(0, 0, -distance, 1.0) .applyMatrix4(camera.projectionMatrix); _clipToWorldVector.multiplyScalar(1.0 / _clipToWorldVector.w); _clipToWorldVector.x = _lineWidth / resolution.width; _clipToWorldVector.y = _lineWidth / resolution.height; _clipToWorldVector.applyMatrix4(camera.projectionMatrixInverse); _clipToWorldVector.multiplyScalar(1.0 / _clipToWorldVector.w); return Math.abs(Math.max(_clipToWorldVector.x, _clipToWorldVector.y)); } function raycastWorldUnits(lineSegments, intersects) { for (let i = 0, l = _instanceStart.count; i < l; i++) { _line.start.fromBufferAttribute(_instanceStart, i); _line.end.fromBufferAttribute(_instanceEnd, i); const pointOnLine = new THREE.Vector3(); const point = new THREE.Vector3(); _ray.distanceSqToSegment(_line.start, _line.end, point, pointOnLine); const isInside = point.distanceTo(pointOnLine) < _lineWidth * 0.5; if (isInside) { intersects.push({ point, pointOnLine, distance: _ray.origin.distanceTo(point), object: lineSegments, face: null, faceIndex: i, uv: null, uv2: null }); } } } function raycastScreenSpace(lineSegments, camera, intersects) { const projectionMatrix = camera.projectionMatrix; const material = lineSegments.material; const resolution = material.resolution; const matrixWorld = lineSegments.matrixWorld; const geometry = lineSegments.geometry; const instanceStart = geometry.attributes.instanceStart; const instanceEnd = geometry.attributes.instanceEnd; const near = -camera.near; // // pick a point 1 unit out along the ray to avoid the ray origin // sitting at the camera origin which will cause "w" to be 0 when // applying the projection matrix. _ray.at(1, _ssOrigin); // ndc space [ - 1.0, 1.0 ] _ssOrigin.w = 1; _ssOrigin.applyMatrix4(camera.matrixWorldInverse); _ssOrigin.applyMatrix4(projectionMatrix); _ssOrigin.multiplyScalar(1 / _ssOrigin.w); // screen space _ssOrigin.x *= resolution.x / 2; _ssOrigin.y *= resolution.y / 2; _ssOrigin.z = 0; _ssOrigin3.copy(_ssOrigin); _mvMatrix.multiplyMatrices(camera.matrixWorldInverse, matrixWorld); for (let i = 0, l = instanceStart.count; i < l; i++) { _start4.fromBufferAttribute(instanceStart, i); _end4.fromBufferAttribute(instanceEnd, i); _start4.w = 1; _end4.w = 1; // camera space _start4.applyMatrix4(_mvMatrix); _end4.applyMatrix4(_mvMatrix); // skip the segment if it's entirely behind the camera const isBehindCameraNear = _start4.z > near && _end4.z > near; if (isBehindCameraNear) { continue; } // trim the segment if it extends behind camera near if (_start4.z > near) { const deltaDist = _start4.z - _end4.z; const t = (_start4.z - near) / deltaDist; _start4.lerp(_end4, t); } else if (_end4.z > near) { const deltaDist = _end4.z - _start4.z; const t = (_end4.z - near) / deltaDist; _end4.lerp(_start4, t); } // clip space _start4.applyMatrix4(projectionMatrix); _end4.applyMatrix4(projectionMatrix); // ndc space [ - 1.0, 1.0 ] _start4.multiplyScalar(1 / _start4.w); _end4.multiplyScalar(1 / _end4.w); // screen space _start4.x *= resolution.x / 2; _start4.y *= resolution.y / 2; _end4.x *= resolution.x / 2; _end4.y *= resolution.y / 2; // create 2d segment _line.start.copy(_start4); _line.start.z = 0; _line.end.copy(_end4); _line.end.z = 0; // get closest point on ray to segment const param = _line.closestPointToPointParameter(_ssOrigin3, true); _line.at(param, _closestPoint); // check if the intersection point is within clip space const zPos = THREE.MathUtils.lerp(_start4.z, _end4.z, param); const isInClipSpace = zPos >= -1 && zPos <= 1; const isInside = _ssOrigin3.distanceTo(_closestPoint) < _lineWidth * 0.5; if (isInClipSpace && isInside) { _line.start.fromBufferAttribute(instanceStart, i); _line.end.fromBufferAttribute(instanceEnd, i); _line.start.applyMatrix4(matrixWorld); _line.end.applyMatrix4(matrixWorld); const pointOnLine = new THREE.Vector3(); const point = new THREE.Vector3(); _ray.distanceSqToSegment(_line.start, _line.end, point, pointOnLine); intersects.push({ point: point, pointOnLine: pointOnLine, distance: _ray.origin.distanceTo(point), object: lineSegments, face: null, faceIndex: i, uv: null, uv2: null }); } } } class LineSegments2 extends THREE.Mesh { constructor( geometry = new THREE.LineSegmentsGeometry(), material = new THREE.LineMaterial({ color: Math.random() * 0xffffff }) ) { super(geometry, material); this.isLineSegments2 = true; this.type = "LineSegments2"; } // for backwards-compatibility, but could be a method of THREE.LineSegmentsGeometry... computeLineDistances() { const geometry = this.geometry; const instanceStart = geometry.attributes.instanceStart; const instanceEnd = geometry.attributes.instanceEnd; const lineDistances = new Float32Array(2 * instanceStart.count); for (let i = 0, j = 0, l = instanceStart.count; i < l; i++, j += 2) { _start.fromBufferAttribute(instanceStart, i); _end.fromBufferAttribute(instanceEnd, i); lineDistances[j] = j === 0 ? 0 : lineDistances[j - 1]; lineDistances[j + 1] = lineDistances[j] + _start.distanceTo(_end); } const instanceDistanceBuffer = new THREE.InstancedInterleavedBuffer( lineDistances, 2, 1 ); // d0, d1 geometry.setAttribute( "instanceDistanceStart", new THREE.InterleavedBufferAttribute(instanceDistanceBuffer, 1, 0) ); // d0 geometry.setAttribute( "instanceDistanceEnd", new THREE.InterleavedBufferAttribute(instanceDistanceBuffer, 1, 1) ); // d1 return this; } raycast(raycaster, intersects) { const worldUnits = this.material.worldUnits; const camera = raycaster.camera; if (camera === null && !worldUnits) { console.error( 'LineSegments2: "Raycaster.camera" needs to be set in order to raycast against LineSegments2 while worldUnits is set to false.' ); } const threshold = raycaster.params.Line2 !== undefined ? raycaster.params.Line2.threshold || 0 : 0; _ray = raycaster.ray; const matrixWorld = this.matrixWorld; const geometry = this.geometry; const material = this.material; _lineWidth = material.linewidth + threshold; _instanceStart = geometry.attributes.instanceStart; _instanceEnd = geometry.attributes.instanceEnd; // check if we intersect the sphere bounds if (geometry.boundingSphere === null) { geometry.computeBoundingSphere(); } _sphere.copy(geometry.boundingSphere).applyMatrix4(matrixWorld); // increase the sphere bounds by the worst case line screen space width let sphereMargin; if (worldUnits) { sphereMargin = _lineWidth * 0.5; } else { const distanceToSphere = Math.max( camera.near, _sphere.distanceToPoint(_ray.origin) ); sphereMargin = getWorldSpaceHalfWidth( camera, distanceToSphere, material.resolution ); } _sphere.radius += sphereMargin; if (_ray.intersectsSphere(_sphere) === false) { return; } // check if we intersect the box bounds if (geometry.boundingBox === null) { geometry.computeBoundingBox(); } _box.copy(geometry.boundingBox).applyMatrix4(matrixWorld); // increase the box bounds by the worst case line width let boxMargin; if (worldUnits) { boxMargin = _lineWidth * 0.5; } else { const distanceToBox = Math.max( camera.near, _box.distanceToPoint(_ray.origin) ); boxMargin = getWorldSpaceHalfWidth( camera, distanceToBox, material.resolution ); } _box.expandByScalar(boxMargin); if (_ray.intersectsBox(_box) === false) { return; } if (worldUnits) { raycastWorldUnits(this, intersects); } else { raycastScreenSpace(this, camera, intersects); } } } return LineSegments2; })()3f:[] 2f:{"title":"MiniShelf","cells":[{"id":0,"value":"# MiniShelf","pinned":false,"hidden":false,"mode":"md"},{"id":410,"value":"Make a parametric shelf! We present three visualizations: 3D view, 2D view of parts, and the generated toolpath. Try changing the sliders, shelf thickness, and shelf height values to see what happens.","pinned":false,"hidden":false,"mode":"md"},{"id":281,"value":"viewof shelfVizSpace = new Promise((resolve) => {\n resolve(html`

`);\n}).then((domElement) => {\n let vizSpace = new VisualizationSpace(domElement);\n make3dRendering(vizSpace);\n invalidation.then(() => vizSpace.removeAllViz());\n domElement.value = vizSpace;\n return domElement;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"## Parameters","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"viewof caseHeight = Inputs.range([2, 40], {\n value: 18,\n step: 1,\n label: \"Case Height\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"viewof caseWidth = Inputs.range([2, 40], {\n value: 12,\n step: 1,\n label: \"Case Width\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"viewof caseDepth = Inputs.range([2, 40], {\n value: 8,\n step: 1,\n label: \"Case Depth\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"shelfHeights = [4, 10]","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"shelfThickness = 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"## Geometry Generation","pinned":false,"hidden":false,"mode":"md"},{"id":19,"value":"viewof shelfParts = {\n let canvas = DOM.canvas(480, 240);\n canvas.style.backgroundColor = \"white\";\n canvas.style.border = \"1px solid black\";\n let ps =\n canvas.ps ||\n (() => {\n let ps = new paper.PaperScope();\n ps.setup(canvas);\n // Flip Y axis so that it points \"up\" the page to match the Shopbot. This should only occur once to avoid constant flipping.\n ps.view.scale(1, -1);\n return ps;\n })();\n canvas.ps = ps;\n let geometries = generateGeometries(ps);\n invalidation.then(() => {\n ps.remove();\n canvas.remove();\n });\n canvas.value = geometries;\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":431,"value":"Separately from the 3D rendering of the shelf, we'll draw the 2D geometries of the shelf parts using the parameters provided.","pinned":false,"hidden":false,"mode":"md"},{"id":41,"value":"SHELF_UPSCALE = 10","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"function generateShelfGeometry(origin) {\n return function (ps) {\n let size = new ps.Size(caseWidth - shelfThickness, caseDepth);\n let rect = new ps.Path.Rectangle(origin, size);\n rect.strokeColor = \"black\";\n rect.strokeWidth = 1;\n rect.cutType = \"cutThrough\";\n let leftRabbet = new ps.Path.Rectangle(\n origin,\n new ps.Size(shelfThickness / 2, caseDepth)\n );\n leftRabbet.strokeColor = \"black\";\n leftRabbet.strokeWidth = 1;\n leftRabbet.dashArray = [2, 1];\n leftRabbet.cutType = \"rabbet\";\n let rightRabbet = new ps.Path.Rectangle(\n new ps.Point(origin.x + (caseWidth - (3 * shelfThickness) / 2), origin.y),\n new ps.Size(shelfThickness / 2, caseDepth)\n );\n rightRabbet.strokeColor = \"black\";\n rightRabbet.strokeWidth = 1;\n rightRabbet.dashArray = [2, 1];\n rightRabbet.cutType = \"rabbet\";\n let group = new ps.Group([rect, leftRabbet, rightRabbet]);\n group.scale(SHELF_UPSCALE, origin);\n return group;\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"## Tooling","pinned":false,"hidden":false,"mode":"md"},{"id":434,"value":"Enter the parameters of your end mill here; changing them will regenerate the toolpath.","pinned":false,"hidden":false,"mode":"md"},{"id":93,"value":"viewof toolDiameter = Inputs.radio([0.125, 0.25, 0.5], {\n label: \"Tool Diameter (in)\",\n value: 0.25\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"viewof toolNumFlutes = Inputs.radio([1, 2, 4], {\n label: \"Tool Number of Flutes\",\n value: 2\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"## Toolpath Generation","pinned":false,"hidden":false,"mode":"md"},{"id":101,"value":"viewof tpVizSpace = new Promise((resolve) => {\n resolve(html`

`);\n}).then((domElement) => {\n let materialParams = {\n width: shopbotBedDims.width,\n height: shopbotBedDims.height,\n thickness: shelfThickness\n };\n let vizSpace = new VisualizationSpace(domElement, materialParams);\n invalidation.then(() => vizSpace.removeAllViz());\n domElement.value = vizSpace;\n return domElement;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":436,"value":"This visualization shows where the mill will move in 3D to cut the shelf parts. You can adjust the stepdown and stepover below and see how the toolpath would change.","pinned":false,"hidden":false,"mode":"md"},{"id":205,"value":"stepdown = toolDiameter / 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"stepover = toolDiameter / 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"### Specific Toolpathing Operations","pinned":false,"hidden":false,"mode":"md"},{"id":215,"value":"function profileOutside(rectangle) {\n // Climb -> clockwise direction\n let origin = {\n x: rectangle.bounds.x / SHELF_UPSCALE,\n y: rectangle.bounds.y / SHELF_UPSCALE\n };\n let h = rectangle.bounds.height / SHELF_UPSCALE;\n let w = rectangle.bounds.width / SHELF_UPSCALE;\n let offset = toolDiameter / 2;\n return [\n `M2,${origin.x - offset}, ${origin.y - offset}`,\n `M2,${origin.x - offset}, ${origin.y + offset + h}`,\n `M2,${origin.x + offset + w}, ${origin.y + offset + h}`,\n `M2,${origin.x + offset + w}, ${origin.y - offset}`,\n `M2,${origin.x - offset}, ${origin.y - offset}`\n ];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"### Putting it all together","pinned":false,"hidden":false,"mode":"md"},{"id":200,"value":"function shapesToPaths(cutTypes) {\n let parts = [\n shelfParts.top,\n shelfParts.bottom,\n shelfParts.left,\n shelfParts.right,\n ...shelfParts.shelves\n ];\n let paths = parts.map((part) => {\n return part.children\n .filter((shape) => cutTypes.includes(shape.cutType))\n .map((shape) => {\n // FIXME: having cut-through with others should be an error\n let operation = cutTypes.includes(\"cutThrough\")\n ? profileOutside\n : zigzagPocket;\n return operation(shape);\n })\n .map((insts2d) => {\n let cutDepth = cutTypes.includes(\"cutThrough\")\n ? shelfThickness\n : shelfThickness * 0.525;\n return extrudeInstructions(insts2d, cutDepth, shelfThickness).flat();\n })\n .flat();\n });\n return {\n top: paths[0],\n bottom: paths[1],\n left: paths[2],\n right: paths[3],\n shelves: paths.slice(4)\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"cutThroughPaths = shapesToPaths([\"cutThrough\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"nonCutThroughPaths = shapesToPaths([\"rabbet\", \"groove\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"currentShelfToolpath = {\n let paths = Object.values(cutThroughPaths)\n .slice(0, 4)\n .concat(cutThroughPaths.shelves);\n let nct = Object.values(nonCutThroughPaths)\n .slice(0, 4)\n .concat(nonCutThroughPaths.shelves);\n // paths = paths.map((path) => rewriteProfileCutWithTabs(path));\n //let path = jigPaths.flat();\n let singlePath = paths.concat(nct);\n // let offsetPath = quickOffsetInsts(singlePath.flat(), 1, 0);\n // return [offsetPath];\n return singlePath;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":192,"value":"## Toolpath Visualization","pinned":false,"hidden":false,"mode":"md"},{"id":196,"value":"shopbotBedDims = ({\n width: 60,\n height: 96\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"populateVizSpace(tpVizSpace, currentShelfToolpath)","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"function populateVizSpace(vizSpace, toolpaths) {\n if (!vizSpace || !vizSpace.removeAllViz) {\n return htl.html`⛔️ Could not find Visualization Space.`;\n }\n vizSpace.removeAllViz();\n let materialParams = {\n width: shopbotBedDims.width,\n height: shopbotBedDims.height,\n thickness: shelfThickness\n };\n toolpaths.forEach((toolpath, index) => {\n let lastToolpath = index > 0 ? toolpaths[index - 1] : undefined;\n let lastTpEnd\n if (lastToolpath) {\n }\n let tpGroup = VisualizationInterpreters.sbpBasicViz(\n toolpath,\n materialParams\n );\n vizSpace.addVizWithName(tpGroup, `toolpath ${index}`);\n });\n return htl.html`✨ Populated Visualization Space at ${new Date().toLocaleString()}.`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"## Visualization Utilities","pinned":false,"hidden":false,"mode":"md"},{"id":52,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"Line2 = (function () {\n class Line2 extends LineSegments2 {\n constructor(\n geometry = new THREE.LineGeometry(),\n material = new THREE.LineMaterial({\n color: Math.random() * 0xffffff\n })\n ) {\n super(geometry, material);\n this.isLine2 = true;\n this.type = \"Line2\";\n }\n }\n\n return Line2;\n})()","pinned":false,"hidden":false,"mode":"ojs"},{"id":377,"value":"## Feed, Speed, Dispatch","pinned":false,"hidden":false,"mode":"md"},{"id":378,"value":"To do. Use dispatch code from other notebooks for now.","pinned":false,"hidden":false,"mode":"md"},{"id":44,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":55,"value":"mutable test = 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"paper = require(\"paper\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"THREE = {\n const THREE = (window.THREE = await require(\"three@0.146.0/build/three.js\"));\n // await require(\"three@0.108.0/examples/js/controls/OrbitControls.js\").catch(\n // () => {}\n // );;\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"","pinned":false,"hidden":false,"mode":"html"}],"files":"$W3f","stdlib":"1","titling":"auto"}