展示已认证的 NFT

了解如何在你的场景中展示你拥有的已认证 NFT

你可以在你的 Decentraland 场景中显示你拥有的 2D NFT（非同质化代币）。

NFT 的图像和其他数据会根据代币的合约和 id，从 API 中获取。任何在 OpenSea 也可以在 Decentraland 的 NFT 相框中显示。

💡 提示：在 Creator Hub 中的场景编辑器，你可以使用一个 NFT 智能物品 以无代码方式实现此功能。

相框会根据 NFT 图像的尺寸进行调整显示。如果图像尺寸为 512 X 512 像素，相框会保持其原始大小。如果图像尺寸不同，相框将会调整大小并拉伸以匹配这些尺寸。

💡 提示：如果你想拉伸或调整默认生成的图像大小，可以更改 缩放 实体中的属性 Transform 组件。

添加 NFT

添加一个 NftShape 组件添加到实体中，以在你的场景中显示一个 2D 代币。

const nft = engine.addEntity()

Transform.create(nft, {
	position: Vector3.create(8, 1, 8),
})

NftShape.create(nft, {
	urn: 'urn:decentraland:ethereum:erc721:0x06012c8cf97bead5deae237070f9587f8e7a266d:558536',
})

该 NftShape 组件必须使用一个包含以下内容的参数进行实例化：

• urn 字段。此字段接受一个应遵循以下结构的字符串：

urn:decentraland:<CHAIN>:<CONTRACT_STANDARD>:<CONTRACT_ADDRESS>:<TOKEN_ID>

该字符串包括：

• 该 网络 该代币所在的网络。见下方受支持值列表。

• 该 合约标准 该代币所基于的，例如 erc721

• 该 contract 代币的合约（例如 CryptoKitties 合约）

• 该 id 要显示的具体代币的

例如：

urn:decentraland:ethereum:erc721:0x06012c8cf97BEaD5deAe237070F9587f8E7A266d:558536

上面的示例会获取一个合约地址为 0x06012c8cf97BeaD5deAe237070F9587f8E7A266d，以及特定标识符 558536。对应的资产可在 OpenSea 上找到，链接为 https://opensea.io/assets/0x06012c8cf97BeaD5deAe237070F9587f8E7A266d/558536.

以下值受支持，适用于 网络:

• ethereum：以太坊主网

• matic：Polygon Matic

• klaytn：Klaytn

• bsc：BNB Chain

• arbitrum：Arbitrum

• arbitrum_nova：Arbitrum Nova

• avalanche：Avalanche

• optimism：Optimism

• solana：Solana

• base：Base

• blast：Blast

• zora：Zora

📔 注意：图像大小必须不超过 6 MB。如果图像更大，将不会在场景中渲染。

自定义相框

默认情况下，图像会有紫色背景，并带有一个周围带有脉动发光纹理的相框。你可以设置以下属性，使其更符合 NFT 和场景的风格：

• 颜色：决定模型背面，也会在 NFT 图像具有透明度时决定图像背景。

• 样式：从一个包含若干预设选项的枚举中选择相框模型。请使用枚举中的值 NftFrameType，其中包含所有可用样式的列表。

NftShape.create(nftEntity, {
  urn: 'urn:decentraland:ethereum:erc721:0x06012c8cf97bead5deae237070f9587f8e7a266d:558536',
  color: Color3.Green(),
  style: NftFrameType.NFT_GOLD_EDGES,
})

以下是受支持的相框样式完整列表：

• NFT_CLASSIC

• NFT_BAROQUE_ORNAMENT

• NFT_DIAMOND_ORNAMENT

• NFT_MINIMAL_WIDE

• NFT_MINIMAL_GREY

• NFT_BLOCKY

• NFT_GOLD_EDGES

• NFT_GOLD_CARVED

• NFT_GOLD_WIDE

• NFT_GOLD_ROUNDED

• NFT_METAL_MEDIUM

• NFT_METAL_WIDE

• NFT_METAL_SLIM

• NFT_METAL_ROUNDED

• NFT_PINS

• NFT_MINIMAL_BLACK

• NFT_MINIMAL_WHITE

• NFT_TAPE

• NFT_WOOD_SLIM

• NFT_WOOD_WIDE

• NFT_WOOD_TWIGS

• NFT_CANVAS

• NFT_NONE

某些相框比其他相框使用更多材质。例如，默认相框会为 NFT 本身添加 1 个材质、为背景色平面添加 1 个材质，以及为相框添加 2 个材质（与同样式的其他相框共享）。如果你需要减少材质以 保持在场景限制内，请选择更简单的样式。例如，“none” 只会为 NFT 本身使用 1 个材质。

💡 提示：使用 Visual Studio Code（或其他 IDE），输入以下内容即可查看完整列表 NftFrameType. 并等待智能建议显示选项列表。使用 NftFrameType.NFT_NONE即可原样显示普通 NFT，不带相框或背景色。

打开 NFT 界面

打开一个预构建的界面，其中显示 NFT 的名称、所有者和描述。如果适用，还会显示 NFT 的当前价格和上次成交价格，并提供一个链接到 OpenSea 上该 NFT 页面按钮，在那里可以查看更多信息并进行购买。

通过调用函数打开此界面 openNftDialog()。此函数需要一个对象作为参数，其中包含一个单独的 urn 字段。此字段接受一个应遵循以下结构的字符串：

urn:decentraland:<CHAIN>:<CONTRACT_STANDARD>:<CONTRACT_ADDRESS>:<TOKEN_ID>

例如：

urn:decentraland:ethereum:erc721:0x00...000:123

📔 注意：必须通过按钮事件来打开此界面，以防止滥用刷屏。按钮事件不一定需要发生在同一个相框上，也不一定需要在一个 NftShape.

若要通过点击操作打开此界面，请添加以下内容：

import { openNftDialog } from '~system/RestrictedActions'

// 添加指针碰撞器，以便可以点击
// 添加 onPointerDown 回调事件。

openNftDialog({
pointerEventsSystem.onPointerDown(
	{
		entity: myEntity,
		opts: { button: InputAction.IA_PRIMARY, hoverText: '点击' },
	},
	function () {
		urn: 'urn:decentraland:ethereum:erc721:0x06012c8cf97BEaD5deAe237070F9587f8E7A266d:558536',
			urn: 'urn:decentraland:ethereum:erc721:0x06012c8cf97BEaD5deAe237070F9587f8E7A266d:558536',
		})
	}
)