How To Share 3D Models With IPFS (2024)

If you’ve been paying attention to the art world over the last 10 years, you’ve seen a huge spike in the use of 3D modeling in art. This spans personal art pieces to video games to NFTs. The pandemic even gave rise to the concept of virtual events and conferences that take place in 3D worlds. 3D objects are everywhere.

Except on IPFS.

While these 3D objects can easily be stored on IPFS, viewing them is a different story. And viewing the models is the whole point to creating them, right? Let’s explore how we can move away from platforms like (the soon-to-be-shuttered) Google Poly and Sketchfab and self-host 3D models on IPFS while still being able to view those models directly through IPFS gateways.

For this blog, you’ll need any paid plan account with Pinata. The Picnic Plan gets you both storage access as well as a dedicated IPFS gateway, and is a great introduction to Pinata’s more advanced features. This means your 3D models can be viewed on IPFS through a gateway that you own and can brand with your own domain. You can sign up here.

Once you’ve signed up, the first step is to pin the 3D objects you’d like to be able to store and view on IPFS. To do this, simply go to the Pin Manager and click the Upload button:

You’ll be given three options for how you’d like to get your content onto IPFS through Pinata:

• Folder
• File
• CID

I am assuming your 3D object is a single file on your computer, so choose the file option.

You’ll then click the button in the file upload modal to select a file from your computer. Choose the correct file, then upload. When the upload is complete, your newly uploaded 3D model will be shown in the Pin Manager with an IPFS CID.

While with most files you can simply click on their name in the Pin Manager and view them directly through the IPFS gateway, you can’t do that with a 3D Model. Go ahead and try it. The file will be downloaded to your computer instead of viewable in the browser.

We’re going to fix that.

First, let’s create a dedicated gateway. Go to the Gateways tab on the left side. This will take you to the Gateways page. You have to be on a paid plan to create a gateway. We have a guide on setting up dedicated gateways here, but I’ll walk you through the process in this post.

Click the Create Gateway button to start.

When you do that, a Gateway Creation Wizard will pop up. The first step is to give your gateway a name. This name will act as a custom subdomain for your gateway. For example, if you chose the name “3dmodel”, and if that name was available, your gateway URL would be https://3dmodel.mypinata.cloud.

The next step in the process is determining if your gateway should be open or restricted. An Open Gateway allows content from the entire IPFS network to pass through it, even if you haven’t uploaded or pinned that content. A Restricted Gateway, on the other hand, only allows content that you have pinned to flow through it.

Make your selection, then click Create. This will only take a few seconds. Once the process is done, your gateway will be brought online behind the scenes. If you’d like to set up a custom domain (i.e., “alice.com”) for your gateway, we’ve got you covered. Here’s a guide that will help you do exactly that.

Now, we’ve got our 3D model uploaded and we have a dedicated gateway that we can, very soon, use to view our model. The question remains:

How do we make the gateway display 3D models rather than download them?

We’ve built a small app that can be served through your own gateway that will fetch 3D Models from your gateway and render them in the browser. The cool thing about this is you won’t even need to know it’s an app, you won’t have to touch any code, and it’s going to be entirely hosted on your gateway.

Head back over to the Pin Manager. Use that same upload button we used before, but this time choose the CID option. This option allows you to enter an IPFS CID rather than having to upload the file yourself. If that CID is available on the IPFS network, Pinata will find it, pull it in, and pin it to your account.

I’m going to give you the CID for the small app I mentioned before. When you pull that in, it should be pinned to your account quickly. So, go ahead and click the CID options. You’ll be presented with a modal that asked for the CID and a name for the pin.

You should enter this CID in the CID field:

QmUR2XyUZvGvsNMmLBA5joPduT4f95jSMGzzzmCkckKSF4

I would also recommend giving it a custom name so that you know this file is for the 3D Model Viewer. You can call it whatever you’d like. Once you’ve done so, click “Search and Pin”.

You won’t see anything update in the Pin Manager table right away, but if you refresh your browser after a few seconds, you should see the new file show up:

Once it shows up, then it’s ready to use. Now, all you need to know is the format of the URL you’ll use to view your 3D models. Let’s break that down.

First, you need to know your gateway URL. If you chose “pinnie” as your gateway name, your gateway URL will be https://pinnie.mypinata.cloud. If you created a custom domain, your gateway URL will be that custom domain.

Next, when we view content through a gateway, we need to add /ipfs/ to the URL. So your gateway URL with that tacked on would look like this:

https://pinnie.mypinata.cloud/ipfs/

Next, you need to grab the CID I provided you and that you pinned that represents the app that will help us view these 3D models and append that to the end of the URL like this:

https://pinnie.mypinata.cloud/ipfs/QmUR2XyUZvGvsNMmLBA5joPduT4f95jSMGzzzmCkckKSF4

This is the base URL you will always use to share your 3D models (replacing the “https://alice.mypinata.cloud” with your own gateway URL, of course). The last step is passing in the information about the 3D model we’d like to view through that URL.

We need to pass through two mandatory pieces of information:

• object (the CID of the 3D model)
• filename (the filename with extension for the model — the name can be made up but the extension needs to be correct)

Let’s take a look at an example:

https://pinnie.mypinata.cloud/ipfs/QmUR2XyUZvGvsNMmLBA5joPduT4f95jSMGzzzmCkckKSF4?object=QmW2cz7yws2ikxjCHkSxK2ZcEbQRA7japaDGx3DpvpC3ek&filename=my_custom_file.3ds

Notice the way the URL is formatted? The ? after the CID tells the browser that we’re about to give it a piece of information that it will need to read. We then tell the browser that piece of information’s name is object. The = tells the browser that the thing that comes after it is the value associated with the name. The value in this case is the CID for the actual 3D model you want to view.

You’ll notice the URL also includes an & and then another pair of name/values. The & is just telling the browser that we have another set of information for it to read. In this case, it’s the filename.

To help illustrate the way the URL is constructed, you can think of it this way:

Here’s an example using a test 3D object I uploaded and a custom Pinata dedicated gateway:

The URL for the above object looks like this:

https://pinnie.mypinata.cloud/ipfs/QmUR2XyUZvGvsNMmLBA5joPduT4f95jSMGzzzmCkckKSF4/?object=QmY9PdJRj71Qo1AP48gHtqULhJnHnJeuBKM6wzQor3u1Qz&filename=object.3ds

With this, you should be able to view the following types of 3D objects in the browser through your IPFS gateway:

obj, 3ds, stl, ply, gltf, glb, 3dm, off

As an added bonus, this now makes sharing your assets directly through your gateway so much easier. Put them on Twitter or Facebook. Email the links. As long as the recipient has access to a web browser, they will be able to load the models.

Pro tip time! If you want the browser tab to display a custom name for your 3D model, you can add on one more name/value pair to the end of the URL like this:

&customname=whatever name you want

While this is still just a proof of concept, it shows the power of having a dedicated IPFS gateway. We can’t wait to see your creations!

Happy pinning!