87 skills · sorted by relevance
Build editable Three.js worlds from text or structured briefs, with terrain, distinct regions, landmarks, vegetation, and camera paths. Review the environment from multiple viewpoints and refine selected areas while preserving the overall layout and reproducible settings.
Build a Three.js 3D model from an object or character reference image using code. The workflow develops shapes and materials in stages, compares rendered views with the reference, and guides corrections through quality checks.
Entrypoint for building, upgrading, and finishing Three.js browser games. Routes work across the sibling threejs-* skills for gameplay, graphics, UI, 3D/image/audio asset generation, debugging, and release. Use for any request to build, upgrade, polish, or ship a Three.js game as a whole, at any scope from a small arcade prototype to a premium release.
The English summary is being prepared. Showing the original description.
Generate, texture, rig, animate, stylize, convert, and download 3D assets for Three.js games via the Tripo API. Use for text-to-3D, image-to-3D, game-ready GLB/FBX, characters, creatures, buildings, props, weapons, terrain, auto-rigging, animation retargeting, model texturing, voxel/LEGO stylization, and low-poly conversion. Pair with threejs-image-generator for concept and texture references first.
The English summary is being prepared. Showing the original description.
Load glTF/GLB models in three.js with GLTFLoader and play their skinned animations with AnimationMixer, including DRACO/Meshopt-compressed meshes and KTX2 textures. Use when importing 3D models into three.js — when the user mentions glTF, GLB, GLTFLoader, AnimationMixer, animation clips, DRACOLoader, or "load a 3D model". For scene/camera/renderer setup use threejs-scene-setup; for materials and lights use threejs-materials-lighting.
The English summary is being prepared. Showing the original description.
Light and shade a three.js scene: choose materials (MeshStandardMaterial PBR vs unlit MeshBasicMaterial), add ambient/hemisphere/directional/point/spot lights, turn on shadow maps, and use an environment map (IBL) for realistic reflections. Use when a three.js model looks black, flat, or wrong — when the user mentions three.js materials, MeshStandardMaterial, lights, shadows, envMap, or PBR. For renderer/loop setup use threejs-scene-setup; for loading models use threejs-gltf-loading.
The English summary is being prepared. Showing the original description.
Stand up a three.js scene: import maps and the three/addons path, the Scene/PerspectiveCamera/WebGLRenderer trio, the setAnimationLoop render loop, responsive resize, and OrbitControls. Use when starting or debugging a three.js app — when the user mentions three.js, THREE.Scene, WebGLRenderer, PerspectiveCamera, the render loop, resizing, or OrbitControls. For models use threejs-gltf-loading; for materials/lights use threejs-materials-lighting.
The English summary is being prepared. Showing the original description.
Build 3D elements and interactive browser experiences with Three.js. The skill covers scene setup, materials that define surface appearance, user controls, and post-processing, which adds visual effects after rendering. The full workflow requires the upstream skill bundle.
Design premium Three.js game UI: HUDs, menus, overlays, pause/win/lose screens, settings, icon controls, touch UI, typography, responsive layout, safe areas, text fit, and UI/world cohesion.
The English summary is being prepared. Showing the original description.
Generate, convert, clean, and integrate audio for Three.js browser games with ElevenLabs: sound effects, looping ambience, music tracks and loops (menu, gameplay, boss, victory/defeat stingers), UI sounds, impact/weapon/vehicle audio, creature and boss stingers, announcer and dialogue TTS, voice conversion from a scratch performance, voice cleanup, audio manifests, and Web Audio integration.
The English summary is being prepared. Showing the original description.
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, objectives, and game feel. Use for first playable slices, new Vite/TypeScript/Three.js setups, level/arena/track/wave/hole/puzzle design, combat encounters, difficulty tuning, and juice.
The English summary is being prepared. Showing the original description.
Verify and release Three.js browser games: playtest QA, automated bot playtests, mobile and responsive checks, production builds, static-hosting base paths, debug gating, bundle review, screenshots, visual regression baselines, canvas-pixel inspection with measured metrics, and release risk reports.
The English summary is being prepared. Showing the original description.
Debug and profile Three.js browser games: blank canvases, render and runtime bugs, asset and audio loading, animation, resize, mobile input, plus performance profiling of draw calls, triangles, textures, memory, shader and post-processing cost, and bundle size.
The English summary is being prepared. Showing the original description.
Generate and edit 2D image assets for Three.js games with Google's Gemini image API: concept sheets, image-to-3D inputs, texture and material references, sky and background plates, decals, logos, icons, GUI art, title and menu art, and marketing stills. Also use for direct image editing when the user supplies an image path.
The English summary is being prepared. Showing the original description.
Upgrade Three.js games from prototype visuals to premium browser graphics: art-direction critique, procedural model building, material and texture libraries, world prop kits, shaders, VFX, lighting and render pipeline, LOD and instancing, render budgets, and a 10-category visual scorecard. Use when screenshots still look basic or the user asks for premium, AAA, high-fidelity, showcase, or less-basic graphics.
The English summary is being prepared. Showing the original description.
Clone or update https://github.com/vibe-motion/threejs-earth and render the Three.js Earth route animation with Puppeteer frame capture. Use when users ask for 三维地球航线动画, Three.js Earth, 地球飞线, globe route animation, or exporting an Earth GIF/MP4/PNG sequence.
The English summary is being prepared. Showing the original description.
Reference WebGPU APIs, TSL syntax, node materials, WGSL integration, compute shaders, and post-processing in Three.js. For complete particle canvases use threejs-particle-canvas; for GLSL shaders use rocaille-shader. Triggers on TSL shader, WebGPU renderer, node material, WGSL, GPU compute, WebGPU setup.
The English summary is being prepared. Showing the original description.
Find topic-specific API guidance and implementation patterns for Three.js projects. Ten references cover scene setup, geometry, materials, lighting, textures, animation, loading models, custom visual effects, postprocessing, and mouse or touch interaction.
Style Three.js objects with realistic, cartoon, or custom materials. Choose material types, adjust textures and reflections, create glass or metal effects, and use shader code for custom appearance while considering rendering performance.
Configure images and videos as surface textures in Three.js, and use environment images for backgrounds and reflections. Adjust placement, color settings, repetition, and filtering, then manage texture memory through compression, reuse, and disposal.
Add mouse, touch, and keyboard interaction to Three.js scenes. Implement object picking, camera navigation, dragging, and transform handles, with examples for selection feedback, coordinate conversion, and limiting the cost of interaction checks.
Build custom visual effects in Three.js using shaders, programs that control shape and surface appearance. Add animated waves, glowing edges, gradients, or dissolving surfaces, and extend existing materials with custom rendering behavior.
Add glow, depth-based blur, color correction, and other finishing effects to Three.js scenes. Covers combining effects with EffectComposer, writing custom shaders for screen effects, handling window resizing, and adjusting rendering workload.
Helps agents build the foundations of a Three.js scene, including cameras, rendering settings, object grouping, and movement. Code examples cover coordinate systems, resizing, animation timing, resource cleanup, and basic performance improvements for browser-based 3D projects.