Dragon3DGraff_Blog – Page 3 – Creating 3D Editor


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