threejs-scene
From the author
Builds real-time 3D websites in three.js from code alone, with no model files. Covers buildings and landmarks, vehicles, machines, landscapes and product studies made of procedural geometry (profile sweeps, lathes, instancing), canvas textures, shader patches, a physically based sky and sun, soft shadows, ambient occlusion and bloom, light presets, camera vantages and flights, quality tiers, and a starter that runs at 60 fps. Use when someone asks for a 3D website, a three.js scene, a WebGL hero, an interactive 3D model of a real place or object, a "3D version" of something, or when an existing three.js page looks flat, plasticky, aliased, washed out or slow.
Install
npx skills add Moh4696/open-3d-skills --skill threejs-scene -a claude-code
Installs to .claude/skills/threejs-scene/ · Each command fetches the skill straight from GitHub with the open skills CLI.
Byte-identical to the scanned commit, with the repository’s licence and a SOURCE.txt.
Want your agent to suggest skills while you type? See how to use skills from your IDE.
Safety checks on SKILL.md
- Ships scripts we have not reviewedLow
Why 78
aiqbench computes the trust score from public signals. It is not a security audit, so read a skill before you install it.
Similar skills
Closest to this one by what they do and when they are used.
- threejsnexu-io/open-designThree.js skills for creating 3D elements and interactive experiences in the browser — scenes, materials, controls, and post-processing.Browser★ 105.7K
- threemagnus919/agent-skillsBuild browser-based Three.js and WebGL scenes, animations, and interactive 3D visualizations with a small vanilla JavaScript starting point. Do not use this skill for unrelated requests; route to the nearest named specialist.Browser★ 163
- 3d-image-rendererhassancs91/claude-image-generationGenerate PNG images by building a real Three.js 3D scene and capturing one frame headlessly — no image model involved. Takes a text prompt and an aspect ratio (1:1, 16:9, or 9:16) and produces a rendered PNG. Use this skill whenever the user asks to generate, create, or render an image, picture, scene, wallpaper, thumbnail background, or product shot with this system — especially with phrases like "generate an image of", "render a scene", "create a PNG", "no image model", "3D render of", or a prompt paired with an aspect ratio. Also use it when the user wants an image in a named visual style (dark studio, Apple light, nature, sunset, night, underwater). Not for editing existing images, 2D vector art, or animated video (VidTSX handles video).Media★ 110
- machineAirsupHQ/machine-skillTurn one line ("a turbofan jet engine", "a mechanical watch", "an LVAD heart pump") into a photoreal, physics based, interactive 3D simulation of that machine in a single HTML file, plus a 20 to 30 second film to post it. Real proportions in metres, real materials (PBR metals, paints, polymers, glass), studio lighting with soft shadows, moving parts driven by a small solver that computes real numbers (thrust, torque, rpm, flow, pressure, efficiency), and modes to explode it, cut it open with clean section caps, x-ray it, slow it down, label it and break it. Use this whenever someone asks to build, simulate, visualise, explain or "show how X works" for any machine, engine, mechanism, device, instrument or piece of hardware, wants an interactive 3D model or a cutaway, or wants a video of a machine for a post, even if they never say "simulation" or "three.js".Media★ 534
- code-filmmajiayu000/spellbook用纯代码(three.js 离线渲染 + 合成音频)做有故事、有电影质感的动画短片并导出 MP4。当用户想做短片、动画片、宣传片、角色动画、循环视频、片头、产品故事片,或者说“用代码做个视频”“做一个有趣的短片”“帮我设计个小动画”“make a short film / animated video / motion piece with code”时使用,即使没提 three.js。也用于继续修改这类片子。写实真人、实拍感、AI 视频生成、普通视频剪辑不适用。Engineering★ 289
- code-built-3dmajiayu000/spellbook用代码从零件搭 3D 场景并能反过来拆开:每个物件是一个往 Assembly 里加零件的函数(盒子、圆柱、球、线),渲染成技术插画(白灰三档面、细黑描边、白雾),正交等距相机在镜头之间连续运镜,外壳可以降下去露出内部,选中的部分能爆炸成零件并列出零件清单,场景按块无限生成。零图片、零外部资源,three.js 已内置。演示是「无尽楼」:向上无尽的公寓楼,电梯一直往上走,点任意一层进去看、拆开。当用户说「用代码搭一个 3D 场景」「等距 3D 城市」「做成 Train of Thoughts 那种」「全程代码生成不要图片」「能剖开 / 去壳 / 爆炸的 3D」「无限生成的场景」「three.js 做构造」时使用。只在明确请求时触发,忽略顺带提及。Engineering★ 289
Ratings & reviews
—
no reviews
Tried this skill? Rate it to help others. Sign in
Discussion
Join the discussion. Sign in