egltf.docs

Basic Usage

Learn how to use effectable-gltf in your React Three Fiber application

The EffectableGltf Component

The EffectableGltf component is a drop-in replacement for @react-three/drei's Gltf component. It accepts all the same props as the original component, plus the ability to add effects as children.

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

function MyScene() {
  return (
    <EffectableGltf src="/path/to/model.gltf" position={[0, 0, 0]} scale={1} />
  );
}

Adding Effects

Effects are added as children to the EffectableGltf component. You can add both effects to the same model, and they will be applied in the order they are specified.

Overlay Effect

The OverlayEffect adds a color overlay to your model with customizable opacity:

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

function MyScene() {
  return (
    <EffectableGltf src="/path/to/model.gltf">
      <OverlayEffect color="red" opacity={0.5} />
    </EffectableGltf>
  );
}

Outline Effect

The OutlineEffect adds a cartoon-style outline to your model:

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

function MyScene() {
  return (
    <EffectableGltf src="/path/to/model.gltf">
      <OutlineEffect color="black" />
    </EffectableGltf>
  );
}

Combining Effects

You can combine both effects on the same model:

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

function MyScene() {
  return (
    <EffectableGltf src="/path/to/model.gltf">
      <OverlayEffect color="red" opacity={0.5} />
      <OutlineEffect color="black" />
    </EffectableGltf>
  );
}

Effect Props

OverlayEffect Props
PropTypeDefaultDescription
colorColorRepresentationrequiredThe color of the overlay (any valid Three.js color)
opacitynumber0.5The opacity of the overlay (0-1)

OutlineEffect Props
PropTypeDefaultDescription
colorColorRepresentation'black'The color of the outline
resolutionnumber1000The resolution of the outline effect in pixels
strengthnumber2The strength of the outline
blurbooleanfalseWhether to apply blur to the outline

Best Practices
  1. Performance: The outline effect uses post-processing, so use it sparingly
  2. Opacity: When using the OverlayEffect, keep the opacity below 1 to maintain visibility of the original model
  3. Outline Resolution: Adjust the outline resolution based on your needs - higher values look better but impact performance

Next Steps

Edit this page