Skip to main content

Interface: GridSettings

Defines the appearance and behavior of the measurement grid on the ground.

The GridSettings interface configures the visual reference grid that appears on the ground in 3D scenes. This grid helps users understand scale, distances, and positioning of products. It's particularly valuable for modular configurations, space planning, and when dimensional accuracy is important.

A well-configured grid provides subtle but clear spatial reference without visually overwhelming the product presentation.

Example​

// Creating a subtle gray measurement grid with major lines every 10 units
const grid = {
  isEnabled: true,
  opacity: 0.35,
  mainColor: [0.7, 0.7, 0.7],  // Medium gray for standard grid lines
  lineColor: [0.4, 0.4, 0.4],  // Darker gray for major grid lines
  majorUnitFrequency: 10,      // Emphasize every 10th grid line
  minorUnitVisibility: 0.45    // Make minor lines slightly less visible
};

Properties​

backFaceCulling?​

optional backFaceCulling: boolean

When true, the grid is only visible from the front.

This can improve performance by not rendering the grid when viewed from below or behind.

gridRatio?​

optional gridRatio: number

Size ratio of the grid relative to the scene scale.

Controls the density of grid lines, with higher values creating a finer, more detailed grid.

isEnabled​

isEnabled: boolean

When true, the grid is visible on the ground.

Enabling the grid provides measurement reference and spatial context for positioning products.

lineColor​

lineColor: Color3

Color of major (emphasized) grid lines [r, g, b].

This color defines the appearance of the highlighted lines that occur at intervals defined by majorUnitFrequency.

mainColor​

mainColor: Color3

Color of standard grid lines [r, g, b].

This color defines the main appearance of the grid and should provide good contrast with the ground color.

majorUnitFrequency​

majorUnitFrequency: number

Frequency of major (emphasized) grid lines.

Determines how often a grid line is emphasized as a major line. For example, a value of 5 highlights every 5th grid line.

minorUnitVisibility​

minorUnitVisibility: number

Visibility of minor (standard) grid lines (0-1).

Controls how prominently the regular grid lines appear, with higher values making them more visible.

opacity?​

optional opacity: number

Overall transparency of the grid (0-1).

Lower values create a more subtle, less intrusive grid that doesn't compete visually with the product.

twoSidedLighting?​

optional twoSidedLighting: boolean

When true, the grid is lit from both sides.

This ensures the grid is visible regardless of light direction, which can be important for consistent reference visualization.