The side is the definition of one of the sides of the block. There are 6 sides:
- Front.
- Top.
- Right.
- Left.
- Bottom.
- Back.
Each side has next props (to be extended):
- Background defines color of the side.
- Border defines color (default is black), thickness (default is 1), style (default is solid), and units (default is px).
- Size is width and height of the side.
- Transform defines position of the side in the block.
These props can be defined for the side individually or taken from the block props.
The block is a single unit with 6 sides.
Each block has next props (to be extended):
- Background defines color of the block. *
- Border defines color (default is black), thickness (default is 1), style (default is solid), and units (default is px). *
- Grid is the util which contains global data such as units, grid size, etc. and is able to translate relative points to absolute.
- Point is the relative coordinates of the center of the block.
- Sides are the definitions for each side.
- Transform is the util which can generate strings for CSS definitions such as rotateX, translateZ, etc.
* It can be overridden by settings of the side.
The plane is the wrapper and helper entity for the set of blocks. It renders blocks and makes it easier to perform various mass operations such as: scene rotation and movement.
It is possible to define several planes.
Each plane has next props (to be extended):
- Background defines color of the plane.
- Block script defines set of blocks to be rendered.
- Border defines color (default is black), thickness (default is 1), style (default is solid), and units (default is px) of the plane.
- Grid is the util which contains global data such as units, grid size, etc. and is able to translate relative points to absolute.
- Rotate defines plane rotation.
- Translate defines plane's position.
- Wrapper width is the width of the container.
- Wrapper height is the height of the container.
The BRE uses a relative 3D coordinates system with starting point at the center of the space.