# 内容编辑器

使用地址：<https://cloud.kivicube.com/content-editor/index.html>

内容编辑器目前支持 **模型和图片**素材，后续将支持 **AR 视频**、**透明视频**、**音频**、**粒子特效** 等素材。

&#x20;视频教程：<https://www.bilibili.com/video/BV1vu4y167wR>

## 概述

### 当前内容编辑器有什么作用？

* 支持将 FBX、OBJ 转为 Kivicube 支持的 GLB 格式
* 支持后处理效果：色调映射
* 支持可视化地调整模型材质
* 支持可视化地调整灯光渲染
* 可视化预览模型动画
* 查看模型属性，方便校验是否符合规范
* 模型规范检查，确保上传到 Kivicube 平台后可高性能渲染
* 更多模型设置，便于可视化展示

#### 使用内容编辑器前准备工作 <a href="#shi-yong-nei-rong-bian-ji-qi-qian-zhun-bei-gong-zuo" id="shi-yong-nei-rong-bian-ji-qi-qian-zhun-bei-gong-zuo"></a>

**注册并登录 Kivicube 账号**

打开内容编辑器后，程序会自动跳转到登录页面。

**常见问题**

|       |                                                                |
| ----- | -------------------------------------------------------------- |
| **A** | 导入到内容编辑器的模型效果与建模软件中不一致                                         |
| **Q** | 这是正常现象。内容编辑器与建模软件渲染器不同、灯光环境不同，需要在内容编辑器中 **设置材质** 与 **设置灯光环境**。 |
| **A** | 导入到内容编辑器的模型丢失了贴图                                               |
| **Q** | 转换过程中可能丢贴图，在内容编辑器中为对应材质 **重新指定贴图** 即可。                         |
| **A** | 模型导入失败                                                         |
| **Q** |                                                                |
|       |                                                                |

#### 强制性模型规范

不满足以下规范的模型 **不能** 导入内容编辑器。

**不支持的 glTF 扩展**

目前 Kivicube 暂时 **仅支持**：

* [KHR\_materials\_unlit](https://github.com/KhronosGroup/glTF/blob/main/extensions/2.0/Khronos/KHR_materials_unlit/README.md)
* [KHR\_texture\_transform](https://github.com/KhronosGroup/glTF/blob/main/extensions/2.0/Khronos/KHR_texture_transform/README.md)
* [KHR\_materials\_pbrSpecularGlossiness](https://github.com/KhronosGroup/glTF/blob/main/extensions/2.0/Archived/KHR_materials_pbrSpecularGlossiness/README.md)\
  （导入内容编辑器后会转换为标准工作流，可重新设置材质）

**如何处理不支持的 glTF 扩展？**

* 若从 **FBX 导入**，一般不会出现此问题。
* 问题多出现在直接从建模软件导出 GLB 或第三方 GLB。请导出时 **不要包含不支持的扩展**。

**贴图尺寸超限 / 贴图格式不支持**

* 仅支持 **JPG / JPEG / PNG**（透明贴图请用 **PNG**）
* 贴图尺寸 **不得超过 2048**。强烈建议使用 **2 的幂次方**的 **正方形**（2×2、4×4、8×8、…、2048×2048）

{% hint style="info" %}
可用 Photoshop 或 [XnView](https://www.xnview.com/en/xnviewmp/#downloads) 将 gif/tga/dds/psd/tif/bmp/exr/hdr 等格式导出为 jpg/jpeg/png。
{% endhint %}

**模型数据命名错误**

* **总的根骨骼不能带动画**。若根骨有动画，请为其再绑定一个 **空骨骼** 做父级。

![](https://images.gitbook.com/__img/dpr=2,width=760,onerror=redirect,format=auto,signature=1785429986/https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2023%2Fpng%2F217517%2F1678972739400-acc91889-5a72-4d10-a9e1-00faa636cdd4.png)![](https://images.gitbook.com/__img/dpr=2,width=760,onerror=redirect,format=auto,signature=-1841153478/https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2023%2Fpng%2F217517%2F1678972747223-6f0be16e-75f7-448a-9f43-67424089eff0.png)

**模型规范**

|          |                              |
| -------- | ---------------------------- |
| **网格数**  | 严重：≥10（网格数太多）；较严重：5–10；合规：≤5 |
| **三角形数** | 严重：≥6W；较严重：3–6W；合规：≤3W       |
| **顶点数**  | 严重：≥6W；较严重：3–6W；合规：≤3W       |
| **材质数**  | 严重：≥10；较严重：5–10；合规：≤5        |
| **纹理数**  | 严重：≥10；较严重：5–10；合规：≤5        |
| **动画数**  | 严重：≥10；较严重：5–10；合规：≤5        |
| **骨骼数**  | 严重：≥120；较严重：60–120；合规：≤60    |
| **变形数**  | 严重：≥30；较严重：10–30；合规：≤10      |

<br>

## 详细使用

#### 直接导入

* 支持 **FBX / OBJ / GLB** 直接导入
* **GLTF** 需将 `.gltf`、`.bin` 与贴图一起打包为 **zip** 导入
* ![](https://cdn.nlark.com/yuque/0/2023/png/217517/1701616979399-2ef1c5ec-d619-4f66-8111-b682efb88554.png)

#### 从 Sketchfab 导入

**注册并登录 Sketchfab**

* 点击登录\
  ![](https://cdn.nlark.com/yuque/0/2023/png/217517/1701617226390-b3c281e1-b893-4e8d-9d5c-c18f9935cc49.png)
* 注册并登录\
  ![](https://cdn.nlark.com/yuque/0/2023/png/217517/1701617272216-3f68e526-f196-45bf-b4f6-fc0510c471f1.png)
* 接受 Kivicube 的授权请求\
  ![](https://cdn.nlark.com/yuque/0/2023/png/217517/1701617316371-bd37b31b-66c0-4342-9aa4-4eb55983d25e.png)

**注意事项**

* **取消勾选「精选」**，以获取更多素材\
  ![](https://cdn.nlark.com/yuque/0/2023/png/217517/1701617428509-35cecef8-710c-4544-9814-4762095e72e5.png)
* **注意素材许可协议**\
  ![](https://cdn.nlark.com/yuque/0/2023/png/217517/1701617560129-e655e5d9-c041-47a4-af71-f038159d2f4f.png)
* **Sketchfab 预览与内容编辑器显示不同**\
  可通过 **灯光环境 / 渲染 / 材质** 调整到满意效果。\
  ![](https://cdn.nlark.com/yuque/0/2023/png/217517/1701617915386-10db1af0-a58d-4807-bc4b-6d5ac8347240.png) ![](https://cdn.nlark.com/yuque/0/2023/png/217517/1701618033130-9adb2dcc-b817-496a-8d50-63955a80266d.png)

#### 模型保存 <a href="#mo-xing-bao-cun" id="mo-xing-bao-cun"></a>

* 点击 **保存** 按钮，将模型保存到素材库。 ​

**注意事项**

| 模型材质   | 保存时会保存模型的材质到模型本身，即保存到素材库的模型也是设置的新材质 ​ |
| ------ | ------------------------------------- |
| 灯光     | 灯光仅仅作为预览调整，需要您在场景编辑器重新调整 ​            |
| 渲染     | 渲染仅仅作为预览调整，需要您在场景编辑器重新调整 ​            |
| 模型显示设置 | 模型仅仅作为预览调整，需要您在场景编辑器重新调整              |

* 模型线框：仅做预览不会保存，场景编辑器中暂不能线框预览
* 模型包围盒：仅做预览不会保存，在场景编辑器中当选中一个对象时，会显示此对象的包围盒
* 模型骨骼：仅做预览不会保存，场景编辑器中暂不能线框预览
* 模型方向轴：仅做预览不会保存，您可以使用场景编辑器中的模型方向轴进行模型的位置调整
* 地面网格：仅做预览不会保存，结合地面网格，您可以方便查看模型是否在中心点与模型的位置、大小、方向
* 背景显示：仅做预览不会保存，通过背景显示方便预览模型
* 视场角：仅做预览不会保存，您可以使用场景编辑器进行视场角调整\
  ![](https://cdn.nlark.com/yuque/0/2023/png/217517/1701619811950-ba24a4f0-6218-4d25-8a6f-6f3994590b68.png)

点击保存后，显示设置中的设置，均不会保存，您需要到场景编辑器重新设置

#### 显示设置

* 请务必通过模型属性检查是否满足规范。\
  ![](https://cdn.nlark.com/yuque/0/2023/png/217517/1701619253135-08d1e155-59de-47ec-986f-38d45d2c517a.png)
* **文件**：定位当前模型由哪款软件导出
* **尺寸**：长边超过 200m 的模型导入会被缩小到 100m
* **glTF 扩展**：目前仅支持 KHR\_materials\_unlit / KHR\_texture\_transform / KHR\_materials\_pbrSpecularGlossiness。若 **必选扩展** 出现其他项，可能加载失败或表现不正确。\
  ![](https://cdn.nlark.com/yuque/0/2023/png/217517/1701619369575-606ba379-03fb-49f1-8530-26e9957e61e0.png)

#### 模型属性

### 模型预览

#### 模型属性

* 请务必通过模型属性检查是否满足规范。\
  ![](https://cdn.nlark.com/yuque/0/2023/png/217517/1701619253135-08d1e155-59de-47ec-986f-38d45d2c517a.png)
* **文件**：定位当前模型由哪款软件导出
* **尺寸**：长边超过 200m 的模型导入会被缩小到 100m
* **glTF 扩展**：目前仅支持 KHR\_materials\_unlit / KHR\_texture\_transform / KHR\_materials\_pbrSpecularGlossiness。若 **必选扩展** 出现其他项，可能加载失败或表现不正确。

#### 显示设置

点击保存后，显示设置中的设置，均不会保存，您需要到场景编辑器重新设置

* 模型线框：仅做预览不会保存，场景编辑器中暂不能线框预览
* 模型包围盒：仅做预览不会保存，在场景编辑器中当选中一个对象时，会显示此对象的包围盒
* 模型骨骼：仅做预览不会保存，场景编辑器中暂不能线框预览
* 模型方向轴：仅做预览不会保存，您可以使用场景编辑器中的模型方向轴进行模型的位置调整
* 地面网格：仅做预览不会保存，结合地面网格，您可以方便查看模型是否在中心点与模型的位置、大小、方向
* 背景显示：仅做预览不会保存，通过背景显示方便预览模型
* 视场角：仅做预览不会保存，您可以使用场景编辑器进行视场角调整

***

### 材质

#### 选择材质

* 一个模型可能有多个材质，请务必设置好每个材质
* 导入进模型编辑器后，经常会遇到材质贴图丢失，只需要选择相应的材质重新赋予贴图即可

<figure><img src="/files/6T7QuDxyfh16dN2kg0gD" alt=""><figcaption></figcaption></figure>

#### 材质设置

**材质类型**

* **金属/粗糙度**：受光照影响，PBR 标准工作流
* **无光照**：即不受光照的材质类型，此种材质类型性能高，仅需一张基础颜色贴图

<figure><img src="/files/uLrbEjLdmFqoBTy9VzRE" alt=""><figcaption></figcaption></figure>

**透明度**

<table><thead><tr><th width="238.84765625">类型</th><th>说明</th></tr></thead><tbody><tr><td><strong>不透明</strong><img src="/files/dMCL2Rbd3vPqSxZUAgPr" alt=""></td><td><ul><li>如果需要某个材质不透明，<strong>透明度</strong>请设置为<strong>不透明</strong></li></ul></td></tr><tr><td><strong>透明 / 半透明（BLEND）</strong><img src="/files/WljOYBs438McjW4G020N" alt=""></td><td><ul><li>如果某个材质含有<strong>半透明</strong>，请设置为<strong>透明BLEND</strong></li></ul></td></tr><tr><td><strong>透明 MASK</strong><img src="/files/Poxqpd4qvx0RledfYHqe" alt=""></td><td><ul><li>如果某个材质含有透明，但是没有半透明，如树叶等，请设置为<strong>Mask</strong></li><li><strong>当贴图的透明度大于等于Alpha Cutoff，则会显示为不透明，如果小于Alpha Cutoff则会显示完全透明</strong></li></ul><div><figure><img src="/files/lXSSu7NMFeoBg6pWHApE" alt=""><figcaption></figcaption></figure><figure><img src="/files/33R9VELqikeG4gz7YbF8" alt=""><figcaption></figcaption></figure></div></td></tr></tbody></table>

**显示**

* 开启双面显示显示会带来更多的性能消耗，若非必要，请勿开启

<figure><img src="/files/wcfDAlwDLDJVYd4GzsXV" alt=""><figcaption></figcaption></figure>

**材质属性设置**

<table><thead><tr><th width="138.85546875">属性</th><th width="230.02734375">示意</th><th>描述</th></tr></thead><tbody><tr><td><strong>基础颜色</strong></td><td><div><figure><img src="/files/TqPeP5tLupD0EstBG4FJ" alt=""><figcaption></figcaption></figure></div><p></p></td><td><div><figure><img src="/files/QspBb7dWHzWTNB3LvB6R" alt=""><figcaption></figcaption></figure></div><p>为模型添加一个颜色贴图或者直接设置颜色<br></p></td></tr><tr><td><strong>粗糙度 / 金属度</strong></td><td><div><figure><img src="/files/IIwJLdQXDCGGI94WEaLj" alt=""><figcaption></figcaption></figure></div></td><td><p><strong>粗糙度，顾名思义，调整模型粗糙与光滑的值</strong><br><img src="/files/utpda5nDFUxE9gO6UVIF" alt=""><br></p><ul><li>粗糙度越小，越光滑，粗糙度越大，越粗糙</li><li>粗糙度贴图主要控制模型中各个位置的不同粗糙度，达到有些地方光滑，有些地方粗糙的感觉</li></ul><p></p><p><strong>金属度/金属光泽，顾名思义，调整模型的金属质感</strong></p><div><figure><img src="/files/sAxXYQqYCGTdMukPJ7Ag" alt=""><figcaption></figcaption></figure></div><ul><li>金属度越大，越像金属</li><li>金属度贴图主要控制模型中各个位置的不同金属度，达到有些地方偏金属，有些地方偏非金属</li></ul></td></tr><tr><td><strong>环境遮蔽（AO）</strong></td><td><div><figure><img src="/files/lvUEe0CkHpwxDnSBL37K" alt=""><figcaption></figcaption></figure></div><p></p></td><td><p>环境遮蔽，即AO贴图，为模型增加阴影细节</p><p><br>有时候为了节省贴图，也将阴影质感直接放到了基础颜色上，从PBR渲染层面，理论上不应该这样做，但是实际可以酌情处理</p></td></tr><tr><td><strong>自发光</strong></td><td><p></p><div><figure><img src="/files/mMotjsnX72aGZL6hS8Zn" alt=""><figcaption></figcaption></figure></div></td><td>为模型添加一个自发光贴图或者直接设置发光颜色</td></tr><tr><td><strong>法线</strong></td><td><p></p><div><figure><img src="/files/wa19poh1aO25hemEixv9" alt=""><figcaption></figcaption></figure></div></td><td>法线贴图用于增加模型细节的贴图</td></tr></tbody></table>

***

#### 材质贴图

**贴图格式**

> 仅支持 **jpg / jpeg / png**；透明贴图请用 **png**。

| 原格式                                           | 转换方法                                |
| --------------------------------------------- | ----------------------------------- |
| gif / tga / dds / psd / tif / bmp / exr / hdr | 使用 Photoshop 或 XnView 导出为 png 或 jpg |

* XnView 下载：<https://www.xnview.com/en/xnviewmp/#downloads>
* 使用：**文件 → 打开** 原图 → **文件 → 导出/另存为** → 选择 **png/jpg**

**贴图尺寸与压缩**

* Kivicube平台的模型的贴图尺寸不能超过2048，并且我们强烈建议贴图尺寸为2的幂次方的正方形贴图（包括2*2、4*4、8*8、16*16、32*16、64*64、128*128、256*256、512*512、1024*1024、2048\*2048）
* 设置合适的尺寸大小：在保证模型效果的情况下，贴图的尺寸越小越好；特殊情况为了保证效果，可以将颜色贴图设置大一些，其余贴图尺寸设置小一些
* 所有贴图都是用工具（[图压、](https://tuya.xinxiao.tech/)[ImageOptim](https://imageoptim.com)）进行压缩，建议默认设置90%的质量，如果质量尚可，还可尝试减少质量到80%，不建议低于80%
* 法线贴图一般为png贴图，压缩后可能依然很大，可以尝试转换为jpg格式压缩。注意：jpg格式的法线贴图很容易丢失质量，请设置合适的压缩质量
* 使用内容编辑器的 **优化模型** 功能

<figure><img src="/files/Dr9EsoI4VpR3GzO4RcUk" alt=""><figcaption></figcaption></figure>

## FAQ

<table data-header-hidden><thead><tr><th width="68.1875" align="center"></th><th></th></tr></thead><tbody><tr><td align="center"><strong>Q</strong></td><td><strong>包围盒无法贴合模型</strong></td></tr><tr><td align="center"><strong>A</strong></td><td><p>症状：将模型导入内容编辑器后，模型与包围盒位置不同</p><ol><li>包围盒调整问题，建议在建模软件中调整包围盒</li><li>如果仅上传平台使用的话，可以使用我们的模型压缩功能进行调整</li></ol></td></tr></tbody></table>

<table data-header-hidden><thead><tr><th width="66.6953125" align="center"></th><th></th></tr></thead><tbody><tr><td align="center"><strong>Q</strong></td><td><strong>内容编辑器弹窗提醒 “imageLoader onimageError ”</strong></td></tr><tr><td align="center"><strong>A</strong></td><td>参考「贴图尺寸超限 / 贴图格式不支持」。<strong>贴图尺寸过大，请压缩。</strong></td></tr></tbody></table>


---

# Agent Instructions: 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:

```
GET https://docs-en.kivicube.com/manual/content-editor.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.