Skip to content

feat: add 4 drei examples for missing components - #181

Open
0xTHAC0 wants to merge 4 commits into
pmndrs:mainfrom
0xTHAC0:feat/drei-missing-examples
Open

feat: add 4 drei examples for missing components#181
0xTHAC0 wants to merge 4 commits into
pmndrs:mainfrom
0xTHAC0:feat/drei-missing-examples

Conversation

@0xTHAC0

@0xTHAC0 0xTHAC0 commented Aug 12, 2026

Copy link
Copy Markdown

Summary

Adds 4 new examples covering 8 drei components that currently lack dedicated demos in the examples repo, as identified in pmndrs/drei#2680.

Examples added

Example Components Description
camera-controls-basic CameraControls Interactive camera with leva GUI for smooth transitions, zoom limits, and preset views
text3d-center Text3D, Center 3D text with matcap material, configurable bevel, centered with Center
gradient-rounded-materials GradientTexture, RoundedBox, MeshWobbleMaterial Material showcase on geometric primitives with floating animation
accumulative-contact-shadows AccumulativeShadows, ContactShadows Side-by-side shadow staging comparison with RandomizedLight

Conventions followed

  • Vite + React 19 + TypeScript (strict)
  • drei 10.7.8 / fiber 9.6.1 / three 0.165.0
  • pmndrs.json validates against schemas/pmndrs.schema.json
  • Leva controls for interactive exploration
  • Standard file structure matching existing examples
  • Real WebGL screenshots as thumbnails (1600×840 WebP, generated via Playwright)

Verification

  • All 4 examples typecheck (tsc --noEmit)
  • All 4 examples build successfully (vite build)
  • All pmndrs.json files have required fields and valid library entries
  • node bin/validate-pmndrs-metadata.mjs — 174 examples validated
  • prettier --check — all files formatted
  • syncpack lint — no version issues
  • Real thumbnails generated from running examples

Ref: pmndrs/drei#2680 (partial — covers 8 of ~75 missing components)

0xTHAC0 and others added 4 commits August 16, 2026 09:35
Add working examples for 8 drei components that lack dedicated demos
in the examples repo (ref: pmndrs/drei#2680):

- camera-controls-basic: CameraControls with leva GUI for transitions
- text3d-center: Text3D + Center with matcap material
- gradient-rounded-materials: GradientTexture + RoundedBox + MeshWobbleMaterial
- accumulative-contact-shadows: AccumulativeShadows + ContactShadows

All examples follow repo conventions: Vite + React 19 + TypeScript,
drei 10.7.8 / fiber 9.6.1 / three 0.165.0, validated pmndrs.json.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
…kfile

Generate actual WebGL screenshots (1600x840 WebP) for all 4 new examples
using Playwright, replacing the placeholder thumbnails. Also include the
pnpm-lock.yaml updates for the new example dependencies.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
Co-Authored-By: Paperclip <noreply@paperclip.ing>
Co-Authored-By: Paperclip <noreply@paperclip.ing>
@0xTHAC0
0xTHAC0 force-pushed the feat/drei-missing-examples branch from 555ced1 to 3ad725d Compare August 16, 2026 04:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant