JavaScript 中的 2D/3D CAD 设计

Question

我在 microstation 中进行 2D 设计，我想使用任何工具（javascript/Unity 3D 或任何其他工具）在 web 中表示此设计，其中 web 工具将不具备所有功能，但具有重塑等基本功能或添加新形状应该可用。

截至目前，我的方法是一旦我在 microstation 中创建设计，然后我捕获形状的属性，例如直线的坐标，现在使用我想在浏览器中表示的这些坐标，因为这是一个 2D 设计，所以它会绘制在某个位置 (x,y) 例如，我在 microstation 中创建了一条从 (2,2) 到 (10,10) 的线，所以它将是一条直线，并且我拥有我尝试在 Unity 中重新绘制的所有坐标这是能够做到的，但我面临通过鼠标单击将长度从 (2,2) 更改为 (20,20) 的问题。我的目标是在运行时而不是在 Unity 编辑器工具中完成。

这是我想为所有几何形状做的直线示例，任何指导将不胜感激。

到目前为止，我正在尝试 Unity 这样做，但在编辑部分遇到了困难，有没有办法在统一中实现这一点？

我也查看了各种 javascript 库，如 konvaJS、makerJS、ThreeJS 等。但除了 konvajs none 其他库提供重塑等功能，在 Konva 中也没有找到使用鼠标创建形状解决方案。

我们能否通过这两种方法中的任何一种来实现这一目标，当然我不是在寻找所有功能，只有少数自定义功能，如果是的话，哪种方法最好，我应该继续使用哪种工具。任何指导都会有所帮助。

Answer 1

要绘制线段，可以使用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);

还有其他解决方案：

使用缩放立方体或胶囊基元。
第 3 方插件：vectrosity

要获取鼠标点击的位置，请使用Camera.main.ScreenToWorldPoint(Input.mousePosition)。

要确定何时单击鼠标，请使用 Input.GetMouseButtonUp。

JavaScript 中的 2D/3D CAD 设计

2D/3D CAD design in JavaScript

javascript

unity3d

three.js

microstation

konvajs