Dragon3DGraff_Blog – Page 3 – Creating 3D Editor


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

Coordinate display

To better navigate in space, I decided to add coordinates at a point, which is the projection of the cursor from the camera onto the coordinate planes. It is implemented using Raycaster. Invisible planes are added along the axes, the intersection with which is checking. From the intersection, I dashed lines and hung a label with the coordinates. For label, launched the second CSS2DRenderer render. It is rendered on top of the canvas, so now events need to be caught on it, and not on the canvas, for example

Continue reading

Creating common scene

So, let’s begin. I connected the three.js library, created an empty scene, added OrbitControls to rotate the camera, added a grid of library helpers. I sketched about the interface as I imagined it. According to the plan, the left panel will be able to hide. Added standard functions for creating cube and ball primitives. They are created by clicking on the corresponding buttons in the center of coordinates (which does not suit me). TODO: make the primitive be created at the specified point. For starters, reference is implied to the main planes of the grid.

Continue reading


In this blog, I will post the process of creating a 3d editor / game engine for the browser using the three.js library. The goal of the project is to study programming in JavaScript, acquire the necessary skills, and practice the use of related tools. Source Code: https://github.com/Dragon3DGraff/TertiusAxis Editor: https://dragon3dgraff.ru/TertiusAxis/

Continue reading