JS.Sketcher is a parametric 2D and 3D CAD modeler written in pure javascript

Overview

JS.Sketcher

JS.Sketcher is a parametric 2D and 3D CAD modeler written in pure javascript

YouTube Tutorial Video

Live Sample Demo

2D Sketcher

Help Docs

Dev Guide

Comercial Licencing

paypal

Current Status

I created this tool for rapid designing of 3d models for my 3D-printer.
The project is still a proof-of-concept(POC) and UI isn't perfect yet. Although a lot of work done and following core components are implemented:

  • Geometric Constraint Solver. This is a most crucial component which allows to solve a system of geometric constraints applied to a sketch. See below the list of supported constraints
  • 2D Sketcher. Allows to design 2d sketches applying geometric constraints. Uses HTML5 canvas for rendering.
  • 3D Modeller. Is used for solid modelling. Uses 2D sketches to perform EXTRUDE and CUT operations on faces of a solid object. Uses WebGL and THREE.js for rendering
  • 3D modeller supports navigation over history of modifications where parameters of the craft operations(extrude/cut) could be changed and reapplied again
  • Export to STL, DWG and SVG formats
  • Saving projects in the browser locale storage
  • Repository of dimensions. For example if there is a line length constraint applied, it's not necessary to hardcode some length value. A dimension with a symbolic name can be created and the constraint can refer to that dimension by name. Once value of dimension gets changed the sketch is resolved again accordingly to the new dimension values.
  • 2D measurement tool. Allows adding dimensions on a 2D drawing(Linear, Vertical, Horizontal and Arc/Circle dimension are supported)
  • No any server-side needed. Only client side Javascript.

This modeller is already used for:

  • Designing of 3d models to get them 3d-printed. 3D models are based on parametric 2d sketches. All models can be exported as an STL file and 3d-printed after.
  • Creating of 2d parametric sketches which could be exported to DWG or SVG format.

Supported Constraints

  • Coincident
  • Vertical
  • Horizontal
  • Parallel
  • Perpendicular
  • Point to Line Distance
  • Point to Object Distance
  • Entity Equality(radius/length)
  • Tangent
  • Radius
  • Point On Line
  • Point On Arc / Ellipse
  • Point In Middle
  • Angle
  • Symmetry
  • Lock Convexity
  • Fillet Meta Constraint

Get Started With the Code

Install node.js

  • $ cd
  • $ npm install
  • $ npm start
Comments
  • Can you show the source codes of .wasm file?

    Can you show the source codes of .wasm file?

    I find you use web assembly for 3d bool operation. If possible, can you show us the source codes for that and show the experience for using web assembly.

    opened by DanielLu91 29
  • Import step or brep file

    Import step or brep file

    Is it possible to import step file from local computer?

    I used the "Import step file" icon but fail to import any step file. Could please give an example? Thanks! @xibyte

    opened by ancorasir 8
  • Constraints stop working.

    Constraints stop working.

    Hi,

    I don't know how this happens exactly, but at some point while editing a sketch in the dedicated sketch view, the constraints stopped working (as in they still exist, but they are ignored when moving sketch points around with the mouse)

    I'll edit this post with more info if I replicate this issue, intentionally or accidentally.

    EDIT: this definitively seems to be caused by improperly using a named dimension. An exception must be aborting the solver code if there is any unrecognized constraint. Ideally, only the problematic constraint should be disabled, instead of the whole solver.

    opened by z26 6
  • sample files

    sample files

    Hi, this project looks great. May I propose to put some (five) sample models that can be loaded for visitors to play with. ( Im looking for an alternative to Onshape for open codesing projects)

    opened by ThorsenRune 5
  • Feature request: Part level expressions.

    Feature request: Part level expressions.

    This is to make the model able to be edited by changing a few values.

    Establish variable names.

    Ability to use these variable names for dimensions in the sketcher and the dialogs for features.

    Ability to use complex math such as +,-,*,/,(,),^,ect.

    List the variables in a window that can be easy edited.

    Each dimension established or value entered in to feature dialog should also create an expression that can be seen and edited in the expression dialog.

    opened by mmiscool 5
  • When export to dxf format, add support to colors base on the AutoCad …

    When export to dxf format, add support to colors base on the AutoCad …

    …colors (which using by the library of dxf)

    Related issue: no support in colors in dxf

    Description:

    When exporting to dxf format, I added support to colors based on the AutoCAD table,

    Contributor name: Netser Rosenfeld

    Confirm compliance with JSketcher project license.

    • [x] Pull request is made compliance with JSKetcher license
    opened by NetzerRosenfeld 4
  •  DXF and other file formats import.

    DXF and other file formats import.

    Hi! I would like to say your work is incredible!

    I have long thought it would be nice to be able to build this sort of thing from a browser or server from a local web server.

    Unfortunately, this is not my area of expertise.

    I do have one thought/suggestion.

    All of the open source programs have one very fatal flaw. Mainly the limited support of input and output file formats.

    I am curious, what would it take to support formats for major software vendors such as autocad and solidworks and rhino and for formats such as DXF and 3D DXF (If there is such a thing)?

    Is it a question of purchasing rights to develop for these formats or is it a physical resource limitation (as in not enough programmers?) or more of a monetary limitation?

    I am curious as to what it would take to make this happen?

    I think it would be great if there was more community donations and financial support for such endeavors. Perhaps starting a gofundme site or or something?

    Regards,

    Steven

    opened by wanfuse123 4
  • Dimension lines problems

    Dimension lines problems

    Dimension lines do not zoom together with model. Dimension scale not working. If dimension is selected and backspace is pressed while changing "Dimension scale" - dimension line is deleted. Dimension lines are not exported together with model.

    opened by itsanov 4
  • Licence usage Issue

    Licence usage Issue

    Hi xibyte,

    this library/application is really good and I would like to use it for another software.

    The goal is to use your library (without any changes) and leverage it within another application. With the actual licence, I would need to provide the code/use same licence for the other software as well.

    Are you open for an Apache or MIT licence, or any licence which allows the use without changes and don't forces to provide the code for the application around it?

    Thanks, Robert

    opened by Roba1993 4
  • The exported dxf not opening in AutoCAD

    The exported dxf not opening in AutoCAD

    Hi,

    I looked into the dxfExportfunction and I found this line should be deleted because the function generateAutocadExtras() already called in the Drawing.constructor(). I think this is the main reason, I didn't test it.

    I want to make a suggestion: I see you have Dimensions also needed to be exported to the dxf. the dxf-writer does not support dimensions. Currently I am working on an implemention of dimensions but in my lib dxfjs/writer. What I am saying is if its ok to switch to another lib I will help you making the dxf export work and also support all geometries. If not I will make PR to make the dxf generated from dxf-writer work in AutoCAD if the problem not fixed by removing this line.

    Regards

    opened by tarikjabiri 3
  • can't figure out how to revolve

    can't figure out how to revolve

    I managed to use extrude and loft, but I can't figure out how to make revolve work. I tried to make a torus. I created a plane and drew a circle on it. I could see that I needed to select two things. I clicked on my circle and it seemed to take it, but then for axis I tried to click a datum pointer that was parallel to the face of the circle... but it wouldn't fill the "axis" slot.

    then I tried drawing another circle, on a perpendicular plane, this did select as the "axis" but nothing happened.

    I don't know what I'm doing wrong, the software looks really good! I can't figure out how it works.

    opened by dominictarr 3
  • Docker and improvement

    Docker and improvement

    Dear,

    I made a Dockerfile to build "dev" branch (the git clone could be replaced with a COPY). It's not the best because of webpack that doesn't package everything in the dist folder... but I managed to get a working jsketcher on a nginx with that :

    FROM node:latest as build
    
    WORKDIR /usr/src/app
    
    RUN git clone --branch dev https://github.com/xibyte/jsketcher.git .
    
    RUN npm install 
    RUN node ./node_modules/webpack/bin/webpack.js --config webpack.config.js --progress --profile
    
    
    
    FROM nginx:stable-alpine
    COPY --from=build /usr/src/app/dist /usr/share/nginx/html
    COPY --from=build /usr/src/app/web /usr/share/nginx/html
    COPY --from=build /usr/src/app/node_modules/jsketcher-occ-engine /usr/share/nginx/html/lib-assets/jsketcher-occ-engine
    COPY --from=build /usr/src/app/node_modules/font-awesome /usr/share/nginx/html/lib-assets/font-awesome
    
    EXPOSE 80
    

    Could you please improve the webpack configuration to make a better packaging in the "dist" folder ?

    Also, just to share, my simple docker-compose :

    version: "3"
    services:
      jsketcher:
        image: jsketcher:latest
        restart: unless-stopped
        container_name: jsketcher
        hostname: jsketcher
        ports:
          - "80:80"
    
    bug 
    opened by julio-matarranz 1
  • Bump qs from 6.5.2 to 6.5.3

    Bump qs from 6.5.2 to 6.5.3

    Bumps qs from 6.5.2 to 6.5.3.

    Changelog

    Sourced from qs's changelog.

    6.5.3

    • [Fix] parse: ignore __proto__ keys (#428)
    • [Fix] utils.merge: avoid a crash with a null target and a truthy non-array source
    • [Fix] correctly parse nested arrays
    • [Fix] stringify: fix a crash with strictNullHandling and a custom filter/serializeDate (#279)
    • [Fix] utils: merge: fix crash when source is a truthy primitive & no options are provided
    • [Fix] when parseArrays is false, properly handle keys ending in []
    • [Fix] fix for an impossible situation: when the formatter is called with a non-string value
    • [Fix] utils.merge: avoid a crash with a null target and an array source
    • [Refactor] utils: reduce observable [[Get]]s
    • [Refactor] use cached Array.isArray
    • [Refactor] stringify: Avoid arr = arr.concat(...), push to the existing instance (#269)
    • [Refactor] parse: only need to reassign the var once
    • [Robustness] stringify: avoid relying on a global undefined (#427)
    • [readme] remove travis badge; add github actions/codecov badges; update URLs
    • [Docs] Clean up license text so it’s properly detected as BSD-3-Clause
    • [Docs] Clarify the need for "arrayLimit" option
    • [meta] fix README.md (#399)
    • [meta] add FUNDING.yml
    • [actions] backport actions from main
    • [Tests] always use String(x) over x.toString()
    • [Tests] remove nonexistent tape option
    • [Dev Deps] backport from main
    Commits
    • 298bfa5 v6.5.3
    • ed0f5dc [Fix] parse: ignore __proto__ keys (#428)
    • 691e739 [Robustness] stringify: avoid relying on a global undefined (#427)
    • 1072d57 [readme] remove travis badge; add github actions/codecov badges; update URLs
    • 12ac1c4 [meta] fix README.md (#399)
    • 0338716 [actions] backport actions from main
    • 5639c20 Clean up license text so it’s properly detected as BSD-3-Clause
    • 51b8a0b add FUNDING.yml
    • 45f6759 [Fix] fix for an impossible situation: when the formatter is called with a no...
    • f814a7f [Dev Deps] backport from main
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • critical vulnerabilities

    critical vulnerabilities

    2 critical severity vulnerabilities (how do I fix)?

    Some issues need review, and may require choosing a different dependency.

    Run npm audit for details. (base) steven@Desktop-1d:/backup/jsketcher$ npm audit

    npm audit report

    loader-utils <1.4.1 Severity: critical Prototype pollution in webpack loader-utils - https://github.com/advisories/GHSA-76p3-8jx3-jpfq No fix available node_modules/less-vars-loader/node_modules/loader-utils less-vars-loader * Depends on vulnerable versions of loader-utils node_modules/less-vars-loader

    2 critical severity vulnerabilities

    Some issues need review, and may require choosing a different dependency. (base) steven@Desktop-1d:/backup/jsketcher$ npm update less-vars-loader loader-utils

    up to date, audited 1049 packages in 2s

    128 packages are looking for funding run npm fund for details

    2 critical severity vulnerabilities

    Some issues need review, and may require choosing a different dependency.

    Run npm audit for details.

    opened by wanfuse123 1
  • Electron build :-)

    Electron build :-)

    Related issue: (https://github.com/xibyte/jsketcher/issues/170)

    Description:

    Adds ability to produce an electron build of JSketcher for desktop offline usage.

    Contributor name: M. Molinari aka mmiscool

    Confirm compliance with JSketcher project license.

    • [x] Pull request is made compliance with JSKetcher license
    opened by mmiscool 0
Owner
Val Erastov
Val Erastov
A simple script for pure javascript charts.

MK Charts A simple pure Javascript for displaying circle charts. Demo: https://mkirschen.de/mk-scripts/mk-charts/ Circle charts To insert a chart all

Marcus Kirschen 6 Dec 14, 2022
Barcode generation library written in JavaScript that works in both the browser and on Node.js

Introduction JsBarcode is a barcode generator written in JavaScript. It supports multiple barcode formats and works in browsers and with Node.js. It h

Johan Lindell 4.7k Dec 30, 2022
TradeX-chart is a trade chart written in plain (vanilla) JavaScript with minimal dependencies

TradeX-chart is a trade chart written in plain (vanilla) JavaScript with minimal dependencies; use it with any framework or backend.

null 24 Dec 12, 2022
RocketTrades - Discord Stocks and Charts bot. Written for the RocketTrades Discord bot.

Rocket Trades RocketTrades, Discord Charts and Stocks bot. MORE DETAILS AND UPDATES TO COME SOON Getting started • Installation • Configuration • Inte

Ethan Primmer 3 Feb 4, 2022
A reusable charting library written in d3.js

NVD3 - A reusable D3 charting library Inspired by the work of Mike Bostock's Towards Reusable Charts, and supported by a combined effort of Novus and

Novus 7.2k Jan 3, 2023
a super simple, no-nonsense diagramming library written in react that just works

Introduction DEMO: http://projectstorm.cloud/react-diagrams DOCS (wip) https://projectstorm.gitbook.io/react-diagrams Docs are currently being worked

Storm 7.4k Jan 4, 2023
Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.

Babylon.js Getting started? Play directly with the Babylon.js API using our playground. It also contains a lot of samples to learn how to use it. Any

Babylon.js 19.1k Jan 4, 2023
danfo.js is an open source, JavaScript library providing high performance, intuitive, and easy to use data structures for manipulating and processing structured data.

Danfojs: powerful javascript data analysis toolkit What is it? Danfo.js is a javascript package that provides fast, flexible, and expressive data stru

JSdata 4k Dec 29, 2022
TChart.js - simple and configurable Bar and Line Chart library in Javascript

TChart.js Simple and configurable Bar and Line Chart library in Javascript Description TChart.js is a canvas-based simple Javascript Bar and Line Char

null 4 Mar 3, 2021
The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas. Created by @lehni & @puckey

Paper.js - The Swiss Army Knife of Vector Graphics Scripting If you want to work with Paper.js, simply download the latest "stable" version from http:

Paper.js 13.5k Dec 30, 2022
A javascript library that extends D3.js to enable fast and beautiful visualizations.

d3plus D3plus is a JavaScript re-usable chart library that extends the popular D3.js to enable the easy creation of beautiful visualizations. Installi

D3plus 1.6k Dec 2, 2022
Ember Charts 3.5 2.3 L2 JavaScript A powerful and easy to use charting library for Ember.js

Ember Charts A charting library built with the Ember.js and d3.js frameworks. It includes time series, bar, pie, and scatter charts which are easy to

Addepar 793 Dec 7, 2022
Interactive visualizations of time series using JavaScript and the HTML canvas tag

dygraphs JavaScript charting library The dygraphs JavaScript library produces interactive, zoomable charts of time series: Learn more about it at dygr

Dan Vanderkam 3k Jan 3, 2023
Grab the color palette from an image using just Javascript. Works in the browser and in Node.

Color Thief Grab the color palette from an image using just Javascript.Works in the browser and in Node. View the demo page for examples, API docs, an

Lokesh Dhakar 11.2k Dec 30, 2022
Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.

Konva Konva is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching,

konva 8.7k Jan 8, 2023
Read and write OpenType fonts using JavaScript.

opentype.js · opentype.js is a JavaScript parser and writer for TrueType and OpenType fonts. It gives you access to the letterforms of text from the b

OpenType.js 3.8k Dec 29, 2022
Analytical Web Apps for Python, R, Julia, and Jupyter. No JavaScript Required.

Dash Dash is the most downloaded, trusted Python framework for building ML & data science web apps. Built on top of Plotly.js, React and Flask, Dash t

Plotly 17.9k Jan 4, 2023
Open-source JavaScript charting library behind Plotly and Dash

Plotly.js is a standalone Javascript data visualization library, and it also powers the Python and R modules named plotly in those respective ecosyste

Plotly 15.3k Jan 4, 2023