Three.js Skills

Three.js(3js)是把 3D 放上网页的方式——但一个场景在第一个物体出现之前,大半是样板代码:渲染器、相机、灯光、材质、轨道控制器、尺寸自适应。Three.js 场景构建器用一份经过校验的简报代替样板代码:用纯文本描述场景,输出就是单个 scene.html,浏览器打开即看。

下面是 SkillU 上的第一个 Three.js Skill,附带真实简报、可运行的生成器、评测,以及它构建的场景截图——装上它,做你自己的 3D 网页场景。

浏览 Three.js Skill 浏览全部 Skills

1SkillU 上的 Three.js Skill
免费Three.js Skill 可免费下载
WebGL支持 WebGL 的浏览器都能打开

SkillU 上的 Three.js Skills

真实 Skill:可运行的脚本、评测与渲染场景——装上它,做你自己的 3D 网页场景。

Three.js Scene Builder previewFree

Three.js Scene Builder

  1. 用纯文本写场景简报
  2. 对简报运行生成器
  3. 先读报告,再相信场景
  4. 在浏览器里打开 scene.html 并环绕查看
  5. 修正错误后重新运行

Three.js Skill 怎么用

  1. 把 Skill 包放进 Agent 的 skills 目录。
  2. 用纯文本写场景简报:物体、灯光、相机与场景设置。
  3. 运行附带的生成器——它校验简报,写出 scene.html 与报告。
  4. 在浏览器里打开 scene.html 环绕查看,或放到任意静态托管上。

常见问题

Three.js 场景构建器是什么?

一个 Agent Skill,把纯文本场景简报变成经过校验的独立 Three.js 网页场景。你描述物体、灯光、相机与场景设置;脚本先校验简报——未知形状丢弃、重复拒绝、错误尺寸点名——再生成单个 scene.html,带轨道控制器与转盘。

需要 Three.js 经验吗?

不需要。用纯文本写简报,运行一条命令,在浏览器里打开 scene.html 即可。Skill 的 SKILL.md 会带你走完每一步;简报有错时,报告会准确告诉你错在哪。

查看场景需要什么?

支持 WebGL 的浏览器。页面从 unpkg CDN 加载 three.js 0.160.0;要完全离线运行,把模块与 OrbitControls 插件下载到本地并把 import map 指过去。

3D 浏览全部 Skills