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

Three.js 場景建構器——完成效果
Runs inClaude Code Codex Cursor Muse Dot Grok Bot Cue OpenClaw Hermes
Install guidesClaude Code Codex Cursor Muse
需要：一份場景簡報（brief.txt：[objects] id: shape | size … | pos … | material …；[lights]；[camera]；[scene]）與支援 WebGL 的瀏覽器（用於查看場景）。

Similar Skills

Blender Scene Assistant previewFree

Blender Scene Assistant

  1. 用純文字寫場景簡報
  2. 對簡報執行產生器
  3. 先讀報告，再相信場景
  4. 在 Blender 裡渲染（無頭或視口均可）
  5. 修正錯誤後重新執行

View all skills →

你將獲得

  • 獨立的 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

You say
幫我做一個 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