API Reference

Complete API reference for effectable-gltf

Components

The main component that extends @react-three/drei's Gltf component with effects support.

import { EffectableGltf } from "@vantezzen/effectable-gltf";

Prop	Type	Default	Description
src	string	required	Path to the glTF model
...GltfProps	object	-	All props from `@react-three/drei`'s `Gltf` component

Adds a color overlay to the model.

import { OverlayEffect } from "@vantezzen/effectable-gltf";

Prop	Type	Default	Description
color	ColorRepresentation	required	Color of the overlay (any valid Three.js color)
opacity	number	0.5	Opacity of the overlay (0-1)

Adds a cartoon-style outline to the model.

import { OutlineEffect } from "@vantezzen/effectable-gltf";

Prop	Type	Default	Description
color	ColorRepresentation	'black'	Color of the outline
resolution	number	1000	Resolution of the outline effect in pixels
strength	number	2	Strength of the outline
blur	boolean	false	Whether to apply blur to the outline

Hook for accessing the effectable-gltf context.

import { useEffectData } from "@vantezzen/effectable-gltf";

function MyComponent() {
  const { root, meshes } = useEffectData();
  // ...
}

Property	Type	Description
root	MutableRefObject	Reference to the root group of the model
meshes	Mesh[]	Array of meshes in the model

Props for the EffectableGltf component.

interface EffectableGltfProps extends Omit<GltfProps, "children"> {
  src: string;
  children?: ReactNode;
}

The library provides error handling for common issues:

The library supports all modern browsers that support WebGL 2.0:

The library is written in TypeScript and provides full type definitions for: