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

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="https://dev.to/oia20/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!



Source link
lol

By stp2y

Leave a Reply

Your email address will not be published. Required fields are marked *

No widgets found. Go to Widget page and add the widget in Offcanvas Sidebar Widget Area.