> 这不是一次“让 AI 写点 Three.js 代码”的尝试，而是一次更接近工程化的探索：把自然语言、参考图片、双引擎兼容、平台资源注册、可视化配置和调试迭代，收敛成一个可复用的 **DATASPACE3D 对象生成 Skill**。
> 本文使用的 `dav-object-loader` skill 资源下载地址：
> [https://cdn.dataspace3d.com/system/dav-object-loader.zip](https://cdn.dataspace3d.com/system/dav-object-loader.zip)

---

## 01. 为什么这个实验值得做？

在 Web3D 领域，很多“生成一个 3D 对象”的需求并不止于生成模型本身。真实的平台使用链路通常更长：

- 它要能进入资源系统，成为一个可复用的对象资源。
- 它要能在场景编辑器中被添加、选中、移动、缩放、旋转。
- 它要暴露可配置参数，让非开发用户也能调整颜色、尺寸、姿态。
- 它要兼容不同渲染引擎，比如 Three.js 与 Babylon.js。
- 它最好能带一份可执行的接入说明，而不是只给一段孤立代码。

这正是 `dav-object-loader` skill 要解决的问题：  
**把自然语言描述转成 DATASPACE3D 可直接使用的对象 Loader 资源包。**

这次探索的目标很具体：根据几张卡通鸟参考图，生成一个“卡通白鸽”对象 Loader，并在 DATASPACE3D 场景编辑器中真实跑起来。

---

## 02. 输入：从三张参考图开始

最初的输入很简单：用户提供了三张参考图片，希望生成类似图中的卡通小鸟对象，并要求资源输出到 `resource` 目录。

> 用户输入：
>
> 使用 dev-object-loader skill 创建如图所示的对象，相关资源存储到 @resource

参考图的特征非常明确：

- 米白色圆润身体
- 粉色鸟喙与腮红
- 大而黑亮的眼睛
- 两侧高高展开的翅膀
- 背部扇形尾羽
- 深棕色脚爪
- 整体风格偏可爱、软萌、卡通化

![参考图：正面展开翅膀](https://developer.qcloudimg.com/http-save/yehe-12587840/3b783e4395ddfeee257f5df06eb6eee1.png)

*图 1 · 目标效果正面：重点是展开的大翅膀、圆润头身比例、粉色喙和高光眼睛*

![参考图：侧面飞行姿态](https://developer.qcloudimg.com/http-save/yehe-12587840/c8f92543059baca060a332141d40b9ab.png)

*图 2 · 目标效果侧面：身体不是单纯球体，翅膀从肩部向外伸展，尾羽向后下方展开*

![参考图：背面尾羽和翅膀](https://developer.qcloudimg.com/http-save/yehe-12587840/5d58ce1d97d95e61369ff77ea26d8f1b.png)

*图 3 · 目标效果背面：左右翅膀是视觉主体，尾羽呈扇形展开*

---

## 03. Skill 的产出不是“代码片段”，而是一组平台资源

`dav-object-loader` skill 的目标产出非常清晰：生成两个文件。

| 文件 | 作用 |
|------|------|
| `birdLoader.js` | 可上传 CDN 的双引擎对象 Loader 脚本 |
| `birdLoader.md` | Loader 信息、对象默认配置、`uiGroups`、平台接入步骤 |

这点很重要。  
如果只生成一段 Three.js 代码，它只是一个 demo；但在 DATASPACE3D 里，对象需要进入平台资源体系，至少要回答以下问题：

| 平台问题 | Loader 产物中的对应内容 |
|----------|-------------------------|
| 资源加载器叫什么？ | `loaderId: birdLoader` |
| 支持哪些引擎？ | `threejs`, `babylonjs` |
| 对象资源怎么注册？ | `resourceId: cuteBird`, `type: mesh` |
| 默认配置是什么？ | `config` JSON |
| 右侧属性面板显示哪些配置？ | `uiGroups` JSON |
| 修改配置时对象如何更新？ | `getEvent().on('config.xxx')` 监听 |
| 平台如何接入？ | `.md` 中的四步使用说明 |

最终生成的资源位于：

```text
resource/
├── birdLoader.js
└── birdLoader.md
```

---

## 04. 第一次生成：能跑，但还不像

第一次生成的 `birdLoader.js` 使用程序化几何体拼装小鸟：身体、头、眼睛、喙、腮红、翅膀、尾羽和脚都由基础几何体组合出来。

核心配置大致如下：

```json
{
  "position": [0, 0, 0],
  "rotation": [0, 0, 0, "XYZ"],
  "scale": [1, 1, 1],
  "visible": true,
  "size": 1,
  "bodyColor": "#F0E6D8",
  "beakColor": "#FF6B9D",
  "blushColor": "#FFB6C8",
  "feetColor": "#6B4226",
  "wingAngle": 42
}
```

它确实被创建出来了，也能进入场景编辑器，但真实效果暴露了典型的生成式 3D 问题：  
**语义对了，比例不对。**

![第一次生成结果：背面](https://developer.qcloudimg.com/http-save/yehe-12587840/473eb46c7100f409e3c7b8f77c6f8ef2.png)

*图 4 · 第一次生成结果背面：身体过大，翅膀像贴在背上的小羽片*

![第一次生成结果：正面](https://developer.qcloudimg.com/http-save/yehe-12587840/27098011332793031e3bfac3169fbb99.png)

*图 5 · 第一次生成结果正面：脚和身体有分离感，整体更像“龙猫”而不是展开翅膀的小鸟*

随后用户给出了非常关键的反馈：

> 用户反馈：
>
> 实际创建出来长这样，翅膀太小了、脚和身体分离了、有点像龙猫；其他细节看下是否能尽量还原

这段反馈很有价值，因为它不是泛泛地说“不像”，而是指出了三个可操作的问题：

1. **翅膀太小**：视觉主体没有成立。
2. **脚和身体分离**：局部锚点不对。
3. **像龙猫**：身体比例过圆、过高，鸟类特征被弱化。

---

## 05. 第二轮调整：从“生成几何”进入“形体调参”

第二轮不再是重新生成，而是基于实际效果做针对性调参。

调整方向如下：

| 问题 | 调整策略 |
|------|----------|
| 身体像龙猫 | 缩短身体高度，减小身体半径，让头身比例更接近小鸟 |
| 翅膀太小 | 增大羽片尺寸，增加羽片数量，让翅膀从肩部向两侧外展 |
| 翅膀像背鳍 | 调整翅膀局部坐标、旋转角度和 Z 轴偏移，让它从身体两侧展开 |
| 脚和身体分离 | 上移脚部锚点，加长腿部连接，缩短视觉间隙 |
| 尾羽存在感不足 | 尾羽下移并放大成扇形，更接近参考图背面 |
| 脸部细节弱 | 微调眼睛、腮红、喙的位置和尺寸 |

第二轮还保留了调试日志，方便在浏览器控制台过滤 `[birdLoader]` 查看执行链路：

```javascript
const LOG_PREFIX = '[birdLoader]';
const log = (...args) => console.log(LOG_PREFIX, ...args);
const warn = (...args) => console.warn(LOG_PREFIX, ...args);
```

日志覆盖了几个关键节点：

- 脚本是否成功注册 Loader
- Loader 是否被平台调用
- 当前使用的是 `threejs` 还是 `babylonjs`
- `config` 入参是什么
- 构建和重建的触发原因
- `getEvent().on('config.xxx')` 是否正常绑定
- 创建失败时对象为何为空

这让对象生成从“猜测效果”变成了“可观察、可定位、可迭代”的过程。

---

## 06. 技术原理：DATASPACE3D 对象 Loader 是怎么跑起来的？

从平台视角看，一个自定义对象 Loader 的运行链路可以拆成六步：

```text
CDN 脚本
  → registerDavLoader 注册
  → 资源加载器绑定 loaderId
  → 对象资源引用 loaderId + config + uiGroups
  → 场景编辑器添加对象
  → Loader 返回 { target, type }
  → 平台注入事件、变换、配置面板与蓝图能力
```

### 6.1 `registerDavLoader`：把外部脚本接入平台

`birdLoader.js` 的入口是 `window.registerDavLoader`：

```javascript
window.registerDavLoader({
  id: 'birdLoader',
  loader: async ({ davScene, data }) => {
    // 根据当前引擎创建对象
    return { target, type: 'mesh' };
  },
});
```

这里的 `id` 必须与平台中注册的资源加载器标识一致。  
DATASPACE3D 通过这个 `loaderId` 找到脚本，再把对象资源的 `config` 传入 Loader。

### 6.2 双引擎分支：同一份配置，不同的底层实现

DATASPACE3D 支持 Three.js 与 Babylon.js，因此 Loader 内部需要根据当前引擎执行不同分支：

```javascript
const davCanvas3d = davScene?.getCanvas3D?.();
const davEngine = davCanvas3d?.davEngine;

const actions = {
  threejs: () => {
    // 使用 globalThis.THREE 创建 Group / Mesh / Material
  },
  babylonjs: () => {
    // 使用 globalThis.BABYLON 创建 TransformNode / Mesh / Material
  },
};

const target = actions[davEngine?.engine]?.();
```

这也是 Skill 的核心价值之一：  
开发者不只拿到一份 Three.js demo，而是拿到一份能在平台多引擎环境中运行的对象 Loader。

### 6.3 Group / TransformNode：复杂对象需要“根节点”

卡通白鸽不是一个单独 Mesh，而是由多个子对象组成：

- 身体
- 头
- 眼睛和高光
- 喙
- 腮红
- 左右翅膀
- 尾羽
- 脚和爪子

因此 Loader 返回的不是某一个羽片，而是一个根容器：

| 引擎 | 根容器 |
|------|--------|
| Three.js | `THREE.Group` |
| Babylon.js | `BABYLON.TransformNode` |

平台拿到根节点后，才能把整体对象作为一个资源实例进行移动、旋转、缩放和配置。

### 6.4 `config` + `uiGroups`：让生成物变成可配置资源

生成对象只是第一步。真正适合平台使用的资源，必须能被配置。

`config` 定义默认值：

```json
{
  "size": 1,
  "bodyColor": "#F0E6D8",
  "beakColor": "#FF6B9D",
  "blushColor": "#FFB6C8",
  "feetColor": "#6B4226",
  "wingAngle": 42
}
```

`uiGroups` 决定右侧配置面板如何显示：

```json
[
  {
    "title": "外观",
    "configs": [
      { "name": "config.size", "type": "inputNumber", "label": "整体尺寸" },
      { "name": "config.bodyColor", "type": "colorPicker", "label": "身体颜色" },
      { "name": "config.wingAngle", "type": "inputNumber", "label": "翅膀角度" }
    ]
  }
]
```

这样，用户不需要改代码，也能在场景编辑器里调整对象。

### 6.5 配置实时更新：`getEvent().on('config.xxx')`

当用户在配置面板修改颜色、尺寸或翅膀角度时，平台会触发对应事件：

```javascript
group?.getEvent?.()?.on('config.wingAngle', (value) => {
  const { config: current = {} } = group.getMetadata?.()?.data || {};
  rebuild({ ...current, wingAngle: value });
});
```

对于这种由很多子 Mesh 组成的程序化对象，最稳妥的方式通常是：

1. 读取最新完整配置。
2. 合并本次修改的字段。
3. 释放旧对象的 geometry / material。
4. 按新配置重建子节点。

这也是为什么调试日志非常重要：它能告诉我们是 Loader 没被调用、引擎分支没进入、事件没绑定，还是重建逻辑本身有问题。

---

## 07. 使用过程：从 Skill 到平台落地

如果你想复现类似流程，可以按下面路径走。

### 第一步：下载 Skill

下载 `dav-object-loader` skill：

[https://cdn.dataspace3d.com/system/dav-object-loader.zip](https://cdn.dataspace3d.com/system/dav-object-loader.zip)

解压后放入 Cursor / Agent 可识别的 skill 目录，或按你的 Agent 工具链要求注册。

### 第二步：准备输入

输入可以很自然：

> 根据这几张参考图，生成一个卡通白鸽对象 Loader，要求支持 Three.js 和 Babylon.js，输出到 `resource` 目录。

更好的输入会包含：

- 对象名称
- 参考图
- 风格描述
- 可配置字段
- 输出目录
- 是否需要双引擎
- 是否要生成平台配置说明

### 第三步：生成 Loader 资源

Skill 会生成：

```text
resource/
├── birdLoader.js
└── birdLoader.md
```

其中 `.md` 文件会包含：

- 加载器信息
- 对象资源信息
- 默认 `config`
- 自定义 `uiGroups`
- 实时更新字段
- 平台四步接入说明

### 第四步：上传并注册

在 DATASPACE3D 平台中：

1. 进入 **CDN 文件**，上传 `birdLoader.js`。
2. 进入 **资源加载器**，注册 `birdLoader`。
3. 进入 **对象资源**，创建 `cuteBird` 对象资源。
4. 粘贴 `.md` 中的 `config` 与 `uiGroups`。
5. 进入 **项目搭建 → 场景编辑**，添加该对象并调参。

### 第五步：根据真实效果迭代

这一步非常关键。  
生成式 3D 对象的第一版通常能表达“是什么”，但未必马上表达“像不像”。

本次实践中，第一版已经能在场景中创建小鸟，但暴露出：

- 翅膀不够大
- 脚部锚点不自然
- 身体太像圆滚滚的动物
- 细节比例不够接近参考图

于是第二轮重点围绕“形体比例”迭代，而不是重写整个 Loader。

---

## 08. 这类 Skill 的想象空间

`dav-object-loader` 的价值不止于生成一个卡通白鸽。它更像是一个入口，把“模型生成”从单点能力扩展成“平台资源生成”。

### 8.1 从描述到可复用对象资产

未来可以生成：

- 科普教学中的细胞、行星、机械结构
- 数字孪生里的设备、管道、传感器、告警标识
- 产品展示中的包装盒、展台、装饰物
- 游戏化场景中的角色、道具、徽章、粒子装饰
- 企业大屏中的 3D 图标、数据节点、动态组件

这些对象不只是几何体，而是带有：

- 默认参数
- 可视化配置面板
- 事件监听
- 双引擎兼容
- 平台注册说明

的完整资源。

### 8.2 从“写代码”变成“协同设计”

这次实践也说明，模型生成不是一次性完成，而是一个协同过程：

```text
参考图
  → 第一版生成
  → 平台真实预览
  → 用户反馈“哪里不像”
  → 定位比例和锚点问题
  → 第二轮重建
```

用户不需要说“把第 164 行的 SphereGeometry 半径改成 0.13”，只要说：

> 翅膀太小了，脚和身体分离了，有点像龙猫。

Agent 就可以把自然语言反馈映射成几何参数调整：

- 放大羽片
- 外展翅膀
- 缩短身体
- 上移脚部
- 调整尾羽

这正是可视化开发中非常自然的协作方式。

### 8.3 从对象生成走向场景生成

当对象 Loader 可以被稳定生成后，下一步就很自然：

- 生成一组对象资源
- 自动创建材质资源
- 自动创建 GUI 资源
- 自动编排场景层级
- 自动配置相机、灯光、天空、动画
- 自动生成蓝图交互
- 自动发布一个完整可运行场景

换句话说，对象生成只是第一块积木。  
真正有想象力的是：**从一句业务描述生成完整 DATASPACE3D 场景。**

---

## 09. 初步结论

这次卡通白鸽实践给出的结论很直接：

1. **Skill 适合封装平台工程规范**  
   它能把 Loader ID、资源类型、双引擎分支、`config`、`uiGroups`、使用说明这些容易遗漏的工程细节固化下来。

2. **生成式 3D 需要真实预览反馈**  
   第一版能跑不代表像。比例、锚点、视觉主体、局部层次，都需要在真实场景中看。

3. **DATASPACE3D 的资源体系适合承接 AI 生成物**  
   AI 生成的不只是代码，而是可注册、可配置、可复用、可迭代的平台资源。

4. **双引擎兼容是工程化门槛，也是 Skill 的价值点**  
   Three.js 与 Babylon.js 的对象创建、材质、容器、释放策略都不同。Skill 能把这些差异隐藏在模板和规则中。

5. **自然语言反馈可以成为 3D 调参接口**  
   “翅膀太小”“脚分离”“像龙猫”这样的反馈，最终都能被翻译成几何参数、局部坐标和重建策略。

---

## 10. 尾声：下一步会更进一步

`dav-object-loader` skill 只是 DATASPACE3D 模型生成实践的第一步。

后续将继续推出 **全流程自动化场景生成 Skill**：从一句场景需求出发，自动生成对象资源、材质资源、GUI 配置、场景层级、相机灯光、交互蓝图与发布配置，让可视化搭建流程进一步从“手动搭建”走向“智能生成 + 可视化迭代”。

如果说这次卡通白鸽证明了“一个对象可以被生成并接入平台”，那么下一阶段要验证的是：

> 一个完整的 Web3D 场景，能否也像写一段需求说明一样被生成出来？

这不是一次“让 AI 写点 Three.js 代码”的尝试，而是一次更接近工程化的探索：把自然语言、参考图片、双引擎兼容、平台资源注册、可视化配置和调试迭代，收敛成一个可复用的 DATASPACE3D 对象生成 Skill。 本文使用的 dav-object-loader skill 资源下载地址： https://cdn.dataspace3d.com/system/dav-object-loader.zip

一句话和三张图，生成一个 DATASPACE3D 3D 对象：从卡通白鸽开始的模型生成 Skill 实践

这不是一次“让 AI 写点 Three.js 代码”的尝试，而是一次更接近工程化的探索：把自然语言、参考图片、双引擎兼容、平台资源注册、可视化配置和调试迭代，收敛成一个可复用的 DATASPACE3D 对象生成 Skill。

人工智能

开发工具

客户端

基于三张参考图生成卡通白鸽对象Loader，通过dav-object-loader Skill完成双引擎兼容、平台资源注册及可视化配置，并针对翅膀过小、脚部分离等问题进行二次调参，实现从自然语言到可复用3D平台资源的工程化落地。

数字孪生

代码解释

容器

Agent

CDN免费试用


文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

一句话和三张图，生成一个 DATASPACE3D 3D 对象：从卡通白鸽开始的模型生成 Skill 实践-腾讯云开发者社区-腾讯云

一句话和三张图，生成一个 DATASPACE3D 3D 对象：从卡通白鸽开始的模型生成 Skill 实践

一句话和三张图，生成一个 DATASPACE3D 3D 对象：从卡通白鸽开始的模型生成 Skill 实践

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐