Cookie Consent by Free Privacy Policy Generator 📌 3D Car Image Just With One API!


✅ 3D Car Image Just With One API!


💡 Newskategorie: Programmierung
🔗 Quelle: dev.to

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.

Image description

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:

Image description
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:

Image description
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:

Image description
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, 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.
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:

Image description

At the angle of 29:
Image description

At the angle of 13:
Image description

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.

...

✅ 3D Car Image Just With One API!


📈 31.09 Punkte

✅ Sicherheitslösungen fürs Auto: Ring stellt Car Alarm, Car Cam und Car Connect vor


📈 26 Punkte

✅ TIBCO FTP Community Edition up to 6.5.0 on Windows Server/C API/Golang API/Java API/.Net API access control


📈 22.47 Punkte

✅ Free Lossless Image Format 0.3 LibPNG image/image-png.cpp memory corruption


📈 19.71 Punkte

✅ Free Lossless Image Format 0.3 image/image-pnm.cpp image_load_pnm denial of service


📈 19.71 Punkte

✅ Free Lossless Image Format 0.3 LibPNG image/image-png.cpp Uninitialized Memory unbekannte Schwachstelle


📈 19.71 Punkte

✅ Free Lossless Image Format 0.3 image/image-pnm.cpp image_load_pnm Denial of Service


📈 19.71 Punkte

✅ Kajona CMS 4.7 Image Handler /kajona/image.php __construct image Directory Traversal


📈 19.71 Punkte

✅ Avoiding lock-in for your image pipeline with Nuxt Image and Netlify Image CDN


📈 19.71 Punkte

✅ Kajona CMS 4.7 Image Handler /kajona/image.php __construct image Directory Traversal


📈 19.71 Punkte

✅ Image Roll - my new simple and fast GTK image viewer with basic image manipulation tools. Written in Rust.


📈 19.71 Punkte

✅ Plone up to 4.3.2 Image Tag Image.py OFS.Image Reflected cross site scriting


📈 19.71 Punkte

✅ Free Lossless Image Format 0.3 LibPNG image/image-png.cpp flif File memory corruption


📈 19.71 Punkte

✅ Free Lossless Image Format 0.3 LibPNG image/image-png.cpp flif File memory corruption


📈 19.71 Punkte

✅ MiniMagick up to 4.9.3 lib/mini_magick/image.rb Image.open Image File privilege escalation


📈 19.71 Punkte

✅ Image Creator from Designer’s swipe bug only shows one image in Copilot mobile app


📈 17.39 Punkte

✅ Pwn2Own 2019 – Tesla Car Internet Browser Hacked – Hackers Won the Car & $545,000 in Total – Day 3


📈 17.34 Punkte

✅ U.S. Proposes Car-To-Car Data Sharing Standards


📈 17.34 Punkte

✅ Medium CVE-2020-29287: Car rental management system project Car rental management system


📈 17.34 Punkte

✅ Aukey's tiny USB Car Charger on sale for $6 will look built into your car


📈 17.34 Punkte

✅ U.S. Proposes Car-To-Car Data Sharing Standards


📈 17.34 Punkte

✅ Ring Car Alarm und Ring Car Cam: Amazon sichert das Auto ab


📈 17.34 Punkte

✅ Hack the Car in Real Time – Car Alarm Flaw let Hackers Remotely Hijack 3 Million Vehicles Globally


📈 17.34 Punkte

✅ Build the greatest car parks ever in the retro-tycoon styled Car Park Capital


📈 17.34 Punkte

✅ This Electric Car Is The New Dream Car Of Lewis Hamilton


📈 17.34 Punkte

✅ Go hands-free in your car with 38% off an Aukey air vent car mount


📈 17.34 Punkte

✅ ESR Qi2 MagSafe Car Mount review: a practical upgrade over clamp-based car phone holders


📈 17.34 Punkte

✅ iOS 14’s Digital Car Key Feature Unlocks Your Car With iPhone


📈 17.34 Punkte

✅ DEF CON 26 CAR HACKING VILLAGE - Dan Regalado - Meet Salinas, 1st SMS commanded Car Infotainment RAT


📈 17.34 Punkte

✅ GM Cruise nabs former Apple car exec for autonomous car safety chief role


📈 17.34 Punkte

✅ This Car Is The Best Selling Car In India Since The Last 16 Years


📈 17.34 Punkte

✅ DEF CON 26 CAR HACKING VILLAGE - Jerry Gamblin - So You Want To Hack A Car


📈 17.34 Punkte











matomo

Datei nicht gefunden!