Image to Three.js Model
img2threejs/img2threejs
Rebuilds the object in a reference image as a procedural, animation-ready Three.js model written entirely in code, using staged sculpting with quality checks.
Build or refine real Three.js architectural construction animations, especially Chinese pavilions, pagodas and clock towers with brick-by-brick growth, timber framing, layered eaves, procedural PBR…
Install Threejs Architecture Effects
$ npx skills add lhlGitHub/threejs-architecture-effects --skill threejs-architecture-effects -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install lhlGitHub/threejs-architecture-effects threejs-architecture-effects --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
Claude Code skills documentation · loads skills from .claude/skills/
Install the "threejs-architecture-effects" agent skill from https://github.com/lhlGitHub/threejs-architecture-effects/tree/main into .claude/skills/threejs-architecture-effects/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "threejs-architecture-effects", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add lhlGitHub/threejs-architecture-effects --skill threejs-architecture-effects -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install lhlGitHub/threejs-architecture-effects threejs-architecture-effects --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "threejs-architecture-effects" agent skill from https://github.com/lhlGitHub/threejs-architecture-effects/tree/main into .agents/skills/threejs-architecture-effects/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "threejs-architecture-effects", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add lhlGitHub/threejs-architecture-effects --skill threejs-architecture-effects -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install lhlGitHub/threejs-architecture-effects threejs-architecture-effects --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "threejs-architecture-effects" agent skill from https://github.com/lhlGitHub/threejs-architecture-effects/tree/main into .cursor/skills/threejs-architecture-effects/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "threejs-architecture-effects", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add lhlGitHub/threejs-architecture-effects --skill threejs-architecture-effects -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install lhlGitHub/threejs-architecture-effects threejs-architecture-effects --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "threejs-architecture-effects" agent skill from https://github.com/lhlGitHub/threejs-architecture-effects/tree/main into .gemini/skills/threejs-architecture-effects/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "threejs-architecture-effects", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install lhlGitHub/threejs-architecture-effects threejs-architecture-effectsInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add lhlGitHub/threejs-architecture-effects --skill threejs-architecture-effects -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "threejs-architecture-effects" agent skill from https://github.com/lhlGitHub/threejs-architecture-effects/tree/main into .github/skills/threejs-architecture-effects/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "threejs-architecture-effects", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add lhlGitHub/threejs-architecture-effects --skill threejs-architecture-effects -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install lhlGitHub/threejs-architecture-effects threejs-architecture-effects --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "threejs-architecture-effects" agent skill from https://github.com/lhlGitHub/threejs-architecture-effects/tree/main into .opencode/skills/threejs-architecture-effects/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "threejs-architecture-effects", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
threejs-architecture-effects- GitHub stars
- 478
- Token cost
- ~1.2k tokens
- SKILL.md length
- 536 words
- Files
- 30 (incl. scripts, references, assets)
- Skills in repo
- 1
- Repo updated
- First seen
- Licence
- MIT
At a glance
Build or refine real Three.js architectural construction animations, especially Chinese pavilions, pagodas and clock towers with brick-by-brick growth, timber framing, layered eaves, procedural PBR…
- Works in 7 steps: Translate the reference into an assembly… → Build the stable final silhouette first.… → Give each solid component a start,… → …
- 3D建筑生长、古建搭建特效、楼台逐层建造、建筑动态组装
- SKILL.md covers References, Choose the starting point, Method and Scope, plus 2 more sections
- Calls node
What it does
Threejs Architecture Effects is an agent skill from lhlGitHub/threejs-architecture-effects. Build or refine real Three.js architectural construction animations, especially Chinese pavilions, pagodas and clock towers with brick-by-brick growth, timber framing, layered eaves, procedural PBR materials and interactive detail cameras. Use for 3D建筑生长、古建搭建特效、楼台逐层建造、建筑动态组装 or similar architectural miniatures; not for flat image reveals or generic website styling.
Its SKILL.md is about 1.2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 33 other files, including scripts, reference files and assets (for example `README.md`, `agents/openai.yaml` and `assets/starter/README.md`).
It sits in Game Development, covering 3D graphics and WebGL. It works with Three.js. The repository describes itself as: An Agent Skill for building interactive, self-assembling 3D architecture with Three.js. 一个用 Three.js 生成可交互、可动态建造 3D 建筑的 Agent Skill。 The licence is MIT.
When your agent uses it
- 3D建筑生长、古建搭建特效、楼台逐层建造、建筑动态组装
- Similar architectural miniatures
- Not for flat image reveals
- Generic website styling
Example prompts
- “/threejs-architecture-effects”
Requirements
- Node.js
Workflow steps
7 steps, taken from the first numbered list in SKILL.md.
- Translate the reference into an assembly plan: foundations → load-bearing frame → masonry courses → floor/deck → upper frame/walls →…
- Build the stable final silhouette first. Derive adjoining parts from common dimensions and height functions. Check front, three-quarter…
- Give each solid component a start, duration, and travel distance. Drive the whole scene from one normalized progress value shared by color…
- Prioritize roof thickness, rafters/purlins, bracket supports, and meaningful joints before increasing ornament count. Then separate brick…
- Use restrained deterministic variation. Preserve repeating architectural rhythm while varying UV sampling, tile tint, and small…
- Light as a clean architectural miniature: controlled key/fill/rim, grounded contact, legible eave undersides. Do not hide crude geometry…
- Measure the actual scene while assembling, dragging, and viewing close-ups. Preserve or improve the starter's shadow caching and demand…
What it can do on your machine
Read from SKILL.md and the folder at commit 693ca2e. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships 1 file in scripts/, which the agent can run.
Shell commands in SKILL.md call:
node
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Threejs Architecture Effects loads about 1.2k tokens when it runs, and up to ~3.6k if it reads all its reference files. Until then it costs about 99 tokens; SKILL.md has 536 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
SKILL.md
The full file from lhlGitHub/threejs-architecture-effects at commit 693ca2e, republished under its MIT licence (© lhlGitHub). 536 words, ~1,172 tokens.
Download SKILL.mdSave it as
.claude/skills/threejs-architecture-effects/SKILL.md (or your agent's skills folder). This skill also uses 29 other files; get the full folder from GitHub.- name
- threejs-architecture-effects
- description
- Build or refine real Three.js architectural construction animations, especially Chinese pavilions, pagodas and clock towers with brick-by-brick growth, timber framing, layered eaves, procedural PBR materials and interactive detail cameras. Use for 3D建筑生长、古建搭建特效、楼台逐层建造、建筑动态组装 or similar architectural miniatures; not for flat image reveals or generic website styling.
- license
- MIT
- metadata.author
- Hailey
- metadata.version
- 1.0.0
- metadata.requires
- Node.js 22.13+, npm, WebGL2 browser. No API keys.
Three.js Architecture Effects
Create an actual, orbitable 3D building assembled from solid components. The included clock-tower miniature is a working reference, not a mandatory design or a historical reconstruction.
Resolve <this-skill-dir> from the loaded SKILL.md. Do not mix files from a different install of this skill.
References
| File | Read it when |
|---|---|
| references/template-guide.md | scaffolding a new project or mapping starter files |
| references/construction-principles.md | geometry, assembly timing, materials, or lighting |
| references/verification.md | stutter, quality checks, metrics, or handoff |
Choose the starting point
- Existing project: inspect its scene owner, geometry factories, timing, materials, controls, and renderer diagnostics before editing. Preserve its recognizable design, cameras, and interactions unless the user asks to change them. Do not scaffold over it.
- New project: read the template guide, then run
node <this-skill-dir>/scripts/scaffold.mjs <new-project-directory>. The script refuses an existing destination. It copies a self-contained Vite/React/Three.js starter; it does not install packages or start services. - Reference video or images: inspect the supplied media as reference only. Identify structural stages and proportions. Do not return the reference video as your work, paste screenshots onto planes, or promise an unsupported similarity percentage.
Method
- Translate the reference into an assembly plan: foundations → load-bearing frame → masonry courses → floor/deck → upper frame/walls → brackets/eaves/tiles → ornament. Distinguish a structural floor from a late-installed decorative roof so higher levels never float.
- Build the stable final silhouette first. Derive adjoining parts from common dimensions and height functions. Check front, three-quarter, and underside views before refining surface detail.
- Give each solid component a start, duration, and travel distance. Drive the whole scene from one normalized progress value shared by color and depth shaders. Seeking backward, pausing, and replaying must remain deterministic.
- Prioritize roof thickness, rafters/purlins, bracket supports, and meaningful joints before increasing ornament count. Then separate brick, plaster, wood, ceramic, stone, and metal through independently authored color, roughness, and micro-height.
- Use restrained deterministic variation. Preserve repeating architectural rhythm while varying UV sampling, tile tint, and small dimensions; do not randomize joints out of alignment.
- Light as a clean architectural miniature: controlled key/fill/rim, grounded contact, legible eave undersides. Do not hide crude geometry with fog, bloom, or excessive brightness.
- Measure the actual scene while assembling, dragging, and viewing close-ups. Preserve or improve the starter's shadow caching and demand rendering. Inspect after any shader or geometry change; a passing build is not a visual test.
Show full SKILL.md (148 more words)Show less
Scope
No external model service, image generation, subscription, proprietary asset, or other skill is required. Procedural geometry is the default; use external assets only when requested or agreed, with their origin and license recorded. The template is silent intentionally; add music only from an authorized source.
Keep this skill as instructions plus a portable starter. Do not copy the creator's private sessions, local paths, environment files, or acquisition packages into generated output.
What goes wrong
A screenshot mapped onto a plane · scaling a whole storey instead of laying courses · alpha-fading walls into existence · color and shadow shaders that disagree · upper floors with no supporting deck · fog or bloom used to hide crude joints · claiming museum quality, historical accuracy, a market price, or universal 60 FPS from one screenshot.
Report
Deliver runnable source, startup and build commands, a short account of changed surfaces, observed test results, and remaining limitations.
© lhlGitHub, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 29 other files (scripts, references, assets) in the repository root of lhlGitHub/threejs-architecture-effects.
- SKILL.md
- .gitignore
- LICENSE
- README.md
- agents/openai.yaml
- assets/preview.gif
- assets/preview.mp4
- assets/preview.png
- assets/starter/.gitignore
- assets/starter/LICENSE
- assets/starter/README.md
- assets/starter/index.html
- assets/starter/package-lock.json
- assets/starter/package.json
- assets/starter/src/App.tsx
- assets/starter/src/PagodaThreeScene.tsx
- assets/starter/src/heritage
- … and 13 more
Open the folder on GitHubat commit 693ca2e
Compare with similar skills
Threejs Architecture Effects next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Threejs Architecture Effects this skilllhlGitHub/threejs-architecture-effects | 478 | — | ~1.2k | Automated safety check: Pass | MIT | |
| Image to Three.js Modelimg2threejs/img2threejs | 18k | 1 repos | ~8.2k | Automated safety check: Pass | Apache-2.0 | |
| Web CloneJane-xiaoer/claude-skill-web-clone | 1k | 1 repos | ~2.7k | Automated safety check: Pass | MIT | |
| Threejs Game Directormajidmanzarpour/threejs-game-skills | 2.4k | — | ~2.2k | Automated safety check: Pass | MIT | |
| Threejs Gameplay Systemsvalkor-ai/loom | 1.2k | 1 repos | ~1.4k | Automated safety check: Pass | Apache-2.0 | |
| Threejs World Generationcalesthio/OpenMontage | 65k | — | ~2k | Automated safety check: Pass | AGPL-3.0 |
Similar skills
Web Clone
Jane-xiaoer/claude-skill-web-clone
网站复刻 / 克隆方法论。USE WHEN 用户说 复刻网站、克隆网站、clone website、抄个站、仿站、 照着这个站做一个、reproduce site、还原某个网页效果、把这个站搬下来改成我的、 复刻某个交互/WebGL/Canvas/Three.js 效果。提供「先拿真源码 → 判路径 → 逆向拆解 → 搭工程 → 替换内容」的可移植决策树，覆盖静态站 /…
Threejs Game Director
majidmanzarpour/threejs-game-skills
Entrypoint for building, upgrading, and finishing Three.js browser games.
Threejs Gameplay Systems
valkor-ai/loom
Build and iterate playable Three.js game systems: starter scaffold, architecture, design briefs, core loops, level and encounter design, entities, input, camera, collision and physics, scoring…
Threejs World Generation
calesthio/OpenMontage
Build deterministic, editable, free-viewpoint Three.js worlds from text or structured briefs.
3Dviz Pro Max Scene Builder
viettranx/3dviz-pro-max
Guides building an expressive 3D scene in Three.js or Blender by reasoning through intent, object construction and scientific grounding before using a catalog of recipes and kits.
Related
Works with
Categories
Questions about Threejs Architecture Effects
What does Threejs Architecture Effects do?
Build or refine real Three.js architectural construction animations, especially Chinese pavilions, pagodas and clock towers with brick-by-brick growth, timber framing, layered eaves, procedural PBR…. Threejs Architecture Effects is an agent skill from lhlGitHub/threejs-architecture-effects.js architectural construction animations, especially Chinese pavilions, pagodas and clock towers with brick-by-brick growth, timber framing, layered eaves, procedural PBR materials and interactive detail cameras.
When should I use Threejs Architecture Effects?
Threejs Architecture Effects fits situations like: 3D建筑生长、古建搭建特效、楼台逐层建造、建筑动态组装; similar architectural miniatures; not for flat image reveals; generic website styling.
How do I install Threejs Architecture Effects in Claude Code?
Run `npx skills add lhlGitHub/threejs-architecture-effects --skill threejs-architecture-effects -a claude-code`. Or copy the skill folder (the lhlGitHub/threejs-architecture-effects repository) into .claude/skills/threejs-architecture-effects in your project. Claude Code loads it when a task matches its description.
How do I install Threejs Architecture Effects in Codex?
Run `npx skills add lhlGitHub/threejs-architecture-effects --skill threejs-architecture-effects -a codex`. Or copy the skill folder (the lhlGitHub/threejs-architecture-effects repository) into .agents/skills/threejs-architecture-effects in your project. Codex loads it when a task matches its description.
Can I use Threejs Architecture Effects in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add lhlGitHub/threejs-architecture-effects --skill threejs-architecture-effects -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/threejs-architecture-effects, .gemini/skills/threejs-architecture-effects, .github/skills/threejs-architecture-effects and .opencode/skills/threejs-architecture-effects in your project.
What does Threejs Architecture Effects need to run?
Going by SKILL.md and its folder, Threejs Architecture Effects needs the command-line tools its instructions call (node). Our summary lists: Node.js.
Does Threejs Architecture Effects access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Threejs Architecture Effects safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does Threejs Architecture Effects use?
Threejs Architecture Effects is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Threejs Architecture Effects use?
About 1.2k tokens (SKILL.md is roughly 4.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 2.4k tokens, read only when the agent opens those files.
What are the alternatives to Threejs Architecture Effects?
Skills that share tags, products or a category with Threejs Architecture Effects: Image to Three.js Model (img2threejs/img2threejs, 18k stars), Web Clone (Jane-xiaoer/claude-skill-web-clone, 1k stars), Threejs Game Director (majidmanzarpour/threejs-game-skills, 2.4k stars) and Threejs Gameplay Systems (valkor-ai/loom, 1.2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Threejs Architecture Effects?
lhlGitHub (a GitHub user) maintains it in lhlGitHub/threejs-architecture-effects, which has 478 GitHub stars. The repository was last updated on September 22, 2026.
Source: lhlGitHub/threejs-architecture-effects on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.