Introduction
An extensible effects system for glTF models in React Three Fiber
An extensible effects system for adding visual effects to glTF models in React Three Fiber.
What is effectable-gltf?
effectable-gltf is designed to make it easy to add visual effects to your glTF models in React Three Fiber applications. It provides a component ExtensibleGltf that acts as a drop-in replacement for drei's Gltf component.
It provides two built-in effects:
- Overlay Effect: Adds a color overlay to your model with customizable opacity
- Outline Effect: Adds a cartoon-style outline to your model
You can create your own component, hooking into the Gltf meshes.
Key Features
- Drop-in Replacement: Seamlessly replace
@react-three/drei'sGltfcomponent withEffectableGltf - Built-in Effects: Pre-built effects for common use cases
- TypeScript Support: Full type safety and autocompletion
- React Three Fiber Integration: Built on top of the powerful React Three Fiber ecosystem
Getting Started
To get started with effectable-gltf, check out the Installation guide and Basic Usage examples.
Why effectable-gltf?
- Simple API: Apply effects with a familiar React component-based approach
- Performance: Optimized for React Three Fiber's rendering pipeline
- Maintainable: Well-structured codebase with TypeScript support