Dragon3DGraff_Blog – Page 2 – Creating 3D Editor

TertiusAxis

Work with the interface

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:

Continue reading

Redid the creation of the object.

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

Continue reading

Changing parameters

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.

Continue reading

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

Continue reading

Working with the options panel

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:

Continue reading

Changing an object following a mouse movement

The solution to this question made me recall trigonometry and vector algebra. Problem statement: when creating, change the object after the mouse movement. What we have: cursor coordinates in screen coordinates, camera viewing angle, aspect ratio. It is necessary to determine: how much the scale of the view in world coordinates at a given moment of time differs from the scale of the screen, find the distance from the position of the object in screen coordinates and multiply it by the scale of the view at the current time. To look at the camera from the side (above), I created a third render and placed it in the second canvas. When you click on canvas, it increases to full screen. Later I will make an orthogonal camera there. The first thing we will do is determine the position of the object in screen coordinates. To do this, project the position vector of the object onto the screen. Three.js provides a project () function. We clone the position vector of the object, otherwise the function will change the position of the object. Translation to screen coordinates: In the video, the first yellow ball shows the position of the created object. Now

Continue reading