SGRAI_PROJECT

Use Case:

Database (For Sprint A):

In order to test functionality for 'sprint A' of SGRAI classes data that in the future will be loaded from MongoDB and SSMS databases was created by hardcoding, all the informations comes from project requirements.

Basic ThreeJS Settings:

Custom usage of renderer.toneMapping and renderer.ouputEncoding, in order to make sure that it's possible to display render properly in current device.

Adding Absolute And Point Lighting To The Scene:

Demand for both those lighting methodes comes from the fact that, without the absolute lighting the objects in the scene will just be too dark, and we need a point lighting to show the depth of the objects.

Setting The Camera Controls:

Except setting basic settings those lines makes sure that camera will orbit around the middle of the scene that is (0,0,0) point. Also controls.dampingFactor and controls.enableDamping smoothen out the movement of camera. Task of commented line is to show usage of panning (in this case around the most busy warehouse no. 12).

Creating The Objects:

In this sprint we use static number (17) to create right amount of the warehouses. Also the height is divide by two for the readability of visualization. The magic numbers such as 0.02, 0.01... are added to solve the blinking problem in obvious and easy way.

Functions And Meshes Related To Basic Geometry Objects:

Circle Mesh / Adding Texture To Circle Under Warehouse:

Uploading texture from assets file. (Texture was created via gimp, so there's no license file). Color is additional in this case, it was added to fit better with palette of whole project.

Warehouses Models:

Using GLTF loader to generate model. The model was took from www.sketchfab.com and license and all the credits about the author are in license.txt file.

Hexagones:

Circles:

Warehouses Models:

Creating Paths:

For the sake of this documentation creation of path can be seperated to lineGeometry and planeGeometry parts.

Little Issue:

As this project is my first more complex project with 3D visualization I wasn't aware of the basic settings of the axis (I thought that rules for the axis are the same as in 2d visualization + depth). I used: x as width, y as height, z as depth. Like this:

What I was supposed to do was set up axis like: y as width, z as height, x as depth. Changing this setting would make whole project a lot easier because I could use the solutions from Web (Next part of this documentation is largely about math which was used to set up the path in between warehouses, that's the reason I'm adding this important information right now). The issue should be solved by changing the axis and then values to proper before working on the Sprint B part.

Also before starting Sprint B there's need to use THREE.Vector3 everywhere, because in some cases in this project I used THREE.Vector2 + height value which is not uncorrect but thre readability is worse.

Creating Help Path (Line Geometry):

I started the work on paths by creating the "help line" which would be THREE.BufferGeometry().setFromPoints(). Firstly I needed two more points, I had to calculate where the "slope" of the path will start and where it will end. For this purpose I calculated the values: 'si' (which is be the length of the link elemenet) and 'alpha' (which is direction of the link element).

After creating those points I added them to "points" array, in this order: first warehouse, start slope, end slope, second warehouse. After that I added the material and the geometry to mesh and then added it to the scene.