> For the complete documentation index, see [llms.txt](https://docs.decentraland.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.decentraland.org/creator/content-creator-zh/chang-jing-sdk7/mei-ti/display-a-certified-nft.md).

# 显示已认证的 NFT

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

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

NFT 的图像和其他数据会根据代币的合约和 id，从 API 中获取。任何在 [OpenSea](https://opensea.io/) 也可以在 Decentraland 的 NFT 相框中显示。

{% hint style="info" %}
**💡 提示**：在 [Creator Hub 中的场景编辑器](/creator/content-creator-zh/chang-jing-bian-ji-qi/kai-shi-shi-yong/about-editor.md)，你可以使用一个 **NFT** [智能物品](/creator/content-creator-zh/chang-jing-bian-ji-qi/jiao-hu-xing/smart-items.md) 以无代码方式实现此功能。
{% endhint %}

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

{% hint style="info" %}
**💡 提示**：如果你想拉伸或调整默认生成的图像大小，可以更改 `缩放` 实体中的属性 `Transform` 组件。
{% endhint %}

## 添加 NFT

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

```ts
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](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

{% hint style="warning" %}
**📔 注意**：图像大小必须不超过 **6 MB**。如果图像更大，将不会在场景中渲染。
{% endhint %}

## 自定义相框

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

* `颜色`：决定模型背面，也会在 NFT 图像具有透明度时决定图像背景。
* `样式`：从一个包含若干预设选项的枚举中选择相框模型。请使用枚举中的值 `NftFrameType`，其中包含所有可用样式的列表。

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

![
](https://2460066822-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-e59260ef83a294f59a11a2427a6cb81f8a9a6e6e%2Fnft-frames.png?alt=media)

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

* `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 个材质（与同样式的其他相框共享）。如果你需要减少材质以 [保持在场景限制内](/creator/content-creator-zh/chang-jing-sdk7/you-hua/scene-limitations.md)，请选择更简单的样式。例如，“none” 只会为 NFT 本身使用 1 个材质。

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

## 打开 NFT 界面

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

![
](https://2460066822-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-aa9f7b7fbcba689e0039abe1aed3936c64c44f98%2Fnft-ui.png?alt=media)

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

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

例如：

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

{% hint style="warning" %}
**📔 注意**：必须通过按钮事件来打开此界面，以防止滥用刷屏。按钮事件不一定需要发生在同一个相框上，也不一定需要在一个 `NftShape`.
{% endhint %}

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

```ts
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',
		})
	}
)
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.decentraland.org/creator/content-creator-zh/chang-jing-sdk7/mei-ti/display-a-certified-nft.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.