DEV Community: Jacob Dement

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

Jacob Dement — Sun, 26 Jan 2025 20:57:24 +0000

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="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!

How Project Ideas Can Come From Anywhere - My Open Source Daily Puzzle Game

Jacob Dement — Tue, 01 Oct 2024 00:06:10 +0000

My Recent Open Source Project

Recently I created an open source puzzle game called Pop A Lock it's like Wordle, but with numbers and hints instead. I got the inspiration for this project months ago, but didn't have the time to make the idea become a reality, but I finally got around to it. The inspiration came from this random reddit post I saw talking about a pen and paper lock puzzle. I thought "I could totally make that into a fun little puzzle game" thus the project idea was born.

Use the random things you see around you as project ideas.

I see people often say (especially newer devs) "I need project ideas". However the truth of the matter is original ideas are hard to come by, but if you use the random things around you in your life as inspiration the most trivial things can become your next web app.

How to Generate Ideas from Daily Life

Here are a few tips I have for always having project ideas:

Solve Problems You Encounter

If you run into a challenge or inefficiency in your day-to-day life, think about how you could solve it through an app or website. Even small inconveniences can inspire a useful project.

Keep a Notebook of Ideas

Take Pop A Lock for example, I had the idea for this project months before I had the time to create it, take notes in your phone of your project ideas!

Most Importantly, Don't Overthink It

It’s important to remember that your project doesn’t have to be groundbreaking to be valuable. Not every idea needs to be the next Facebook or Google – even a small, fun project can teach you new skills, give you something to share with the community, and build your portfolio.

Share some of your random projects you've made in the comments!

How to Send HTML Form Data to Your Email Without Backend Code

Jacob Dement — Mon, 16 Sep 2024 03:13:33 +0000

Sending HTML form data to your email is very simple.

First create an account on FormBee, this is an open source form backend service, that will handle the form data transmission for us.

Make a form with an action attribute to `https://api.formbee.dev/formbee/[api-key]` with your API key from the FormBee dashboard.

<form action="https://api.formbee.dev/formbee/[api-key]" method="POST">
  <input type="text" name="name" placeholder="Name">
  <input type="email" name="email" placeholder="Email">
  <input type="submit" value="Submit">
</form>

Add the email you would like to receive your form submissions at here on the FormBee dashboard.

Now whenever your HTML form is submitted you will receive the submission in your email!

For info on how to integrate FormBee in various frameworks visit the FormBee Docs.