I want to create an application similar to this JSketcher.
https://web-cad.org/sketcher.html
Any ideas how can this be created using Three.js?
This is a very general question, so my answer is also very general.
You may consider the screen composed of two parts:
-
Part 1 – these are the buttons on the top and right, the panel at the left, the status bar at the bottom – this part in just UI, most likely HTML + some CSS, so Three.js is not related to it (unless you decide to make the buttons graphically)
-
Part 2 – this is the central graphical window – this is where Three.js could be used
Here is a very simple demo (not in English, though) of a micro drawing program:
- click with the left button to draw a point
- drag with the left button to draw a line
- drag with the right button to draw a circles
The program uses Suica, but Suica is heavily based on Three.js, so practically, it is Three.js that draws the points, lines and circles. This image is drawn with this program:
1 Like
a parametric sketcher with constraints is very complex, you would need a constraint solver which is a whole universe of complexity in itself. especially when it comes to moving/dragging items under constraints where it will have to solve the sketch runtime.
we develop a sketcher + CAD through threejs, it is called buerli. it’s been years in the making.
you might want to try because the sketcher is potentially available as a drop in component that you could embed and wire into your threejs apps in whichever way you prefer. watch the video, though it shows only a fragment of what it can do:
5 Likes