Без рубрики – Dragon3DGraff_Blog

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

## Creation of walls. Part 1. Creation of equidistant lines

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

## Server side. Registration and authorization

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

## Easy assembling (threejs)

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

## Mesh editing: Faces

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

## Mesh editing: Vertices

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