Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

threejs-fundamentals · calesthio — Claude Code skill: what it does, install

A skill for building Three.js scenes, setting up cameras and renderers, and working with Object3D hierarchies and transforms.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add calesthio/OpenMontage --skill threejs-fundamentals -a claude-code
Open on GitHub

What threejs-fundamentals does

threejs-fundamentals covers the basic pieces of a Three.js scene: Scene, PerspectiveCamera, OrthographicCamera, WebGLRenderer, meshes, lights, animation loops, and resize handling. It also shows renderer options for color space, tone mapping, shadows, transparency, and pixel ratio.

The skill explains Object3D, Group, and Mesh, including local and world transforms, layers, traversal, visibility, matrix updates, and render order. It also describes Three.js’s right-handed coordinate system and AxesHelper. Updating CubeCamera every frame is expensive, so reflection setups need a deliberate performance check.

It can be installed for Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, or OpenCode. The examples use Three.js and JavaScript code.

What it helps with

  • build a basic Three.js scene
  • set up a perspective or orthographic camera
  • connect WebGLRenderer to an animation loop
  • organize objects with Object3D and Group
  • fix transforms and resize handling

Example prompts for the agent

  • Use `threejs-fundamentals` to build a Three.js scene with a camera, WebGLRenderer, cube, light, and animation loop.
  • Apply `threejs-fundamentals` to configure an OrthographicCamera for an isometric view.
  • Use `threejs-fundamentals` to diagnose a wrong world position and update the relevant matrices.

How to install threejs-fundamentals

1Skills CLI (Vercel)

npx skills add calesthio/OpenMontage --skill threejs-fundamentals -a claude-code

2Manually: put the files in place

~/.claude/skills/threejs-fundamentals/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/threejs-fundamentals/

From the same set28

The whole set →
video-understand calesthio This skill extracts video frames and transcribes audio locally with ffmpeg and Whisper. Use it to inspect video content without API keys. Claude Code CX Codex Cursor +1 1,300installs remotion calesthio Teaches AI agents toolkit-specific Remotion patterns, including custom transition shaders and 30 fps video rules. Claude Code CX Codex Cursor +1 1,200installs video-download calesthio Uses yt-dlp to fetch video, audio, subtitles, or URL metadata. Use it when you need a local file, a selected resolution, or details without downloading media. Claude Code CX Codex Cursor +1 1,200installs lottie-bodymovin calesthio Applies Disney's 12 animation principles to Lottie vector animations. Bridges After Effects setup with runtime JavaScript controls. Claude Code CX Codex Cursor +1 1,100installs create-video calesthio This skill turns a description into a finished video: write what you want to see, and HeyGen generates the script, picks an avatar, adds voiceover and editing. Good for quick demos, explainers and promos without tweaking every detail. Claude Code CX Codex Cursor +1 1,100installs video-toolkit calesthio Automates video creation: generates voiceovers, background music, animates talking heads, and composes scenes with Remotion. Requires Node.js, Python3, ffmpeg, and cloud GPU access (Modal or RunPod). Claude Code CX Codex Cursor +1 1,100installs text-to-speech calesthio Generates speech audio with HeyGen Starfish and lets you choose a voice, speed, and pitch. Useful for voiceovers, narration, and podcasts. Claude Code CX Codex Cursor +1 1,100installs bfl-api Black Forest Labs This skill helps connect BFL FLUX API for image generation and editing. It covers async requests, polling, rate limits, and webhooks. Claude Code CX Codex Cursor +1 1,000installs

Other versions of threejs-fundamentals

threejs-fundamentals CloudAI-X Sets up Three.js r186 scenes, cameras, renderers, and animation loops for WebGL or WebGPU with TSL. Claude Code CX Codex Cursor +1 17,100installs

Similar

co-op-game-intro-generator MiniMax-AI Generates opening menu animations for two-player co-op games. It locks character identity cues, arranges UI elements, and formats prompts for MiniMax H3. Claude Code CX Codex Cursor +1 3,300installs controlnet-pose prime-skills A skill for controlling pose and motion in video and image generation via RunComfy. Transfer movement from a source video to a target character, animate by pose, or generate images with depth or skeleton control. Claude Code CX Codex Cursor +1 377,000installs game-developer https://github.com/Jeffallan Skill for game development in Unity and Unreal Engine. Builds game systems, configures physics, multiplayer networking, shaders, and optimizes performance to 60+ FPS. Claude Code CX Codex Cursor +1 6,400installs shader-dev MiniMax-AI GLSL reference skill covering 36 real-time shader techniques for ShaderToy and WebGL2. Helpful for ray marching, SDF scenes, fluids, and visual effects. Claude Code CX Codex Cursor +1 2,500installs game-setup-and-config phaserjs Guides agent setup for Phaser 4 instances and GameConfig options. Useful when configuring renderers, canvas scaling, FPS caps, and pixel art settings. Claude Code CX Codex Cursor +1 1,200installs sprites-and-images phaserjs Guides agents on creating Sprite and Image objects in Phaser 4. Explains factory methods, texture frames, mixin components, and visual transforms. Claude Code CX Codex Cursor +1 1,100installs orbit-card heygen-com Adds a 10-second 1920×1080 HyperFrames motion block where a single feature card orbits a dot sphere using exported Blender camera paths. Claude Code CX Codex Cursor +1 9,800installs sdf earthtojake This skill authors and validates SDFormat files for models and worlds, then helps prepare them for simulator handoff. Claude Code CX Codex Cursor +1 10,500installs

Questions about threejs-fundamentals

How do I install threejs-fundamentals in Claude Code?

Run these steps in order: npx skills add calesthio/OpenMontage --skill threejs-fundamentals -a claude-code, then run the same command again: npx skills add calesthio/OpenMontage --skill threejs-fundamentals -a claude-code. The skill file is at ~/.claude/skills/threejs-fundamentals/SKILL.md.

What does threejs-fundamentals do?

It covers Three.js scene setup, cameras, WebGLRenderer, meshes, lighting, Object3D hierarchies, transforms, coordinate systems, and render loops.

What does threejs-fundamentals require?

The project uses Three.js and JavaScript code. The skill targets Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, and OpenCode.

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor