pmndrs/drei

This system is a React component library built on top of Three.js, designed to provide declarative 3D rendering primitives and interaction controls for web and native applications. It offers a comprehensive suite of features including advanced shader-based materials, post-processing effects, and specialized controls for camera navigation, object manipulation, and user input. The library supports modern development workflows through strict TypeScript typing, automated code quality checks, and visual regression testing via Storybook and Playwright.

9 changes.

The project modernized its build infrastructure by migrating to Vite, adopting ESLint flat config, and tightening TypeScript settings. It introduced Storybook for component documentation and visual testing, including necessary 3D asset support and helper utilities for shader processing and state management.

9 changes.

This period focused on significantly expanding the library's feature set by introducing new core components, web interaction controls, and advanced shader-based materials. Concurrently, the project modernized its development workflow by migrating Storybook stories to TypeScript and enforcing stricter code quality through updated pre-commit hooks.

Storybook now includes the \draco\_decoder.js\ and \draco\_wasm\_wrapper.js\ files in its public assets directory, enabling the decoding of Draco-compressed GLTF models within the component library's documentation environment.

.storybook/public/draco-gltf · high confidence

New GLSL shader files have been added to the helpers directory to support spotlight shadow rendering and vertex distortion. This includes a fragment shader for sampling shadow maps, a vertex shader for passing UV coordinates, and a vertex shader setup for 3D simplex noise distortion.

src/helpers/glsl · high confidence

Added a new starter sandbox for bug reports that includes a basic React application using @react-three/fiber. The template provides an HTML entry point, a CSS stylesheet for full-screen layout, and a React component that renders a rotating 3D box with click and hover event logging.

sandboxes/bug-report-template-starter · high confidence

The \.storybook/public\ directory now includes a \cerberus.obj\ 3D model, a \cyclops.json\ sprite sheet definition, and a \map.svg\ vector graphic. These files are served as static assets to support Storybook stories that require external media, such as 3D rendering or sprite animation demos.

.storybook/public · high confidence

This change introduces the Storybook setup for the project, providing a standardized environment for developing and previewing components. It includes a \Setup\ helper component that wraps stories in a React Three Fiber Canvas with configurable camera, lighting, and controls, as well as a \useTurntable\ hook for auto-rotating objects. The configuration enables a global \backend\ selector (WebGL/WebGPU) via Storybook globals, applies a custom light theme with a brand image, and integrates Chromatic for visual testing by pausing the render loop to capture snapshots. A dynamic SVG favicon is also added, switching colors based on the development or production environment.

.storybook · high confidence

Adds the PivotControls component to the web library, providing a visual gizmo for translating, rotating, and scaling 3D objects. The implementation includes AxisArrow, AxisRotator, PlaneSlider, and ScalingSphere sub-components, supporting features such as axis-specific limits, fixed-size rendering, hover annotations, and custom drag event callbacks.

src/web/pivotControls · high confidence

Added new helper modules in src/helpers to support library maintenance and usage. constants.ts exposes the current Three.js version for runtime checks. deprecated.ts provides a polyfill for the BufferAttribute.updateRange API change introduced in r159. environment-assets.ts defines the available preset file mappings for environment maps. ts-utils.tsx adds TypeScript utility types to support labeled tuples and forwardRef components across different TypeScript versions. useEffectfulState.tsx introduces a custom hook to manage state with side effects and callbacks, likely supporting concurrent mode or specific rendering patterns.

src/helpers · high confidence

This update introduces several new declarative components to the core library: \AdaptiveDpr\ and \AdaptiveEvents\ for automatically adjusting pixel ratio and event handling based on performance metrics; \ArcballControls\ for 3D camera navigation; \AsciiRenderer\ for ASCII-art visual effects; \BBAnchor\ for positioning elements relative to a parent's bounding box; \Backdrop\ for creating curved floor planes; \BakeShadows\ to optimize shadow map updates; \Billboard\ for making children always face the camera; \CameraShake\ for adding camera vibration effects; \CatmullRomLine\ for rendering smooth curves; and \Center\ for automatically centering and aligning child objects. Additionally, a \Clone\ component is added to create deep or shallow copies of Three.js objects with customizable property spreading.

src/core · high confidence

This update introduces several new material and pass components to the library. MeshReflectorMaterial provides a new reflection implementation with support for distortion maps, depth-based blur mixing, and contrast/brightness controls. MeshRefractionMaterial adds refraction capabilities using three-mesh-bvh for raycasting, supporting chromatic aberrations, Fresnel effects, and mip-map correction. A new WireframeMaterial enables shader-based wireframe rendering with customizable stroke, fill, dash patterns, and edge squeezing. Additionally, BlurPass and ConvolutionMaterial add depth-aware Gaussian blur post-processing, while SpotLightMaterial implements soft shadows using logarithmic depth buffers.

src/materials · high confidence

This release introduces several new components to the web package: CycleRaycast for cycling through raycasted objects via keyboard or wheel, DragControls for moving 3D objects with gesture support, FaceControls and Facemesh for camera tracking based on face landmarks, KeyboardControls for mapping keys to named actions, PresentationControls for orbiting a target, ScrollControls for infinite scroll interactions, Select for multi-select and box-select operations, and ScreenVideoTexture for using screen capture as a video texture.

src/web · high confidence

A change to existing behaviour in .storybook/public/suzanne — 1 commit, 5 files.

.storybook/public/suzanne · medium confidence · unverified

The project has migrated its build tooling and configuration: ESLint has been upgraded to the flat config format (eslint.config.mjs) replacing the legacy .eslintrc.json, and the build pipeline now uses Vite for development alongside a refactored Rollup configuration that supports multi-input bundling, GLSL shader processing, and tree-shaking via terser. TypeScript settings have been tightened by disabling esModuleInterop and allowSyntheticDefaultImports, and the repository now enforces Node.js 24.12.0 via .nvmrc while switching to Yarn's node-modules linker. Additionally, Storybook static files and new test artifacts are now gitignored, and a Code of Conduct has been added.

(repo-wide) · high confidence

All story files in the \.storybook/stories\ directory have been converted from JavaScript to TypeScript (\.tsx\). This migration adopts the Component Story Format (CSF3) standard, utilizing \Meta\ and \StoryObj\ types for stricter type checking and better IDE support. The stories now explicitly define component props and story arguments using TypeScript interfaces, improving developer experience and reducing runtime errors in the documentation environment.

.storybook/stories · high confidence

The native entry point now re-exports all symbols from the core module, ensuring that the native build exposes the same public API as the core library.

src/native · high confidence

The OrbitControls component has been removed from the main library entry point and is now exclusively exported via the web-specific module. This change means that OrbitControls is no longer available in the default import path and requires importing from the web-specific location, likely to reduce bundle size for non-web environments or to separate web-only dependencies.

src · high confidence

The .husky pre-commit hook has been updated to automatically run three checks before every commit: formatting via pretty-quick on staged files, CI linting via eslint, and TypeScript type checking. This ensures code quality and consistency are enforced locally before changes are committed.

.husky · high confidence

Added end-to-end snapshot tests using Playwright to verify that the library renders correctly in both Vite and Next.js applications. The test suite creates temporary projects, installs the built package, and captures a screenshot of the canvas to ensure visual consistency across different framework setups.

test · high confidence

A dependency / build maintenance change in (dependencies) — 453 commits (126 fixs), 4 files.

(dependencies) · medium confidence · unverified

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

• CAI 54 → 56 (+2.0)
• Rubric changed (rubric-2026.09.12 → rubric-2026.09.18) — scores are not directly comparable.

• Code Health 52 → 52 (-0.0)
• Architecture 94 → 92 (-2.0)
• Maturity 53 → 54 (+1.6)
• Readiness 65 → 64 (-0.6)
• Security 52 → 60 (+8.0)
• Accessibility 57 → 57 (+0.0)
• Performance 100 (new)

• Dependency hygiene PARTLY measured — npm pinning read, dependency currency not (no pnpm-resolved versions to grade)
• Documentation: no installation or build instructions (README.md)
• Most significant orphaned file (src/web/Facemesh.tsx)
• Off-boarding risk: anonymized user #1

• Further sole-owners (lower concentration)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• Most significant orphaned file (src/core/Splat.tsx)
• Off-boarding risk: anonymized user #1
• Outdated (npm): @babel/runtime
• Outdated (npm): @mediapipe/tasks-vision
• Outdated (npm): @monogrid/gainmap-js
• Outdated (npm): camera-controls
• Outdated (npm): cross-env
• Outdated (npm): detect-gpu
• Outdated (npm): hls.js
• Outdated (npm): stats-gl
• Outdated (npm): three-mesh-bvh
• Outdated (npm): three-stdlib
• Outdated (npm): troika-three-text
• Outdated (npm): use-sync-external-store
• Outdated (npm): zustand
• Projects may be oversized for their cohesion

• 7 commits — 5 feature/other, 2 fixes

• src/core — 2 commits
• .github/workflows — 1 commit
• docs/assets — 1 commit
• docs/getting-started — 1 commit
• docs/misc — 1 commit
• docs/staging — 1 commit

• fix: fix(AccumulativeShadows): keep scene.environment out of the light map (#2833)
• fix: fix: keep SoftShadows compatible with newer three versions (#2846)
• change: ci: build the docs with pmndrs/docs@v4 (#2770)
• change: docs: add Codesandbox preview images (#2861)
• change: docs: embed the pmndrs/examples demo instead of the CodeSandbox link on the introduction (#2862)
• change: docs: explicit Badges instead of shields.io tags (#2864)
• change: docs: group the Codesandbox preview images in docs/assets/csb-thumbs (#2863)

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

pmndrs/drei was measured the same way every project in this corpus was: the same rubric, at a pinned commit, with the result published in full. Point a surveyor at a repository you know and see whether you agree with it.