2D/3D CAD design in JavaScript

Question

I am having 2D design in microstation and I wanted to represent this design in web using any tool(javascript/Unity 3D or any other) where the web tool will not have all the functionality but basic functionality like reshaping or adding a new shape should be available.

As of now, my approach is once I created a design in microstation then I am capturing properties of shapes like the cordinates of a line and now using these coordinates I wanted to represent in the browser since this is a 2D design so it will be plotted in some location (x,y) for example I have created a line in microstation from (2,2) to (10,10) so it will be a straight line and I have all the coordinates I tried redrawing it in Unity which am able to do but I am facing issue to change the length from (2,2) to (20,20) by mouse click. And my goal is to do it in runtime, not in Unity editor tool.

This is an example of a straight line I wanted to do it for all geometric shape,any guidance would be appreciated.

As of now am trying Unity to do so but struggling in the edit part is there a way to achieve this in unity?

I also looked at various javascript libraries like konvaJS, makerJS, ThreeJS, etc. but except konvajs none of the other library provide facilities like reshaping, in Konva also creating shape using a mouse not found any solution for this.

Can we achieve this by any of the two approaches, of course, am not looking for all functionality only a few custom functionality, if yes which approach will be the best, and which tool should I proceed with? Any guidance will be helpful.

Answer 1

To draw a line-segment, you can use LineRenderer.

//two points of the line-segment are known (or got from the Transform of GameObject)
Vector3 start;
Vector3 end;

GameObject myLine = new GameObject();
myLine.transform.position = start;
myLine.AddComponent<LineRenderer>();
LineRenderer lr = myLine.GetComponent<LineRenderer>();
lr.material = new Material(Shader.Find("Particles/Alpha Blended Premultiply"));
lr.SetColors(color, color);
lr.SetWidth(0.1f, 0.1f);
lr.SetPosition(0, start);
lr.SetPosition(1, end);

//to change the points of this line
myLine.transform.position = another_start;
lr.SetPosition(0, another_start);
lr.SetPosition(1, another_end);

There are also other solutions:

• Use scaled cube or capsule primitive.
• 3rd-party plugins: vectrosity

---

To get mouse clicked position, use Camera.main.ScreenToWorldPoint(Input.mousePosition).

To determine when your mouse is clicked, use Input.GetMouseButtonUp.