Category: Без рубрики

0 To build walls of a given thickness using a given polyline, it is necessary to determine the equidistant lines to this line. The main task of constructing equidistant lines is to find points at the corners of the polyline – the intersections of equidistant lines. For each point of the polyline, we define the inner and outer points of the equidistant line and add them to the corresponding arrays The definition of an interior point is as follows First, we define vectors coplanar to the lines going out from a given point, for this we subtract the vectors of the vertices and normalize them to obtain a unit vector. the second – we determine the angle between them the equidistant point always lies on the bisector of the angle, so we divide the angle in half then we define the hypotenuse in the triangle formed by half the wall thickness and the polyline. Let’s denote it bisectorLength we get a vector going from the vertex to point b by rotating the leftSide vector by the angle alfa all that remains for us is to move point B along the resulting vector. To do this, multiply it by a scalar

0 For further development of the editor, it is necessary to create the server side of the application. For backend development I used Node.js, Express and MongoDB database. The first step in the implementation was the creation of registration and authorization on the site. The implementation is pretty straightforward. The startup file connects middlewares and connects to the database. Created routes with / register ’,‘ / login ’and‘ / logout ’/ endpoints. To check the correctness of filling in the form fields, I use the ‘express-validator’ library, it is added to the router as middleware. I used the ‘bcryptjs’ library to encrypt the password, and the ‘jsonwebtoken’ library to create a token. I store the token on the client in cookies, with the “httpOnly” flag, so that there is no access to it from Javascript. When loading the application, it checks if the user is logged in. The full server side can be viewed at https://github.com/Dragon3DGraff/TertiusAxis_server 0

0 Made a loading indicator. I took the work of Cassidy Williams and Kumar Sidharth and slightly changed it to fit my design. 0

0 I’ve separated the menu created by React from the main menu. For a change, I made three buttons there that switch the display of different content in one window. The first thing I was interested in doing was moving the window. For this, I created a div as a strip at the top of the window. When you click on it, Drag Mode is activated, when you release the mouse button over the entire Matcap window, the mode is disabled. EnableDragMode function toggles state and sets the point at which the click occurred When switching mode to useEffect, a listener is added or removed on the mouse movement event: Moving the mouse while holding down the left key changes the coordinates of the div. Also added checks so that the div cannot move beyond the window edges. Full code: 0

0 I once posted a link to my blog in one of the Three.js Facebook groups. One of the commenters told me that it would be cool if I added Matcap to the editor. And I decided – why not. But this post is more about using React than creating Matcap, since the Matcab material is implemented in Three.js and the whole task comes down to applying this material and assigning an image. Before I tried to use only Vanilla JS, as the project is educational. But for the same reason, I decided to try using React for part of the interface, since learning React (or some other of the three frontend whales) is an integral part of training a web programmer. It was interesting for me to implement React into an existing project, configure Webpack myself, which I did quite well, of course, not without overcoming difficulties – when installing React from npm, for some reason, all the modules that I had installed before were deleted, Webpack began to swear and the project stopped being assembled. I needed a state manager to communicate events between the React menu and the editor. I deliberately don’t use ready-made solutions like Redux

0 For the last two months, there was no time to develop the editor, as I was invited as a developer by the Perm Wooden Toy company https://dolodom.com/, which is engaged in the manufacture of various products from plywood. To build and render layouts, they develop their own editor based on the standard three.js editor. The assembly of the layout went something like this video https://www.youtube.com/watch?v=yTAZi-5-EfA. There is a snap on the mesh vertices, which is convenient. I suggested improving the build process and making it easier for the user. In the beginning, I wanted to do a simple alignment of the cleat plane with the groove plane (and implemented this). But we decided that this was also not so convenient and decided to try to make an instrument that was as close to reality as possible. But in reality, our thorn is inserted into the groove. That is, we need to determine what is a groove and what is a thorn. Taking into account the fact that the geometry is formed in Blender on the server side from curves imported from vector editors, as the initial data we have a mesh with two types of material – front side

0 Implemented editing the mesh of the object by moving the face. But this solution is very resource-intensive. It can be seen when there are a lot of triangles in the object. The reason for this is that I create an auxiliary triangle for each triangle of the object, and when the triangle moves, I delete them all and create them again. As a solution, I decided to make an auxiliary triangle only for the triangle that I am going to move. Now for this I realized the creation of such a triangle with the movement of the mouse. This will highlight the triangle that you can select 0

1+ Today has made, perhaps, the most significant functional for me. I was very interested in making the ability to edit the mesh of the object. So far, only moving vertices one at a time has been implemented. It took me 2 days to implement, and even more to ponder and theoretical preparation. Editing is implemented for BufferGeometry. First, I place small spheres to the vertices positions: Since the coordinates of the vertices are stored in a buffer, which is an array of values in increments of 3: [x1, y1, z1, x2, y2, z2 … xn, yn, zn], we need to get the coordinates of the points in the form of vectors But the points are repeated. For example, for a cube (8 vertices) – 24 points, 3 points per vertex (one point for one face) We get an array of vertex coordinates: At each vertex we put a sphere I did the editing of the geometry using the static method. I pass in it an object, the number of the vertex, which will change and its position Now we need to do the reverse procedure. We find in what positions of the points array the coordinates of the vertices

0 Implemented the selection of several objects. In this case, the center of selection is set in the geometric center of mass, the so-called barycenter, which is defined as follows The barycenter is determined by the addition of the position vectors of the points included in the group and is divided by the number of points. To implement multiple selection, a group was created in the currentselection object and the moment of scene initialization was added to the scene To initialize multiple selection, hold down the Ctrl key. First, check if any object is selected. If selected, then add it to the multiselection group. We create an array of objects included in the multiselection group and check if there is a selected object in this group. If not, then add it to the group, if so, then remove it from the selection: We return all the objects from the group to the scene in order to establish the new position of the group by moving it to the geometric center of mass. To do this, determine the position of all objects selection We return all objects from the scene to the group We use the .attach method, which, unlike .add,

0 Improved the function of saving the scene. The scene file created in the TertiusAxis editor has the extension “.trxs”. Now it is a text file with data in the form of an array with elements in the JSON format, which are scene objects. Only objects created by the user are saved. To do this, the elements of the children array of the scene are checked in which userData = true. By the same principle, the scene was cleared in the TA_Scene module: Saving a file is a separate function Added function “Merge with scene from disk”, which adds objects from another scene to an existing scene. When loading a scene, only the “.trsx” file extension is checked, but in the future, when the file format changes, the file structure will be checked. The whole scene can be exported to GLtf format Implemented the functionality of the object manipulation buttons: move, rotate, scale and drag, by connecting the appropriate modules of the three.js library.Cloning of an object is implemented by pressing the “c” key, as well as by selecting the corresponding menu item on the Edit tab. At the same time, the geometry of the clones is independent, and the