2f:T1cdf,VisualizationSpace = /** @class */ (function () { function VisualizationSpace(containerDom, stockDimensions) { this.containerDom = containerDom; this.scene = this.initScene(); this.envelopeGroup = this.createEnvelopeGroup(stockDimensions); this.vizGroupWrapper = new THREE.Group(); this.scene.add(this.envelopeGroup); this.scene.add(this.vizGroupWrapper); this.camera = this.initCamera( this.scene, this.envelopeGroup.position, 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.75); var leftDirectionalLight = new THREE.DirectionalLight(0xffffff, 0.5); var rightDirectionalLight = new THREE.DirectionalLight(0xffffff, 0.25); var ambientLight = new THREE.AmbientLight(0x404040); leftDirectionalLight.position.set(-1.0, 0.0, 0.0); rightDirectionalLight.position.set(0.0, 0.0, 1.0); scene.add(topDirectionalLight); scene.add(leftDirectionalLight); scene.add(rightDirectionalLight); scene.add(ambientLight); return scene; }; VisualizationSpace.prototype.initCamera = function ( scene, centerPoint, isOrtho ) { var camera; // var aspect = window.innerWidth / window.innerHeight; var aspect = 1; var viewSize = 50; if (isOrtho) { camera = new THREE.OrthographicCamera( -viewSize * aspect, viewSize * aspect, viewSize, -viewSize, 1, 1000 ); camera.up = new THREE.Vector3(0, -1, 0); camera.zoom = 2; camera.updateProjectionMatrix(); camera.frustumCulled = false; camera.position.set(-25, -25, -25); // I don't know why this works camera.lookAt(centerPoint); } else { var fov = 50; camera = new THREE.PerspectiveCamera(fov, aspect, 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; })()30:Tadf,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 (false) { 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: 1, 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; })()31: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; })()32: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; })()33: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; })()34: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; })()35: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; })()36: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; })()37:[{"id":"17ed285d8f3daf8a22891040e08809ef92f65b35392ba9f0573e8477a62682b70faa38fd53f101ccf77880b765c6f49c5015aea867ca9760525157a91218d70a","href":"https://static.observableusercontent.com/files/17ed285d8f3daf8a22891040e08809ef92f65b35392ba9f0573e8477a62682b70faa38fd53f101ccf77880b765c6f49c5015aea867ca9760525157a91218d70a","name":"offset-diagram@2.png","type":"image/png","lastModified":1670952599667.057,"size":36124}] 2d:{"title":"Surface Milling with Functions of Two Variables","cells":[{"id":0,"value":"# Surface Milling with Functions of Two Variables","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"Let's design our surface by picking a mathematical function below and experimenting with the parameters. You can mix existing mathematical functions as well as writing your own with the form ${tex`y = f(x,z)`}, where ${tex`y`} is the \"up\" direction.","pinned":false,"hidden":false,"mode":"md"},{"id":39,"value":"viewof fVizSpace = new Promise((resolve) => {\n resolve(html`

`);\n}).then((domElement) => {\n let materialParams = {\n width: fAxesDim,\n height: fAxesDim,\n thickness: thickness\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":423,"value":"viewof fChoice = Inputs.radio([\"sinc\", \"radialWave\", \"goldsteinPrice\"], {\n label: \"2D function\",\n value: \"sinc\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"viewof sincFreq = Inputs.range([0, 24], {\n label: \"sinc frequency\",\n step: 1,\n value: 8,\n disabled: fChoice !== \"sinc\" && fChoice !== \"p3sinc\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":343,"value":"viewof sliceEnd = Inputs.range([0, toolpath.length], {\n label: \"slice toolpath\",\n step: 1,\n value: toolpath.length\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":373,"value":"viewof uFreq = Inputs.range([0, 24], {\n label: \"u freq\",\n step: 1,\n value: 24,\n disabled: fChoice !== \"radialWave\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":376,"value":"viewof vFreq = Inputs.range([0, 24], {\n label: \"v freq\",\n step: 1,\n value: 24,\n disabled: fChoice !== \"radialWave\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":368,"value":"viewof major = Inputs.radio([\"row\", \"column\"], {\n label: \"major\",\n value: \"row\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"viewof clipFn = Inputs.toggle({\n label: \"clip bounds\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1035,"value":"viewof division = Inputs.range([500, 10000], {\n label: \"GP division\",\n step: 100,\n value: 1000,\n disabled: fChoice !== \"goldsteinPrice\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":846,"value":"## Material Parameters","pinned":false,"hidden":false,"mode":"md"},{"id":884,"value":"These parameters control the material size: `fAxesDim` is the height and width of the slice of tile to be cut in the stock material, and `thickness` represents the thickness of the stock material.","pinned":false,"hidden":false,"mode":"md"},{"id":21,"value":"fAxesDim = 6","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"thickness = 2.0","pinned":true,"hidden":false,"mode":"ojs"},{"id":882,"value":"### Here are the actual functions we sample","pinned":false,"hidden":false,"mode":"md"},{"id":886,"value":"You can modify the math in each, or define a new function with the same function signature as the others.","pinned":false,"hidden":false,"mode":"md"},{"id":48,"value":"function radialWave(u, v, optionalTarget) {\n var result = optionalTarget || new THREE.Vector3();\n let yOffset = thickness * (1 / 4);\n var x = u * fAxesDim;\n var z = v * fAxesDim;\n var y =\n (Math.sin(u * uFreq * Math.PI) + Math.cos(v * vFreq * Math.PI)) *\n (thickness / 8) +\n yOffset;\n\n if (clipFn) {\n if (y < minDepth) {\n y = minDepth;\n } else if (y > maxToolDepth) {\n y = maxToolDepth;\n }\n }\n\n return result.set(x, y, z);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":383,"value":"function sinc(u, v, optionalTarget) {\n const eps = 0.000001;\n var result = optionalTarget || new THREE.Vector3();\n var x = u * fAxesDim;\n var z = v * fAxesDim;\n let xShift = (u - 0.5) * fAxesDim;\n let zShift = (v - 0.5) * fAxesDim;\n let amplitude = 0.2;\n let r = Math.sqrt(xShift ** 2 + zShift ** 2) || eps;\n let y = (amplitude * Math.sin(Math.PI + sincFreq * r)) / (2 * r) + yOffset;\n\n if (clipFn) {\n if (y < minDepth) {\n y = minDepth;\n } else if (y > maxToolDepth) {\n y = maxToolDepth;\n }\n }\n\n return result.set(x, y, z);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":466,"value":"function goldsteinPrice(u, v, optionalTarget) {\n const eps = 0.000001;\n var result = optionalTarget || new THREE.Vector3();\n var xOrig = u * fAxesDim;\n var zOrig = v * fAxesDim;\n let x = (u - 0.5) * 1.25;\n let z = (v - 0.5) * 1.25;\n let y =\n (1 +\n (x + z + 1) ** 2 *\n (19 - 14 * x + 3 * x ** 2 - 14 * z + 6 * x * z + 3 * z ** 2)) *\n (30 +\n (2 * x - 3 * z) ** 2 *\n (18 - 32 * x + 12 * x ** 2 + 48 * z - 36 * x * z + 27 * z ** 2));\n\n y = y / division;\n y = y + yOffset;\n\n // Major scaledown\n if (clipFn) {\n if (y < minDepth) {\n y = minDepth;\n } else if (y > maxToolDepth) {\n y = maxToolDepth;\n }\n }\n\n return result.set(xOrig, y, zOrig);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":726,"value":"function CUSTOM_p3(u, v, optionalTarget) {\n const eps = 0.000001;\n var result = optionalTarget || new THREE.Vector3();\n var x = u * fAxesDim;\n var z = v * fAxesDim;\n let xShift = (u - 0.5) * fAxesDim;\n let zShift = (v - 0.5) * fAxesDim;\n let phaseShift = Math.PI / 2;\n let r = Math.sqrt(xShift ** 2 + zShift ** 2) || eps;\n let y = Math.sin(phaseShift + sincFreq * r) / r ** 0.5 + yOffset;\n\n if (clipFn) {\n if (y < minDepth) {\n y = minDepth;\n } else if (y > maxToolDepth) {\n y = maxToolDepth;\n }\n }\n\n return result.set(x, y, z);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":981,"value":"function CUSTOM_p5(u, v, optionalTarget) {\n // TODO: parameterize constants\n let sinc = (x) => {\n let amplitude = 1;\n let eps = 0.001;\n let r = Math.sqrt(x ** 2 + x ** 2) || eps;\n return (amplitude * Math.sin(Math.PI + sincFreq * r)) / (2 * r);\n };\n var result = optionalTarget || new THREE.Vector3();\n let yOffset = thickness * (1 / 4);\n var x = u * fAxesDim;\n var z = v * fAxesDim;\n var y = Math.sin(u * 3 * Math.PI) * Math.cos(v * 4 * Math.PI) + yOffset;\n\n if (clipFn) {\n if (y < minDepth) {\n y = minDepth;\n } else if (y > maxToolDepth) {\n y = maxToolDepth;\n }\n }\n\n return result.set(x, y, z);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":453,"value":"function2d = ({\n sinc,\n CUSTOM_p3,\n radialWave,\n goldsteinPrice,\n CUSTOM_p5\n}[fChoice])","pinned":false,"hidden":false,"mode":"ojs"},{"id":891,"value":"### Tooling and Positioning Parameters","pinned":false,"hidden":false,"mode":"md"},{"id":436,"value":"toolDiameter = 0.25","pinned":true,"hidden":false,"mode":"ojs"},{"id":659,"value":"stepover = 0.75","pinned":true,"hidden":false,"mode":"ojs"},{"id":1274,"value":"The following 3 parameters will reposition and clip the function in the y-axis to ensure feasible milling. For example, in the diagram below, only the hatched area of sine function will be milled. It's up to you to pick these values so that the toolpath makes sense.","pinned":false,"hidden":false,"mode":"md"},{"id":1269,"value":"boundExplanation = FileAttachment(\"offset-diagram@2.png\").image({\n width: 450\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":914,"value":"minDepth = 0.25","pinned":true,"hidden":false,"mode":"ojs"},{"id":574,"value":"maxToolDepth = 0.75","pinned":true,"hidden":false,"mode":"ojs"},{"id":581,"value":"yOffset = 0.3","pinned":true,"hidden":false,"mode":"ojs"},{"id":895,"value":"By default, the function is defined at the top of the material, so we need to change the y-offset to get it at the right depth in the material. A logical choice would be half of the max tool depth, but you can set it to whatever looks best.","pinned":false,"hidden":false,"mode":"md"},{"id":842,"value":"## ${textcolor('Below here, we calculate the samples', 'blue')}","pinned":false,"hidden":false,"mode":"md"},{"id":1220,"value":"Change `shouldRenderMesh` to `true` if you'd like to visualize the surface mesh independent of the toolpath.","pinned":false,"hidden":false,"mode":"md"},{"id":1212,"value":"shouldRenderMesh = false","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"{\n if (shouldRenderMesh) {\n fVizSpace.scene.add(samplePoints);\n fVizSpace.threeRenderScene();\n invalidation.then((_) => {\n fVizSpace.scene.remove(samplePoints);\n fVizSpace.threeRenderScene();\n });\n return htl.html```✨ Rendered the surface mesh.`;\n }\n return htl.html`🚫 Did not render the surface mesh.`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":893,"value":"You shouldn't have to touch these (or at least that much).","pinned":false,"hidden":false,"mode":"md"},{"id":203,"value":"samplesPerAxis = Math.ceil(fAxesDim / (toolDiameter * stepover))","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"samples = {\n let xSamples = range(samplesPerAxis).map((s) => s / samplesPerAxis);\n let ySamples = range(samplesPerAxis).map((s) => s / samplesPerAxis);\n return xSamples\n .map((u) => {\n return ySamples.map((v) => {\n return function2d(u, v, null);\n });\n })\n .flat();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"packedPoints = samples.map((s) => [s.x, s.y, s.z]).flat()","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"packedColors = samples.map((s) => [s.y * 255, 0, 0]).flat()","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"samplePoints = {\n let geometry = new THREE.BufferGeometry();\n geometry.setAttribute(\n \"position\",\n new THREE.Float32BufferAttribute(packedPoints, 3)\n );\n geometry.setAttribute(\n \"color\",\n new THREE.Float32BufferAttribute(packedColors, 3)\n );\n geometry.computeBoundingSphere();\n let material = new THREE.PointsMaterial({\n size: 2,\n vertexColors: true,\n side: THREE.DoubleSide\n });\n return new THREE.Points(geometry, material);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"paraMesh = {\n let material = new THREE.MeshPhongMaterial({\n color: 0xff0000,\n side: THREE.DoubleSide,\n transparent: true,\n opacity: 0.85\n });\n let geom = new ParametricGeometry(radialWave, 120, 120, false);\n let mesh = new THREE.Mesh(geom, material);\n invalidation.then((_) => {\n geom.dispose();\n material.dispose();\n });\n return mesh;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"toolpath = range(samplesPerAxis)\n .map((iRow) => {\n let rowInsts = range(samplesPerAxis)\n .map((iCol) => {\n let sample;\n if (major === \"row\") {\n sample = samples[iRow * samplesPerAxis + iCol];\n } else {\n sample = samples[iCol * samplesPerAxis + iRow];\n }\n return `M3,${sample.x},${sample.y},${sample.z}`;\n })\n .flat();\n if (iRow % 2 !== 0) {\n rowInsts = rowInsts.slice().reverse();\n }\n return rowInsts;\n })\n .flat()","pinned":false,"hidden":false,"mode":"ojs"},{"id":341,"value":"toolpathSlice = toolpath.slice(0, sliceEnd)","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"populateVizSpace(fVizSpace, [toolpathSlice])","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"function range(n) {\n return [...Array(n).keys()];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"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: fAxesDim,\n height: fAxesDim,\n thickness: thickness\n };\n toolpaths.forEach((toolpath, index) => {\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":8,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":844,"value":"## Some Utilities","pinned":false,"hidden":false,"mode":"md"},{"id":331,"value":"mutable test = 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"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":285,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":294,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":317,"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":541,"value":"function goldsteinPrice2(x, y) {\n return (\n (1 +\n Math.pow(x + y + 1, 2) *\n (19 - 14 * x + 3 * x * x - 14 * y + 6 * x * x + 3 * y * y)) *\n (30 +\n Math.pow(2 * x - 3 * y, 2) *\n (18 - 32 * x + 12 * x * x + 48 * y - 36 * x * y + 27 * y * y))\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":544,"value":"gp2Points = {\n var n = 256,\n m = 256,\n values = new Array(n * m);\n for (var j = 0.5, k = 0; j < m; ++j) {\n for (var i = 0.5; i < n; ++i, ++k) {\n values[k] = goldsteinPrice((i / n) * 4 - 2, 1 - (j / m) * 3);\n }\n }\n return values;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":547,"value":"contours = d3\n .contours()\n .size([256, 256])\n .thresholds(Array.from({ length: 19 }, (_, i) => Math.pow(2, i + 2)))(\n gp2Points\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":551,"value":"[Just take from this notebook](https://observablehq.com/@d3/contours)","pinned":false,"hidden":false,"mode":"md"},{"id":554,"value":"## ${textcolor('Connecting to the Machine', 'blue')}","pinned":false,"hidden":false,"mode":"md"},{"id":558,"value":"import {\n serverUrl,\n socket,\n latestMessage,\n toggleSocketButton,\n availableEndMills,\n invalidEndMillsForMaterial,\n setMachineStateParameter,\n sendRegionDims,\n sendThickness,\n sbpButton,\n sendInstsToOverlay,\n sendParamsToOverlay,\n feedSpeedTable,\n generateChecklist\n // VisualizationSpace,\n // VisualizationInterpreters\n} from \"@jtranoleary/woodgrain-authoring\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":562,"value":"socket","pinned":true,"hidden":false,"mode":"ojs"},{"id":565,"value":"toggleSocketButton","pinned":true,"hidden":false,"mode":"ojs"},{"id":605,"value":"sbpButton(\n \"Send Test\",\n [\"MX,5\"],\n () => true,\n () => {}\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":793,"value":"## ${textcolor('Toolpath Parameters', 'blue')}","pinned":false,"hidden":false,"mode":"md"},{"id":1258,"value":"Toolpath diameter was already defined above; you can click on the variable name and press Control- or Command-J to jump to it.","pinned":false,"hidden":false,"mode":"md"},{"id":1260,"value":"toolDiameter","pinned":true,"hidden":false,"mode":"ojs"},{"id":677,"value":"numFlutes = 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":675,"value":"surfaceSpeed = 1000","pinned":false,"hidden":false,"mode":"ojs"},{"id":690,"value":"**Assuming foam as the material.**","pinned":false,"hidden":false,"mode":"md"},{"id":679,"value":"chipload = ({\n 0.125: 0.005,\n 0.25: 0.012\n}[toolDiameter])","pinned":false,"hidden":false,"mode":"ojs"},{"id":611,"value":"feed = (speed * numFlutes * chipload) / 60","pinned":false,"hidden":false,"mode":"ojs"},{"id":612,"value":"speed = surfaceSpeed / ((Math.PI / 12) * toolDiameter)","pinned":false,"hidden":false,"mode":"ojs"},{"id":710,"value":"rampSpeed = 1.0","pinned":false,"hidden":false,"mode":"ojs"},{"id":791,"value":"## ${textcolor('Generating the toolpaths', 'blue')}","pinned":false,"hidden":false,"mode":"md"},{"id":609,"value":"flippedToolpath = toolpath\n .map((inst) => flipYZCoords(inst))\n .map((inst) => reverseZSign(inst))","pinned":false,"hidden":false,"mode":"ojs"},{"id":615,"value":"completeInstructions = {\n // NOTE: the second argument sets the Z-feedrate, which we might normally half\n // of the XY-feedrate, but here we found that unintentionally limiting for 3d\n // milling of foam, so we set it to equal the XY-feedrate.\n const setFeed = `MS,${feed},${feed},,,`;\n const setSpeed = `TR,${speed}`;\n const setRamps = `VR,${rampSpeed},${rampSpeed},,,,,,,,`;\n const spindleOn = \"C6\";\n const spindleOff = \"C7\";\n const moveHome = \"MH\";\n let firstXy = extractXy(flippedToolpath[0]);\n let moveToFirstPoint = `M2,${firstXy.x},${firstXy.y}`;\n let initialPlunge = `MZ,${extractZ(flippedToolpath[0]).z}`;\n let preamble = [\n setFeed,\n setSpeed,\n setRamps,\n spindleOn,\n moveToFirstPoint,\n initialPlunge\n ];\n let epilogue = [spindleOff, moveHome];\n return preamble.concat(flippedToolpath).concat(epilogue);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":619,"value":"function extractXy(inst) {\n let toks = inst.split(\",\");\n let op = toks[0];\n if (!(op === \"M2\" || op === \"M3\" || op === \"J2\" || op === \"J3\")) {\n throw Error(\"Incompatible command\");\n }\n return { x: toks[1], y: toks[2] };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":633,"value":"function extractZ(inst) {\n let toks = inst.split(\",\");\n let op = toks[0];\n if (!(op === \"M2\" || op === \"M3\" || op === \"J2\" || op === \"J3\")) {\n throw Error(\"Incompatible command\");\n }\n return { z: toks[3] };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":645,"value":"function flipYZCoords(inst) {\n let toks = inst.split(\",\");\n let op = toks[0];\n if (!(op === \"M3\" || op === \"J3\")) {\n return inst;\n }\n let x = toks[1];\n let y = toks[2];\n let z = toks[3];\n return `${op},${x},${z},${y}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":651,"value":"function reverseZSign(inst) {\n let toks = inst.split(\",\");\n let op = toks[0];\n if (!(op === \"M3\" || op === \"J3\")) {\n return inst;\n }\n let x = toks[1];\n let y = toks[2];\n let z = toks[3];\n return `${op},${x},${y},${-z}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":627,"value":"sbpButton(\n \"DISPATCH\",\n completeInstructions,\n () => true,\n () => {}\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":786,"value":"## ${textcolor('Imports', 'blue')}","pinned":false,"hidden":false,"mode":"md"},{"id":777,"value":"import { textcolor } from \"@observablehq/text-color-annotations-in-markdown\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":781,"value":"import { toc } from \"@mbostock/toc\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"","pinned":false,"hidden":false,"mode":"html"}],"files":"$W37","stdlib":"1","titling":"auto"}