How to Create an Interactive NFT with Remix and threejs

In this post, we will try to create an interactive NFT.
The goal is to see it on Opensea.

requirements

• Metamask (https://metamask.io/)
• some ether on Rinkeby (https://faucet.rinkeby.io/)
• Pinata account (https://www.pinata.cloud/)
• Sketch (anything you want to use threejs/processing.js/p5.js etc)
• One image for thumbnail on Opensea

Steps to Create an interactive NFT

We need the following steps to create an NFT.
In this post, I won't explain how to install Metamask. If you are not familiar with that, I highly recommend you to watch a couple of videos on Youtube. Just search how to use Metamask on Youtube.

Step1. Create a sketch
Step2. Write a contract on Remix
Step3. Upload assets to Pinata
Step4. Create a JSON file for metadata
Step5. Mint an NFT
Step6. Check your NFT on Opensea and play with it

Step1. Create a sketch

You can create anything that you want to turn into an NFT. However, there are a couple of things you should know.

1. You can not use a webcam for your sketch since Opensea doesn't support it. (I tested this)
   https://testnets.opensea.io/assets/0x3f882115af78075931ae9a0ed2ac9b76e4080907/0
   👆 shows a button only...

2. You can not use emoji in your sketch. (I also tested)
   https://testnets.opensea.io/assets/0x3f882115af78075931ae9a0ed2ac9b76e4080907/2
   Sushi emoji is supposed to be on the screen but not 😂.

3. You should put all your js/css into index.html since Pinata may not allow index.html to have many connections to js/css files. Actually, I was told that from Pinata. However, if you are familiar with webpack or other bundle tools, your sketch will be fine. (I used webpack for this post)

4. You can use CDN for js libraries.

In this case, I created a super simple three.js sketch.

Step2. Write a contract on Remix

We will use Remix to write a contract.
Remix(https://remix.ethereum.org/) is an Ethereum IDE.

InteractiveCube.sol

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.10;

import "https://github.com/OpenZeppelin/openzeppelin-contracts/blob/v4.4.2/contracts/token/ERC721/ERC721.sol";
import "https://github.com/OpenZeppelin/openzeppelin-contracts/blob/v4.4.2/contracts/token/ERC721/extensions/ERC721URIStorage.sol";
import "https://github.com/OpenZeppelin/openzeppelin-contracts/blob/v4.4.2/contracts/utils/Counters.sol";

contract InteractiveCube is ERC721URIStorage {
    using Counters for Counters.Counter;
    Counters.Counter private _tokenIds;

    constructor() ERC721 ("InteractiveCube", "CUBE") {}

    function mint(string memory tokenURI) public returns (uint256) {
        uint256 newItemId = _tokenIds.current();

        _safeMint(msg.sender, newItemId);
        _setTokenURI(newItemId, tokenURI);

        _tokenIds.increment();

        return newItemId;

    }

}

It's time to compile our contract and deploy it to Rinkeby, Ethereum testnet.

Those are pretty easy since Remix offers simple UIs to do that.

Compile the contract
Make sure that you use the compiler that is the same as your code refers. In this post, we use 0.8.10.

Deploy
Make sure that you set Environment: Injected Web3 and your MetaMask is on Rinkeby. Then click Deploy.

Step3. Upload assets to Pinata

We need to upload the sketch folder(In my case, I used webpack so I needed to upload the folder that includes index.html and bundle.js) and one image file as a thumbnail on Opensea.

The followings are about uploading a folder to Pinata.

Before uploading the image please check that your sketch is working on IPFS properly.

The steps you need are almost the same as folder ones.

Step4. Create a JSON file for metadata

We need to create a JSON file to tell where our sketch is to Ethereum.

The following will be displayed as Description on Opensea.
If you want to add more properties, please check Opensea documents.
https://docs.opensea.io/docs/metadata-standards

cube.json (You can name it whatever you want)

{
  "name": "InteractiveCube 1",
  "description": "Red Cube",
  "image": "https://gateway.pinata.cloud/ipfs/QmaYSb2UuAjoyyfoRWqN7q6mjAn3518idxZwWuxyc4WBkw",
  "animation_url": "https://gateway.pinata.cloud/ipfs/QmVpZCEQBAmXQ5L9iTSgMZtKsMqYRKkqZeJUL4WrbnALvx/"
}

Step5. Mint an NFT

Open Remix again and click Deploy icon. If you open the contract you compiled, there will be mint like the below.

You need to copy and paste the json'URI in step 4 and click mint.

Step6. Check your NFT on Opensea and play with it

The last step is to check your minted NFT on Opensea.
Go to https://testnets.opensea.io/ and the click user icon where is next to the wallet icon then select profile.
You will see your NFT like this.

The following is my result.

Comments

[Jakob 777]

I decided to try this and got stuck after pressing the "mint" button. It seems logical to me to enter the CID of the Json metadatafile next to the mint button. Metamask pops up an the gas deal seems to be ok , but at the bottom (which I noticed later because it was not visible to me) there is an error "Both 'receive' and 'fallback' functions are not defined. So is there an example somewhere how to correct and complete the NFT?

[Deep]

Awesome, was wondering if you can share the threejs file you used for this tutorial, as I've not worked in threejs, but wanted to try this