suaveplan/openspec/changes/enterprise-gaming-r3f-character-vehicle-picker/proposal.md

OpenSpec Change: enterprise-gaming-r3f-character-vehicle-picker

• Change ID: enterprise-gaming-r3f-character-vehicle-picker
• Package: @suaveplan/r3f-character-vehicle-picker
• Category: gaming/character
• Target path: gaming/character/r3f-character-vehicle-picker
• Status: PROPOSED
• Date: 2026-04-24
• Reference spec: /mnt/s/web/suaveplan/enterprise/r3f-character-vehicle-picker.md

---

Summary

Deliver @suaveplan/r3f-character-vehicle-picker on the genesis branch from scratch at enterprise quality. The package provides a character/vehicle picker UI with interactive 3D previews and GTA-style customisation. A rotating 3D model preview renders the selected character or vehicle; a catalog carousel shows thumbnails; a customisation panel (color, decals, accessories) updates the preview in real-time via @suaveplan/character-vehicle-picker's PickerState. Genesis adds structured errors, Storybook stories, and 100% coverage.

---

Available workspace deps

@suaveplan/error, @suaveplan/character-vehicle-picker, react, @react-three/fiber, @react-three/drei, three.

---

Public API surface

function CharacterVehiclePicker(props: PickerProps): JSX.Element
// pickerState, characterModels, vehicleModels, onConfirm

function ModelPreview(props: ModelPreviewProps): JSX.Element
// modelUrl, autoRotate, zoom

function CatalogCarousel(props: CatalogCarouselProps): JSX.Element
function CustomisationPanel(props: CustomisationPanelProps): JSX.Element

---

File layout

gaming/character/r3f-character-vehicle-picker/
  package.json / tsconfig.json / vitest.config.ts
  src/
    index.ts / error-codes.ts
    types/common.ts + md
    components/
      CharacterVehiclePicker/ (tsx + md + test + stories + index)
      ModelPreview/ (tsx + md + test + stories + index)
      CatalogCarousel/ (tsx + md + test + stories + index)
      CustomisationPanel/ (tsx + md + test + stories + index)
  tests/integration.test.ts