component

Sailboat

A small procedural sailboat: a station-built low-poly hull, mast, boom, and mainsail, floating at the waterline with a gentle moored bob.

⌖ Explore the library in 3D →

Add it

npx @runek/cli add sailboat

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

Use it

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

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

Props

export interface SailboatProps extends WorldComponentProps {
  /** Hull length along local Z (bow at +Z), in units. */
  length?: number
  /** Hull maximum beam (width along X), in units. */
  beam?: number
  /** Deck height above the waterline (local y=0), in units. */
  freeboard?: number
  /** Keel depth below the waterline, in units. */
  draft?: number
  /** Mast height above the deck, in units. */
  mastHeight?: number
  /** Boom length aft of the mast, in units. */
  boomLength?: number
  /** Raise the mainsail. */
  sail?: boolean
  /** Gentle moored bobbing on the swell. */
  bob?: boolean
  /** Solid hull collider. */
  collider?: boolean
  /** Render the hull/rig as a bare visual, with no `RigidBody` or collider — for a parent
   *  controller (e.g. a steerable vehicle) that owns the physics body. When false, `position`
   *  and `rotation` place the visual directly and the `collider` prop is ignored. Default true. */
  physics?: boolean
  /** Hull color; defaults to the world palette's `wood`. */
  color?: string
  /** Deck, mast, and boom color; defaults to the palette's `woodDark`. */
  trimColor?: string
  /** Sail color. */
  sailColor?: string
}

Registry manifest

Browse the whole catalog in the gallery →.