component

Roof

Flat or gable roof.

⌖ Explore the library in 3D →

Add it

npx @runek/cli add roof

Pulls @react-three/rapier@^2.2.0, @runek/core@^0.13.0, three@^0.184.0.

Use it

import { Roof } from './runek/Roof'

<Roof position={[0, 0, 0]} />

Props

export interface RoofProps {
  position?: Vec3
  rotation?: Vec3
  /** `[width, depth]` in units. The roof rests with its base at the component origin. */
  size?: [number, number]
  style?: RoofStyle
  /** Ridge height for a gable roof, in units. */
  peak?: number
  thickness?: number
  overhang?: number
  /** Cap the triangular gable ends so the attic isn't open to the outside. */
  ends?: boolean
  /** Defaults to the world palette's `roof` slot. */
  color?: string
  /** Gable end caps; defaults to the world palette's `wall` slot. */
  endColor?: string
}

Migrate

v0.11.0 → v0.12.0. No signature break, but gable roofs now cap their open triangular ends with wall-colored prisms (the attic used to show the sky). The old look is one prop away.

<Roof style="gable" />
// v0.11.0: gable ends rendered open

<Roof style="gable" />
// v0.12.0: ends are capped by default

<Roof style="gable" ends={false} />
// opt back into the open look

• The caps default to the palette wall slot; override with endColor.

Registry manifest

Browse the whole catalog in the gallery →.