← 全部 Skills · 3D · Three.js Scene Builder

Three.js 场景构建器——完成效果
适用平台Claude Code Codex Cursor Muse Dot Grok Bot Cue OpenClaw Hermes
安装指南Claude Code Codex Cursor Muse
需要：一份场景简报（brief.txt：[objects] id: shape | size … | pos … | material …；[lights]；[camera]；[scene]）与支持 WebGL 的浏览器（用于查看场景）。

相似技能

Blender Scene Assistant previewFree

Blender Scene Assistant

  1. 用纯文本写场景简报
  2. 对简报运行生成器
  3. 先读报告，再相信场景
  4. 在 Blender 里渲染（无头或视口均可）
  5. 修正错误后重新运行

查看全部技能 →

你将获得

  • 独立的 scene.html：import map、带阴影的渲染器、每个物体配标准材质
  • OrbitControls 轨道控制器与转盘动画，另有尺寸自适应处理
  • 一份场景报告：物体与灯光表，以及全部错误与警告
  • 每次运行都会用 node --check 对生成的模块脚本做语法检查

适合人群

  • 可分享链接的产品转盘与 3D 网页场景
  • 接入网站前先快速验证 3D 场景
  • 让场景保持诚实：只构建列出的内容

不适合

  • 复杂外部模型（GLTF/FBX）——仅限基本体
  • 自行补齐缺失的物体、灯光或背景
  • 证明场景好看——报告干净只说明与简报一致，不代表好看

示例输出

此 Skill 产出的示例。示例内容，仅供说明。

Three.js Scene Builder report — sample

Scene report: Yellow Mug Turntable

Objects: 3 valid | Lights: 2 | Camera: custom | Background: #262627 | Turntable: on

Objects: pedestal (cylinder 2.0, 0.15); mug (cylinder 0.9, 1.1); backdrop (plane 12, 12).

Errors: none. Warnings: none. Module node --check: OK.

Messy draft check: 2 valid objects, 3 errors (unknown capsule shape; duplicate mug id; negative-size badbox), 1 warning (missing camera — default added).

关于此 Skill

你说
帮我做一个 Three.js 产品转盘：深色底座上的黄色杯子、浅色背景，带轨道控制器。

如何安装

  1. 把安装提示词复制到你的 Agent： Read https://skillu.dev/install/agent.md, then install the Three.js Scene Builder skill (threejs-scene-builder).
  2. 或在上线后从本页下载 Skill 包，把它的文件夹放入你的 Agent 的 skills 目录。
  3. 用斜杠命令调用它，例如 /threejs-scene-builder，然后用大白话描述你想要什么。

常见问题

简报有错误会怎样？

场景仍会按有效部分生成，报告列出全部错误与警告：未知形状被丢弃、重复 id 保留第一次定义、错误尺寸被点名、缺失相机按说明补默认相机。修好简报再跑一次即可。

它会构建我没写的东西吗？

不会。只出现简报里的物体、灯光与设置。缺背景或第二盏灯是简报的缺口，需要你补上，技能不会替你补。

场景需要服务器吗？

任意静态托管或一行本地命令即可（python3 -m http.server）。页面从 unpkg CDN 加载 three.js 0.160.0；要完全离线运行，把模块与 OrbitControls 插件下载到本地并把 import map 指过去。

获取 Premium 浏览更多 Skills