publishDate: "18 May 2022"

description: "Learn how to scan and mint real life objects on Solana"

tags: ["web3", "nfts", "tutorials"]

---

The growth and evolution of NFTs has come a long way from the early days. Some of the early NFT projects were simple .png files or a link to a YouTube video, but now they are an entire industry that consumes brand, utility, even augmented reality. Metaverses, 3D objects, and other virtual reality experiences are all the rage, and I firmly believe we will see more of this in the near future.

With the video below you can get glimpse of how the LiDAR scanner maps over surfaces. Taking it real slow and covering every angle really helps with scanning environments.

After you’re done scanning there will be a processing step that will take all the data and map it into a 3D environment!

Once it’s processed you can go ahead and view the 3D model/environment! Polycam really is first class; you can create videos, you can view the model in Augmented Reality, it just has so many awesome features! My model isn’t the cleanest since I have so many small detailed objects on my desk, but for something a bit simpler this feature is amazing.

Now that we got our model, we can upload it to the cloud and look at it through our web browser! Just click on the little cloud icon on the top of the screen when viewing your model and it will be uploaded to your cloud storage with Polycam.

Once viewing it in the web browser, we can download the model by clicking “export.”

From there we want to select the GLTF format and start the download!

Ok so we got our 3D file for our environment, now lets do some 3D objects as well! The process is pretty similar, except for 3D objects we’ll switch to the “photo” mode instead of the LiDAR mode. The photo mode will take a bunch of different pictures and put them together to make a 3D model! In the video below you can see what the process looks like as I scan one of my prized possessions, a 1930's edition of Moby Dick illustrated by Rockwell Kent.

Once we finish scanning the book, I like to select the higher end of the quality allowance, and I like to use the object masking to get all the fine details. These photo mode objects are a bit more work, so when you take one Polycam sends it off to a server for higher powered processing. Due to how intense the work is, you can only take 150 of these a month, but I don’t think that will be an issue for most people. Once they finish processing it, the model looks like this!

The download process looks exactly the same as we did the desk, very easy! Also while you’re still in Polycam, you can edit, adjust, crop, etc. your model all inside their app or website, so that way when the model is exported it’s ready to be turned into an NFT!

Let’s log into Pinata and upload our file. Really simple, just click on the upload button in the top left, give it a name, and upload!

Then we just need to choose a subdomain and make sure its available. If it is, click next!

Then using a wallet like Phantom, click on “Add / Connect wallet, select “import private key,” then paste in our keypair from earlier. Once it’s in your wallet you will want to click on the settings icon in the bottom right, scroll down to “change network” and set it to “Devnet.” Once you do that, go back to your NFTs page and you should see it!!

## Conclusion

tags: ["web3", "nfts", "tutorials"]

ogImage: "https://miro.medium.com/v2/resize:fit:4800/format:webp/1*KxoVDEZFH3mJrlfeguMYjg.jpeg"

---

As a believer in NFTs and Web3, I am always ecstatic to see what can be done with this new technology. I get bullish over new projects, experimental ideas, and cutting edge utility (especially when it’s something we make at Pinata like [Submarine.me](https://submarine.me)). However, I don’t look at this Metaverse with rose colored glasses. There are many imperfections in this space, and one of the worst ones is environmental impact.

While I love dooting around on my computer, I also love the outdoors. I love hiking, seeing mountains, hearing rivers, and smelling wildflowers. I love hearing birds in the morning and geese at night. I love to watch my son experience nature and get excited over a butterfly. So yeah, it kinda kills me to think of how this wonderful industry of crypto can harm this amazing planet.

The energy consumed by proof of work blockchains is staggering. It’s no secret, and if we want to enjoy this planet we need to accept it. I know I feel defensive when someone attacks something I enjoy, but it helps to take a deep breath and ask the big questions: “could I be wrong?” If crypto is putting the planet in danger, what do we do?

This is where [Aerial](https://aerial.is/) steps in. Aerial is a sustainability platform that helps users track their carbon footprint and make donations to help offset their carbon footprint. They are known for their beautiful [mobile application](https://aerial.is/download), but more recently they have developed an API that can track and estimate the carbon footprint of NFT projects and crypto! Per their website, “Emissions are calculated based on the energy consumption of the [Ethereum network](http://ethereumenergyconsumption.com/) and the average [gas used](https://etherscan.io/chart/gasused) per transaction.” Since [Pinata](https://pinata.cloud/) is the home of NFT media we want to always support initiatives like this to make NFTs more sustainable!

They have some awesome and simple ways you can integrate their widget to your website that looks something like this:

```javascript

<iframe src="https://www.aerial.is/nft/embed?address=0x3e88721fa41d5e102d54b4a04e550222efdd234d">

```

In this post we’ll take their API a step further and build our own custom widget. We can use it in our frontend website that displays more details about the project’s emissions with the goal of making visitors more aware!

If you want to follow along for this tutorial, you’ll need to have npm installed and be familiar with a frontend framework like React. First thing we’ll do is create a new React app and CD into it.

```bash

npx create-react-app aerial-component

cd aerial-component && npm start

```

Then we’ll delete the CSS files and boilerplate so we are left with this in App.js

```javascript

function App() {

  return (

export default App;

```

Now let’s make a new component. Create a new file in the src folder called Aerial.js and fill it with this starter code

```javascript

const Aerial = () => {

  return (

}

export default Aerial;

```

Now let’s import the new component to our App.js

```javascript

import Aerial from "./Aerial"

export default App;

```

If you run npm start you should see your basic app with “Aerial” in the top left!

Now that we have our new component ready to go, we need to start making some API calls and fetching the data. If you need a reference for how to use Aerial’s API you can see their reference [here](https://www.notion.so/aerial/Aerial-API-343ebee875784ca18c244a5aae9fa7d3).

It’s really quite easy, all we have to do to fetch some basic data is use the following format

```

GET https://aerial.is/_nft/<address>

```

This will return data in the following format

```json

{

 "co2": <emissions in CO2>,

 "transactions_offset": <number of transactions already offset>

}

```

So let’s give it a shot! First thing we need to do is install Axios to help us with our API calls. Go back to the terminal and run

```bash

npm install axios

```

Now make sure to import it into the top of our Aerial component like so

```javascript

import axios from "axios"

```

Now we’re going to make a quick function that will get the data. For our example we’re going to use the NFT contract address 0x2acab3dea77832c09420663b0e1cb386031ba17b.

```javascript

const getEmissionsData = async () => {

    try{

    }

  }

```

To run this function we’ll use the useEffect hook to fetch the data as we load the app. To do that we simply need to import it at the top like so

```javascript

import { useEffect } from "react";

```

Then we need to run the function inside useEffect,

```javascript

useEffect(()=> {

    getEmissionsData()

  }, [])

```

This is what our code will look like with everything in place:

```javascript

import { useEffect } from "react";

If we run the app and check the dev console, we can see our data!

Now that we have the data, it’s as simple as displaying it so users on our website can see it!

To store the data we’ll import the useState hook at the top of our app along with useEffect

```javascript

import { useEffect, useState } from "react"

```

Then right above our function to grab the data, we’ll declare our state variable as an empty array where we can push stuff in later.

```javascript

const [emissionsData, setEmissionsData] = useState([])

```

Now all we have to do is edit our function just a little bit to push that data into our state using the “setEmissionsData”! Here is our function now

```javascript

const getEmissionsData = async () => {

    try{

    }

  }

```

The next thing we’re gonna do is create two components inside our file, one as a loading indicator, and the other as the data we want to display. To do this we’ll just make two more functions like this

```javascript

const loading = () => (

    <div className="loading-container">

    )

  }

```

To switch between the two we’ll create a new state called “isLoading” right underneath our previous state. We’ll set the default value to “false” for now

```javascript

const [emissionsData, setEmissionsData] = useState([])

const [isLoading, setIsLoading] = useState(false)

```

Back in our getEmissionsData function we need to turn the “loading” on when we start the request, and then off when we’re done.

```javascript

const getEmissionsData = async () => {

    try{

    }

  }

```

Finally, way down at the bottom where we render the whole app, we’ll add in some conditional rendering to say “display the loading component while loading, then display the data component when not loading.”

```javascript

return (

    <div className="aerial-container">

    </div>

  )

```

As a quick recap this is what our component looks like at the moment

```javascript

import { useState, useEffect } from "react"

import axios from "axios"

Ok now the good part! Time to parse that data and display it. We’re going to go over a few of the pieces of data and how you may want to display them.

The first is the CO2 emissions, which the API returns as a raw number in the unit of Kg. The best way to make this number manageable in my opinion is to round up the number, and use some javascript to add the commas for each three digits. So back in our emissionsComponent, I have declared the following variable from our saved state.

```javascript

const co2 = new Intl.NumberFormat().format(Math.round(emissionsData.co2))

```

Next up is the gas used for this project, and for this one it returns a whole number so no need to round it up. We’ll just format it to be readable.

```javascript

const gas = new Intl.NumberFormat().format(emissionsData.gas)

```

Aerial of course also provides their unit for donations to offset the carbon emissions they call “credits.” The API can return the total credits need to make the NFT project carbon neutral, how many are purchased so far, and how much it would cost in total to offset the project in USD. To make this data more readable, we want to display how many credits have been purchased, how many are needed to offset, and how much it would cost to completely offset the project. We just need a little math to make that happen!

For the credits remaining, we just need to subtract the credits already purchased from the total credits needed to offset like so.

```javascript

const creditsRemaining = new Intl.NumberFormat().format(emissionsData.credits - emissionsData.credits_purchased)

```

Of course we want to display how many have already purchased and that’s pretty simple.

```javascript

const creditsPurchased = new Intl.NumberFormat().format(emissionsData.credits_purchased)

```

Now the more complicated part is calculating how much the remaining cost is. The API gives us the total cost, but it does not include how much has been spent. So for us to get this number we need to divide the emissions cost with the total credits needed to offset, then multiply that against the total emissions credits minus the credits already purchased. In the end it looks like this!

```javascript

const cost = new Intl.NumberFormat().format((emissionsData.cost / emissionsData.credits) * (emissionsData.credits - emissionsData.credits_purchased))

```

Lastly, we want the number of total number of transactions already offset.

```

const transactions = new Intl.NumberFormat().format(emissionsData.transactions)

```

Alright that was a bit of work to get sorted, but now we can easily plug this into our emissionsComponent so people can see the data in a more easy to read format. We’re also going to display this in a nice grid with each data cell in a box, so our code inside emissions is going to look like this.

```javascript

return (

      <div className="data-container">

    </div>

    )

```

At the bottom we’ve also added a button where a user can click on it and be directed to Aerials page for that particular NFT project, where they can make purchase credits to help offset that project.

To make this whole component feel clean as well as themed for the project, we took some colors and styled from DeadFellaz and added it to this page with some CSS; we also added a fun Lottie animation for the loading component instead of just a header that says loading. In the end our code looks like this!

		<article class="flex-grow break-words">

			<div id="blog-hero"><BlogHero content={post} /></div>

			<div

			>

				<slot />

			</div>