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!

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay