Sign up for our upcoming Hackathon! Over $250,000 USD in prizes in MANA and LAND.
X
Hello! Please choose your
desired language:
Dismiss

Display an NFT in a scene

You can display a 2D NFT (Non-Fungible Token) that you own in your Decentraland scenes. A glowing picture frame will appear around the NFT to certify that you indeed own it.

The NTF’s image data is taken from an API, based on the token’s contract and id.

Currently, only a limited list of NFTs are supported:

  • CryptoKitties
  • Editional
  • Makersplace
  • KnownOrigin
  • Axie Infinity
  • MyCryptoHeroes
  • MLB Champions
  • Chibi Fighters
  • Blockchain Cuties
  • HyperDragons
  • Chainbreakers
  • Chainguardians
  • Cryptomorph
  • Josie
  • Blockcities

The picture frame is displayed adjusting to the dimensions of the NFT image. If the image’s dimensions are 512 X 512 pixels, the frame keeps its original size. If the image has different dimensions, the frame will be resized and stretched to match these dimensions.

Tip: If you want to stretch or resize the image from what’s generated by default, you can change the scale property in the entity’s Transform component.

Note: In future versions, when using the NFTShape component, the engine will automatically run a verification. The same Ethereum wallet that owns the LAND tokens where the scene is deployed or that is doing the deploying must also own the token. If these addresses don’t match, the image will be displayed in the scene, but without the glowing frame that certifies it’s an original NFT.

Add an NFT

Add an NFTShape component to an entity to display a 2D token in your scene.

const entity = new Entity()
const shapeComponent = new NFTShape('ethereum://0x06012c8cf97BEaD5deAe237070F9587f8E7A266d/558536')
entity.addComponent(shapeComponent)
entity.addComponent(
  new Transform({
    position: new Vector3(4, 1.5, 4)
  })
)
engine.addEntity(entity)

The NFTShape component must be instanced with a parameter that includes the following:

  • The contract of the token (for example, the CryptoKitties contract)
  • The id of the specific token you own

The example above fetches an NFT with the contract address 0x06012c8cf97BEaD5deAe237070F9587f8E7A266d, and the specific identifier 558536. The corresponding asset asset can be found in OpenSea at https://opensea.io/assets/0x06012c8cf97BEaD5deAe237070F9587f8E7A266d/558536.

When the token is displayed, it’s shown as having a pulsating frame around it.

You can change the background color of the frame, by changing the color property in the NFTShape. This affects back side of the model, and also the background of the image in case the NFT image has transparency.

const shapeComponent = new NFTShape('ethereum://0x06012c8cf97BEaD5deAe237070F9587f8E7A266d/558536', Color3.Green())

Move entity