Dragon3DGraff_Blog

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 …

Implemented the creation of the basic primitives from the three.js library. Changed the geometry creation code. Instead of a lot of switch-case, this code: I’m currently studying IndexedDB. The created scene must be saved and exported. In editor three.js (https://threejs.org/editor/) this is implemented, maybe I’ll take part of the implementation from there

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.

Made a color change of the object. Color can be changed either by choosing from the Color Picker menu or by changing the RGB color components. In this case, color changes in both inputs. TODO: to make also digital display of values of color components. Refactoring written over the weekend. threejs #JavaScript

Made folding menus. The Parameters menu is divided into three tabs: Geometry, Material, General. In the General tab, I implemented a change in the position, rotation and scale of the object, as well as its name. I’m working on the Material tab.

Added buttons for creating primitives from the threejs library, the creation of which I plan to implement. To do this, I created an array of objects with a description of my buttons, containing the text for the button, the type of geometry being created for transmission to TA_Enteties and a link to the icon: Through forEach I add them all to the buttonsDiv: Added a display of material parameters in the options menu. I made the Main menu hidden when I click on the arrow: Implemented the creation of a circle. At the same time, I ran into a problem. Threejs issued a warning in the console with each render: three.js: 2533 THREE.Matrix3: .getInverse () can’t invert matrix, determinant is 0. It turned out that it is impossible for the object to have a zero value (for example, height) or scale. In my case, the warning worked on creating a BoundingBox, since the circle is a flat object and the height is 0. I had to add a check:

When creating an object with a mouse movement, the size of the object changes. Previously, this was decided by deleting the old object and creating at the same point a new one with a new size. Now the geometry of this object is changing. TA_Enteties.js Added icons to buttons. I think to leave only icons or all the same with inscriptions. The images of the icons themselves should be redone, of course. TA_UI.js TertuisAxis.js

Made a change to an object when changing values in the options menu. To do this, redid the mechanism for creating geometry. I check the transferred parameters, if there is no parameter or it is not set to a value, I am writing a warning to the console. Function for changing parameters, on the event of the input field “onInput”. The createGeometry function (entity.geometry.type, params) is also used here; Now you can add the creation of the remaining primitives, changing the parameters can be attached to any object.

At the weekend there was little time for coding, so I did not have much to do (I modeled the logo =)). Redid the code from the previous post. Firstly, I checked that the passed parameters are an object: Instead of manually input parameters for each standard object, I create its geometry, take a list of parameters, create a new object with these parameters For each key in this object, I check its presence in the transmitted object with parameters, if it exists, I assign a value, if not, I throw a warning, the value remains undefined. This check is for the developer, not for the user. In TA_UI added verification that the object came with parameters

When selected, a panel with options is displayed. Added a BoundingBox when selecting an object.When changing a value in the options panel, the geometry of the selected object changes. I have done it so far for the ball and then crookedly, just to check what works. The fact is that when a parameter is changed in the Object3D geometry, the geometry does not rebuild. To rebuild the geometry you need to call new THREE.SphereGeometry. For the cube, respectively, new THREE.BoxGeometry, and so on for each object.Therefore, it was decided in the Entity class to create the createGeometry() method, in which, depending on the type of object, I will generate new geometry: Accordingly, I will change the function of creating objects. Now, when you create, the old object is deleted and a new one is created at the same point, which affects performance. I will only change the geometry with the Object3D object. Like that: