DEV Community: checode

How to Integrate 3D Models into Your Website Using Only HTML and CSS

checode — Thu, 12 Jun 2025 08:41:29 +0000

In this article, I want to show you how to display 3D elements on your website in a very simple way.

I also made a video about it, so if you're interested, feel free to check it out — but if not, all good! I’ll walk you through everything step by step right here.

The video is originally in Spanish. AI-generated English voice. Yeah, I know, not ideal. But hey, one day I hope to upload the full thing in English (with a lot of accent 😅).

Anyway, let’s get started with the article step by step.

1. How to get a 3D model for your website

The internet is full of 3D models you can download. Either for free or paid.
A well-known place is sketchfab

I recommend downloading the model in .gltf or .glb format — these are the ones that work best on the web.

If you download a .glb file, it’ll come as a single file with the .glb extension.
But if you go with .gltf, you’ll get a folder with multiple files inside you’ll need to unzip it.

Even though the main file is scene.gltf, don’t delete anything all the files depend on each other, so it’s totally fine to keep them all together in the same folder.

I found a really cool 3D dragon model that I was able to download for free (shoutout to the creator of the model in the video).

Once you’ve got your 3D model, let’s move on to step two:

2. How to Insert a 3D model in HTML

There isn’t a default HTML tag that can load 3D elements on the web. That would be a dream!
But luckily, Google took care of this by creating a nice web element called model-viewer

What is model-viewer?

<model-viewer> is a web component that lets you embed 3D models directly into your HTML without needing libraries like Three.js. It’s supported by all major modern browsers and works with formats like .glb and .gltf.

As the documentation on the model-viewer page says, you need to import the script with the model-viewer component, and after that, you can use <model-viewer>just like any other HTML element.

Keep in mind that since we’re working without any framework, just a bit of HTML. we need to run our project on a server. Without a server, this won’t work. the extension live server It's more than enough.

so:

3. Insert the 3D model in HTML with model-viewer

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

<!-- Use it like any other HTML element -->
    <model-viewer
    src="shenron_dragon_ball/scene.gltf"
    alt="avatar"
    shadow-intensity="1"
    camera-controls
     >
    </model-viewer>

<!-- Import the component -->
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js"></script>
</body>
</html>

The <model-viewer> element has several attributes and properties you can use. You can find them in the API REFERENCE section of the documentation.

But the most essential ones to include, almost as a must, are the following:

src To set the path to our 3D file. If you downloaded a .glb, it’ll just be the file. If you grabbed a .gltf, then the path needs to point to the downloaded folder and inside it to the scene.gltf file.

Just be super careful not to mess up the file path 😅

shadow-intensity Controls the opacity of the 3D model’s shadow. For example, if you set it to 0, it should completely disable the shadow.

camara-controls They allow the user to move and control the 3D model.

But there are many others you’ll love if you feel like trying them out :) Check them out here:API REFERENCE

You can also apply styles to the model-viewer without any problem. For example:

<style>
   model-viewer {
       width: 100vw;
       height: 100vh;
   }
</style>

Some final comments

It’s worth mentioning that model-viewer is compatible with the latest major versions of all browsers.

The only limitations are if you want to use it for augmented reality models, especially with Safari and Mozilla browsers. But when it comes to 3D, everything works amazing!

That’s all!
thanks so much.

Cheers,
Pablo

How to deploy a Backend project on Vercel | Node.js - Express.js 🚀

checode — Mon, 21 Oct 2024 13:52:51 +0000

Deploying a backend project with NodeJS and Express on Vercel is pretty straightforward. You just need to keep a few things in mind! I'll walk you through it step by step in this article, and I'll also provide the sample code so you can copy it and try it out in your project.

I’m also sharing the step-by-step process in a video.

Don’t forget to subscribe to my channel ❤️.

Preparing the project for deployment on Vercel

We'll start by creating a simple project to deploy. In your code editor, create a folder named app. Inside this folder, run the following command in the console:

npm init -y

This will create a package.json file with basic and necessary project information.

Now, inside our app folder, create another file that we’ll call index.js. It’s crucial that it's named index.js and not something like app.js or server.js because Vercel will look for a file named index.js when deploying the code.

So the structure should look something like this:

Alright, let’s start writing some code in our index.js. Here's a basic example you can use as a reference.

const express = require("express");
const app = express();

const port = process.env.PORT || 3000;

app.get("/", (req, res) => {
  const htmlResponse = `
    <html>
      <head>
        <title>NodeJs and Express on Vercel</title>
      </head>
      <body>
        <h1>I am a backend project on Vercel</h1>
      </body>
    </html>
  `;
  res.send(htmlResponse);
});

app.listen(port, () => {
  console.log(`port running at http://localhost:${port}`);
});

At this point, you likely have your own project or are thinking of deploying something else, but let me give you a quick explanation of the code above—it might be useful.

The first thing it's doing is requiring Express and then invoking it in the app constant.

const express = require("express");
const app = express();

Since we're using Express, we need to install it for it to work 😅
Run this command in the console, always inside the app folder:

npm i express

The second thing (and very important) is the port configuration in the port constant.

const port = process.env.PORT || 3000;

Here, we’re telling it that our project will run on a specific domain, or in our case, on a URL that Vercel will generate for us. We indicate this with (process.env.PORT). Then we tell it that if no domain/URL is configured, it will run on our local server at port 3000 with this: ( || 3000). But no worries! Vercel will configure a URL for us!

Now for the third step, but the important part is already done in step 2. The rest is more about adjusting it to whatever happens in your project. In my case, I’ve just set up some basic HTML code to display in the browser when the server runs.

app.get("/", (req, res) => {
  const htmlResponse = `
    <html>
      <head>
        <title>NodeJs and Express on Vercel</title>
      </head>
      <body>
        <h1>I am a backend project on Vercel</h1>
      </body>
    </html>
  `;
  res.send(htmlResponse);
});

Finally, we ask the app constant (where Express is running) to listen to the port we configured earlier and give us some feedback in the console.

app.listen(port, () => {
  console.log(`port running at http://localhost:${port}`);
});

Now we're ready to test the project on our local server (it will run on port 3000) to check if everything is working. Run this command in the console:

node index.js

Did it work? Well, if everything went well, meaning there were no errors and your project ran successfully on your local server at port 3000, then we're ready to upload it to Vercel.

Preparing project configurations for deployment on Vercel

At this stage, the first thing we need to do is create a JSON file called vercel.json (again, always inside the app folder). Inside this file, we'll add the basic configurations Vercel needs, like this:

{
  "builds": [
    {
      "src": "./index.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "/"
    }
  ]
}

I don’t want to go too deep into this, but these are the necessary configurations for the "builds" and "routes" that we need to make the deployment work.

A brief explanation:

Builds: These define how the application is built. In this case, we use our index.js file within the @vercel/node runtime environment.

Routes: These define how the application’s routes are handled. All URLs represented by /(.*) will redirect to the site’s root (/).

At this point, your project structure should look something like this (or so I hope).

Deploying the project on Vercel

Now for the final part: it’s finally time to upload this to Vercel. First, you need to create an account if you don’t already have one. Creating an account on Vercel is completely free, and they won’t ask for a credit card or anything like that. You can create an account here: https://vercel.com.

There are two ways to deploy: one is by linking a repository, and the other is by using the Vercel CLI and doing everything through the console. I prefer using the console because it’s very simple, and there’s no need to upload everything to GitHub. Here’s how to do it.

If you’ve never installed Vercel before, now is the time!
Run the following command in your console to install Vercel globally:

npm install -g vercel

Now we can use the CLI and upload the project via the console.
Simply run the vercel command.

vercel

Once you run that command, a few simple questions will appear in your console that you need to answer.

Here they are with explanations:

Set up and deploy:
Here, type “y” for yes.

Which scope do you want to deploy to?
Here, it asks which scope you want to deploy to. I see pab-mchn because that’s my account name, and I’m logged in. If you’re not logged in yet, it will prompt you to log in. It’s a simple process managed through a browser confirmation.

Link to existing project?
Here, it asks if you want to link this to an existing project on Vercel. Type “n” for no, unless you want to link it to a project you’ve already created.

What’s your project’s name?
Here, it just asks for the name you want to give your project. Create one or use the name of your project if you answered “yes” to the previous question.

In which directory is your code located?
Here, it asks where your project is located and suggests ./ as the answer. This is correct—our index.js file is in the project’s root inside the app folder, so the location is right. Simply press "Enter."

And that’s it! Vercel will generate the links to deploy the project, and you’ll be able to view it at the URLs displayed in the console. Open them in your browser.

If you want to push it to production, you can run this command (it’s suggested in the console too):

vercel --prod

That’s it!

I hope you get your awesome project up on Vercel, and have a good time doing it.

Best regards,
Pablo.

How to fetch an API with REACT 19 | use - suspense

checode — Mon, 16 Sep 2024 11:07:10 +0000

In this article, we will explore how to consume an API using the new use API in React 19, a feature that simplifies the management of asynchronous data in applications.

I’m also sharing the step-by-step process in a video.

Don’t forget to subscribe to my channel ❤️.

First the comple code:

import {use, Suspense } from 'react';


const fetchUsers = async () => {
  const res = await 
  fetch('https://jsonplaceholder.typicode.com/users');
  return res.json();
};


const userPromise = fetchUsers();

const Users = () => {
  const users = use(userPromise);

  return (
    <ul>
      {users.map((user) => (
        <div key={user.id}>
          <h2>{user.name}</h2>
        </div>
      ))}
    </ul>
  );
};


function App() {
  return (
    <Suspense fallback={<h1>Loading...</h1>}>
      <Users />
    </Suspense>
  );
}

export default App;

And now...

The Scenario

Let’s suppose you have an application where you need to consume an API (for example, an API to fetch usernames). Previously, you would have used useEffect, but with React 19, things are different. Now, you can use the use API, which allows handling promises in a much simpler way.

Breaking Down the Code

fetchUsers and userPromise

First, the fetchUsers function is defined to fetch data from an API, and the promise is stored in userPromise.

const fetchUsers = async () => {
  const res = await fetch('https://jsonplaceholder.typicode.com/users');
  return res.json();
};

const userPromise = fetchUsers();

The Users Component

Then, in the Users component, the use API is used to handle the promise:

const Users = () => {
  const users = use(userPromise);

  return (
    <ul>
      {users.map((user) => (
        <div key={user.id}>
          <h2>{user.name}</h2>
        </div>
      ))}
    </ul>
  );
};

Suspense in Action

Finally, the Users component is wrapped in a Suspense component, which displays a "Loading..." message while the promise is being resolved.

function App() {
  return (
    <Suspense fallback={<h1>Loading...</h1>}>
      <Users />
    </Suspense>
  );
}

Considerations

It’s important to note that use doesn’t support promises created during the render phase, so they must be created outside of this phase, as was done with userPromise. Although, in the React blog, they mention that they will bring solutions for this in the future.

Conclusion

React 19 introduces powerful tools to simplify application development. The use API is one of them, making asynchronous data management more intuitive and efficient.

Thank you very much!

All the best,
Pablo.