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

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

Draggable menu (React)

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

Continue reading

Matcap menu using React

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

Continue reading

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

Continue reading

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

Continue reading

Mesh editing: Vertices

0 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

Continue reading

Select multiple objects, clone

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,

Continue reading

Saving, Loading and Manipulating.

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

Continue reading

Save/Load Scene

0 I made a draft of the function of saving the scene to disk and opening the scene from the file. Now only objects created by the user are loaded. To do this, I added the UserData to the object:this.currentEntity.userData = {createdByUser: true, selectable: true}; TODO: There are errors in the console and many questions need to be worked out, such as clearing the scene before loading, loading cameras and setting the camera position, light sources, deselecting before saving … 0

Continue reading

Refactoring

0 Added digital display of color component values. Their changes are interconnected. Spent a lot of code refactoring. Made the code modules. Moved most of the code from TertiusAxis.js to TA_UI.js. Now it only has a start () function I split the TA_UI.js file into several modules and moved them to the UI folder. The formation of each section of the menu is now in a separate function in a separate file. Now the menu forming and filling functions look like this: A bug was detected in FireFox with the display input, it ran away when scrolling (fixed). I found that in Edge input it does not scroll and there are no arrows to change the value. I need to study cross-browser compatibility. Todo. Refactoring TA_Entities.js, creating functionality for all buttons for creating primitives. 0

Continue reading