DEV Community

Cover image for How to easily add 3D Models to your React apps.
Jacob Dement
Jacob Dement

Posted on

3 1 1

How to easily add 3D Models to your React apps.

Why I built a 3D React Component Library

I built ExtrudeUI to abstract the tedious boilerplate of adding a custom 3D model to my web apps. Now, adding 3D elements is as simple as importing a component. It’s open-source, and includes other features like:

  • Prebuilt animations (spin, hover, etc.)
  • Configurable camera controls
  • 3D buttons, images, and more (bonus components!)

The Guide: Add a 3D Model in 4 Steps

1. Install the Package

npm install extrude-ui
Enter fullscreen mode Exit fullscreen mode

2. Import the Component

import { ExtrudeModel } from 'extrude-ui';
Enter fullscreen mode Exit fullscreen mode

3. Use It in Your App

function MyComponent() {
  return (
    <ExtrudeModel
      src="model.glb"  // Path to your GLB/GLTF model
      animation="spinHorizontal"
      animationSpeed={0.5}
      enableOrbitControls={true}
      orbitControlsOptions={{
        enableZoom: false,
        enableRotate: true,
        enablePan: false,
        minPolarAngle: -3,  // Control vertical rotation limits
        maxPolarAngle: 1,
      }}
    />
  );
}
Enter fullscreen mode Exit fullscreen mode

4. Where to find and host 3D models?

My go to place for finding 3D models is SketchFab

I like to host my 3D models on uploadthing since they're generous enough to not charge egress fees (Really important for working with 3D!)

It can be helpful to have some basic blender knowledge to know how to tweak models to your liking, but definitely not required!

Community-Driven: Found a bug or have a component idea? Contribute! Here's our repo!

Thanks for reading, and I hope you find ExtrudeUI useful, or at the very least, interesting!

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay