3D Car Image Just With One API!

Let me introduce an API that you just gave the car name and then you can have a 3D image of it in any color, angle, model, and so on, and that's imaging studio.
In this blog, I'll teach you how to use this API and how to customize the car in the way that you want. so let's go to VScode and learn while we are coding.

1- Where Can You Get The API?

Well, you can find the API on the RapidAPI website here. As you can see you have the code for calling the API that you can copy and paste but if you want to see what will you receive after fetching this API simply click the Test Endpoint button and it will show you the JSON format of the data.
By clicking the button you can see we have tons of options like fuel_type, drive, class, and a lot more. Keep in mind that this API is free and you don't have to pay any money to use it.

2- Get The Data

So here, I have a small project that I want to simply call the API and get the Supra image with a kind of green color. so let's make an index.ts file and copy these codes for calling the API.

export async function fetchCars() {
  try {
    const response = (
      await fetch(
        "https://cars-by-api-ninjas.p.rapidapi.com/v1/cars?model=supra",
        {
          headers: {
            "X-RapidAPI-Key":
              "fa5d9302b5msh316f633dd1fb958p111bedjsnb5ccf339adf5",
            "X-RapidAPI-Host": "cars-by-api-ninjas.p.rapidapi.com",
          },
        }
      )
    ).json();
    return response;
  } catch (error) {
    console.error(error);
  }
}

In the above code, I just fetched the API in an async function, and in the headers option, I gave it the same headers in the Rapid API (Just copy and paste the code). But did you notice something in the API?
After cars, I gave it the name of the car that I wanted like: [the API]?model=supra.
Or you can just give the params and then the car model that you want. like this:

So now how can we see it?
Let's go to our Hero.tsx file that we want to use this API to render our car image there. This is how Hero.tsx looks like:

import { BackgroundBeams } from "@/components/Aceternety-ui/HeroBeams";
import React from "react";
import styles from "./Hero.module.css";
import { fetchCars } from "@/utils";

async function Hero() {
  const allCars = await fetchCars();
  console.log(allCars);

  return (
    <div>
      <BackgroundBeams />
      <div className={styles.component}>


        <div className={styles.carImageComponent}>
             {/* HERE WE RENDER THE IMAGE */}
        </div>
      </div>
    </div>
  );
}

export default Hero;

Here we have BackgroundBeams it is a component from aceternity UI (it's okay if you don't use this one), then our styles, and finally imported the fetchCars from Index.ts in the utils folder.
So basically this file right here:

Then I await this fetchCars function and store it in a const name allCars. Now if you log this allCars maybe your log in your browser will throw an error but when you open your terminal in VScode you can see all of the data there:

Now that you have all of the data for the Supra car you can simply loop through the allCars array and use all of these parameters, but what about the image? there is no image in our data, right?
No worries, for getting the image we need to call another API provided by the imagin studio. So let's back to our index.tsx to call this API.

3- Get the Image

As I told you we need to fetch another API to get the images. Basically, these 2 APIs are for one company, one for getting data and the other one for getting the image.

So let's begin:

export const createCarImage = (car: any, angle?: string) => {
  const url = new URL("https://cdn.imagin.studio/getimage");

  const { make, year, model } = car;

  url.searchParams.append("customer", "hrjavascript-mastery");
  url.searchParams.append("zoomType", "fullscreen");
  url.searchParams.append("paintdescription", "radiant-green");
  url.searchParams.append("modelFamily", model.split(" ")[0]);
  url.searchParams.append("make", make);
  url.searchParams.append("modelYear", `${year}`);
  url.searchParams.append("angle", `${angle}`);

  return `${url}`;
};

In this code, I gave our createCarImage function two parameters one is the car which is an array of our data and the second one is the car angle which if it exists we use it otherwise, we don't need it. Then I created a new URL and gave it the API which you can see in the code above. After that, I take out the model, year, and make out of the car parameter so we don't need to write car.model or car.year every time. In the end, I set all the other parameters for our API like zoomType or modelYear, and finally returned the URL.
But to get the image you need to have a customer key. You may not be a company to email them for sending it to you, and it is totally okay cause as you can see I found a free customer key name as hrjavascript-mastery for you under one of the projects of js mastery channel on YouTube that you can use for your projects completely free!

Here we used our key that you can see in the above code too:

  url.searchParams.append("customer", "hrjavascript-mastery");

In the Hero file, we need to import this createCarImage function to use it in our JSX, like this:

import { fetchCars , createCarImage } from "@/utils";

Now to get the image we need to pass this function to its src and give it the allCars (our data that we had) at the position of 0 because I want the first car model in the array of our data. If you like to render all of the cars that you have in the allCars array you can simply loop over it and then use the data for it. So the code will look like this:

async function Hero() {
  const allCars = await fetchCars();
  console.log(allCars);

  return (
    <div>
      <BackgroundBeams />
      <div className={styles.component}>
        <h1>SUPRA!!!</h1>

        <div className={styles.carImageComponent}>
          <img className={styles.carImg} src={createCarImage(allCars[0], "")} />
        </div>
      </div>
    </div>
  );
}

As you can see I'm giving allcars at position 0 to my createCarImage function to look for the image of that car and also I gave it no angle (If you like to try another angle go for 29 or 13 for example). now you should see this:

At the angle of 29:

At the angle of 13:

4- Need docs?

If you need help with this API you can always read their docs here. You can find docs about subjects like changing colors or zooming and a lot more.

🔴Was This Blog Helpful?

If this blog was helpful to you like and follow🙏.
Also if you have any opinion or question feel free to comment it out.