feat: visualize objects in 2d grid

[iamAmer]

Visualization of objects in 3D-canvas in 2D paper.js canvas

Features

• You can change the position of the objects in 3D-canvas or even delete them, it will automatically updates the 2D-grid.
• Color-coded object types (tables, chairs, coolers, racks) for easy identification in 2D view.

Considerations

• Object rectangles in 2D view use fixed size (50x50px) and don't reflect actual object dimensions yet
• This is a work in progress and will continue to be developed until it is fully functional, definitely will push more commits to this PR.

[iamAmer]

@pcolt @mfranzon This is still a work in progress as I'm getting familiar with Three.js, but I'd love to get your feedback on the approach so far!

[pcolt]

@iamAmer I think your approach is good so far!
The main thing I would try to figure out now is why the rectangles, the 2D grid and the length of the walls in meters appear to mismatch when different sizes of screen are employed.
The walls in the pictures below are both long 9 meters and both the grid and the object-rectangle appear not to be at scale with them. Instead if you check the 3D view looks like they are perfectly at scale.
I see two options:

• Scale properly the 2D grid and the size of the rectangle and leave the 3D untouched (simpler?).
• Or scale the length of the walls displayed in meters in the 2D and then in the 3D too.