JavaScript for Designing in Two and Three Dimensions

Question

JavaScript for Designing in Two and Three Dimensions

I need to take a 2D design created in microstation and display it on the web using a tool like javascript, Unity 3D, or another similar option. The web tool should have basic functionality like reshaping or adding new shapes. My current approach involves capturing shape properties, such as coordinates, from microstation and then representing them in the browser. For example, if I create a line from (2,2) to (10,10) in microstation, I want to be able to plot this line on the web and modify its length to (20,20) with a mouse click at runtime. This needs to be done dynamically, not in the Unity editor.

While I'm currently attempting this in Unity, I'm struggling with the editing part. I've also explored javascript libraries like konvaJS, makerJS, ThreeJS, and found that only konvajs offers reshaping capabilities, but even this doesn't provide a solution for creating shapes with a mouse. So, I'm seeking guidance on how to achieve this functionality.

Is there a way to accomplish this using either of these approaches? I'm only interested in implementing a few custom functionalities, so I'd like to know which approach and tool would be best suited for this task. Any advice is greatly appreciated.

javascript unity-game-engine three.js konvajs microstation

Answer 1

Answer №1

If you want to create a line segment in Unity, one option is to utilize the LineRenderer component.

// Define the start and end points of the line segment
Vector3 start;
Vector3 end;

// Create a new GameObject for the line segment
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 the line segment
myLine.transform.position = another_start;
lr.SetPosition(0, another_start);
lr.SetPosition(1, another_end);

There are alternative methods as well:

Utilize scaled cube or capsule primitives.
Consider using 3rd-party plugins like Vectrosity.

To obtain the position of a mouse click, you can use

Camera.main.ScreenToWorldPoint(Input.mousePosition)

.

To detect mouse clicks, you can use Input.GetMouseButtonUp.

Answer 2

If you want to create a line segment in Unity, one option is to utilize the LineRenderer component.

// Define the start and end points of the line segment
Vector3 start;
Vector3 end;

// Create a new GameObject for the line segment
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 the line segment
myLine.transform.position = another_start;
lr.SetPosition(0, another_start);
lr.SetPosition(1, another_end);

There are alternative methods as well:

Utilize scaled cube or capsule primitives.
Consider using 3rd-party plugins like Vectrosity.

To obtain the position of a mouse click, you can use

Camera.main.ScreenToWorldPoint(Input.mousePosition)

.

To detect mouse clicks, you can use Input.GetMouseButtonUp.

JavaScript for Designing in Two and Three Dimensions

Answer №1

Similar questions

How to block manual POST requests in a specific system

Storing the usernames of users through local storage is essential for data preservation

What is the best way to ensure that the div from the header file remains fixed directly above the fixed div from another file?

Avoid displaying passwords in source code

Obtain information through ajax using an asynchronous function

Ways to resolve the issue of BrowserWindow not being recognized as a constructor when trying to create a child window within the Electron

Managing form submissions using Jquery and checkboxes

Combine two arrays and collapse one of the nested elements

Choose the element before and add a style effect with CSS

Sending a picture through AJAX using the camera feature of p5.js

Unit testing is encountering issues due to errors with objects not being accepted as a React child component

Remove attributes from a collection of objects

Reveal the MongoDB database connection to different sections within a Next.js 6 application

Creating a loading spinner in a Vue component while using the POST method

Sorry, but React does not accept objects as valid children. Make sure the content you are passing is a valid React child element

Utilizing React JS to neatly display Firebase data in a table

The JavaScript syntax dollar sign

Ways to increase the number of rows on datatables while utilizing ajax integration

Verify the functionality of the input fields by examining all 6 of them

Tips for showing all percentages on a Google PieChart