component

Window

Window with frame and translucent pane.

⌖ Explore the library in 3D → · View as Markdown

Add it

npx @runek/cli add window

Pulls @runek/core@^0.15.0.

Use it

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

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

Or as a node in a world file (worlds as data):

{ "type": "Window", "props": { "position": [0, 0, 0] } }

Props

Prop	Type	Default	Description
`position`	`[x, y, z]`	`[0, 0, 0]`	Position [x, y, z] in units (1 unit = 1 m, Y-up).
`rotation`	`[x, y, z]`	`[0, 0, 0]`	Euler rotation [x, y, z] in radians.
`seed`	`number`		Accepted for the component contract; this component has no seeded variation yet.
`width`	`number`	`1.2`	Width, in units.
`height`	`number`	`1.2`	Height, in units.
`frame`	`number`	`0.08`	Frame bar thickness, in units.
`depth`	`number`	`0.1`	Depth, in units.
`color`	`color`	`"#e8e2d6"`
`glassColor`	`color`	`"#acd4e6"`

Registry manifest

registry manifest /r/components/window.json Self-contained JSON: inlined source plus resolved dependencies, exactly what runek add window fetches.

Browse the whole catalog in the gallery →.

Source (Window.tsx)

import { useWorld, type Vec3 } from '@runek/core'

export interface WindowProps {
  position?: Vec3
  rotation?: Vec3
  /** Accepted for the component contract; this component has no seeded variation yet. */
  seed?: number
  width?: number
  height?: number
  /** Frame bar thickness, in units. */
  frame?: number
  depth?: number
  color?: string
  glassColor?: string
}

/** Decorative — the surrounding wall opening owns the collision. */
export function Window({
  position = [0, 0, 0],
  rotation = [0, 0, 0],
  width = 1.2,
  height = 1.2,
  frame = 0.08,
  depth = 0.1,
  color = '#e8e2d6',
  glassColor = '#acd4e6',
}: WindowProps) {
  const { unit } = useWorld()
  const w = width * unit
  const h = height * unit
  const f = frame * unit
  const d = depth * unit

  return (
    <group position={position} rotation={rotation}>
      <mesh position={[0, h - f / 2, 0]}>
        <boxGeometry args={[w, f, d]} />
        <meshStandardMaterial color={color} />
      </mesh>
      <mesh position={[0, f / 2, 0]}>
        <boxGeometry args={[w, f, d]} />
        <meshStandardMaterial color={color} />
      </mesh>
      <mesh position={[-w / 2 + f / 2, h / 2, 0]}>
        <boxGeometry args={[f, h, d]} />
        <meshStandardMaterial color={color} />
      </mesh>
      <mesh position={[w / 2 - f / 2, h / 2, 0]}>
        <boxGeometry args={[f, h, d]} />
        <meshStandardMaterial color={color} />
      </mesh>
      <mesh position={[0, h / 2, 0]}>
        <boxGeometry args={[w - f, h - f, d * 0.3]} />
        <meshStandardMaterial color={glassColor} transparent opacity={0.35} roughness={0.1} />
      </mesh>
    </group>
  )
}