threejs
nexu-io/open-design
Create 3D scenes, materials, and interactive experiences with Three.js in the browser.
What is threejs?
Three.js skills for building 3D web graphics and interactive experiences. Use this when you need to create WebGL scenes, apply materials, add camera controls, or implement post-processing effects in browser-based applications.
- Create and manage 3D scenes with geometry and lighting
- Apply and customize materials for realistic rendering
- Implement camera controls for user interaction
- Add post-processing effects to enhance visuals
- Build interactive 3D experiences in the browser
How to install threejs
npx skills add https://github.com/nexu-io/open-design --skill threejsHow to use threejs
- 1.Install the skill using the provided npm command
- 2.Invoke the skill by name ('threejs') or trigger phrases like '3d web' or 'webgl scene'
- 3.Reference the upstream repository at https://github.com/CloudAI-X/threejs-skills for detailed examples and assets
- 4.Ask the agent to create or modify 3D scenes using Three.js components
Use cases
- Building interactive 3D product visualizers
- Creating data visualization dashboards with 3D elements
- Developing WebGL-based games or simulations
- Adding 3D animations to web applications
- Implementing real-time 3D rendering with custom shaders
- Web developers building 3D experiences
- Creative technologists and interactive designers
- Game developers targeting web platforms
- Data visualization specialists
- Full-stack developers adding 3D features
threejs FAQ
The skill covers scenes, materials, controls, and post-processing — the core components for building interactive 3D web experiences.
No, the skill abstracts Three.js patterns so you can request 3D features by description; the agent handles the WebGL implementation.
Yes, the skill supports shader implementation as part of its post-processing and material capabilities.
Check the upstream repository at https://github.com/CloudAI-X/threejs-skills for the full README, assets, and reference implementations.
Full instructions (SKILL.md)
Source of truth, from nexu-io/open-design.
name: threejs description: | Three.js skills for creating 3D elements and interactive experiences in the browser — scenes, materials, controls, and post-processing. triggers:
- "threejs"
- "three.js"
- "3d web"
- "webgl scene"
- "3d interactive" od: mode: prototype category: 3d-shaders upstream: "https://github.com/CloudAI-X/threejs-skills"
threejs
Curated from CloudAI-X.
What it does
Three.js skills for creating 3D elements and interactive experiences in the browser — scenes, materials, controls, and post-processing.
Source
- Upstream: https://github.com/CloudAI-X/threejs-skills
- Category:
3d-shaders
How to use
This catalogue entry advertises the skill in Open Design so the agent discovers it during planning. To run the full upstream workflow with its original assets, scripts, and references, install the upstream bundle into your active agent's skills directory:
# Inspect the upstream README for exact paths
open https://github.com/CloudAI-X/threejs-skills
Then ask the agent to invoke this skill by name (threejs) or with
one of the trigger phrases listed in this skill's frontmatter.
Related skills
More from nexu-io/open-design and the wider catalog.
ui-skills
Opinionated UI constraints to keep agent-generated interfaces coherent across components.
ui-ux-pro-max
Catalog entry for UI/UX Pro Max design patterns—full workflow requires upstream installation.
venice-audio-music
Music generation queueing and retrieval via Venice.ai for jingles, loops, and prototype scoring.
venice-audio-speech
|
venice-image-edit
Image edits, upscaling, and background removal via Venice.ai API
venice-image-generate
|