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
2. Import the Component
import { ExtrudeModel } from 'extrude-ui';
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,
}}
/>
);
}
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