239 skills · sorted by relevance
Add a real 3D object to a web page using Three.js. Combine geometric depth, materials that respond to light, perspective, and subtle rotation or floating motion for hero sections and product visuals.
Build a continuous 3D website where scrolling guides the camera, lighting, text, and interactions through planned chapters. The skill covers visual planning, responsive composition, progressive loading, accessibility, and performance checks for a live Three.js world.
Prepare and deploy Three.js or other web games from a tested commit, a specific saved code version. Check the live game's controls, assets, and display, then record release evidence and a rollback target.
Build and check monsters for Three.js and web action games using shared rules for joints, attachment points, collision shapes, and combat states. Separate visual animation from damage decisions, and provide reproducible checks for attacks and detail-level changes.
Build or audit browser map editors for Three.js and isometric games. Reuse production world definitions, edit placements in isolated drafts, inspect enemy behavior overlays, and validate exports before reviewed integration into the game.
Plan and integrate assets for Three.js or web games by choosing imported models, code-generated geometry, or 2D media. Define scale and collision needs, check appearance and performance in the game, and record sources and licenses.
Design and implement sound feedback for Three.js or web games, from action cues to music transitions. Define which sounds take priority, respect volume controls, provide visual alternatives, and check browser behavior and audio performance.
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 and debug interactive web 3D scenes with Three.js, React Three Fiber, or Spline. Plan product configurators and portfolios, prepare models, connect scroll interactions, and review loading feedback, fallback content, accessibility, and performance on target devices.
Create interactive views of dense datasets, spatial paths, and flows using WebGL, which uses the GPU for rendering. Choose suitable libraries and design navigation, labels, animation, and static alternatives around the analytical task.
Build a Three.js object viewer with a gentle camera lean on hover and a click-to-inspect mode. Visitors can rotate and zoom the object, then return it to its original position using mouse, touch, or keyboard controls.
Comprehensive guide for developing WebGPU-enabled Three.js applications using TSL (Three.js Shading Language). Covers WebGPU renderer setup, TSL syntax and node materials, compute shaders, post-processing effects, and WGSL integration. Use this skill when working with Three.js WebGPU, TSL shaders, node materials, or GPU compute in Three.js.
The English summary is being prepared. Showing the original description.
Three.js 性能优化指南。当 Three.js/React Three Fiber 项目出现掉帧、内存增长、加载缓慢、绘制调用过多，或需要迁移 WebGPU、实现大规模粒子/实例化渲染、配置资源压缩管线时使用。触发关键词："Three.js 优化"、"WebGPU"、"draw calls"、"内存泄漏"、"TSL"、"InstancedMesh"、"R3F 优化"等。不用于：通用 React 性能问题（用 vercel-react-best-practices）、WebGL/Three.js 入门教学、3D 美术资产的制作本身。
The English summary is being prepared. Showing the original description.
Comprehensive guide for developing WebGPU-enabled Three.js applications using TSL (Three.js Shading Language). Covers WebGPU renderer setup, TSL syntax and node materials, compute shaders, post-processing effects, and WGSL integration. Use this skill when working with Three.js WebGPU, TSL shaders, node materials, or GPU compute in Three.js.
The English summary is being prepared. Showing the original description.
Create videos in React with Remotion using focused implementation guidance and code examples. The skill covers animation, audio, captions, charts, 3D content, and scene transitions, along with handling media assets and timing.
Build or extend an isometric action RPG, viewed from an angled overhead perspective, using web technology. Develop a playable loop covering movement, combat, rewards, progression, and saves, with staged implementation and release checks.
Design and build marketing sites, portfolios, and landing pages with original imagery, coordinated typography, and GSAP animations. The workflow also covers accessible interactions, media sourcing, performance limits, and static alternatives when motion or graphics are unavailable.
Build interactive 3D tours for buildings, museums, and showrooms. Coordinate guided camera routes, room lists, floor plans, and orbit inspection, which lets viewers rotate around a model, while managing transitions, asset loading, and accessible controls.
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.
Comprehensive guide for developing WebGPU-enabled Three.js applications using TSL (Three.js Shading Language). Covers WebGPU renderer setup, node materials, compute shaders, post-processing, and WGSL integration. Use when working with Three.js WebGPU, TSL shaders, or GPU compute pipelines.
The English summary is being prepared. Showing the original description.
Build or refine a 3D scene by comparing live screenshots with a target image. This skill repeatedly evaluates composition, lighting, materials, and detail, then guides revisions while checking that rendering speed remains acceptable for the target platform.
Add a 3D card carousel to a HyperFrames video. Rounded cuboids enter from the right, rotate in sequence, pause on a featured card, and exit left, with 40 variables for content, geometry, lighting, and camera settings.
Build browser games and game engines with HTML5, Canvas, WebGL, and JavaScript. Starter templates and reference guides support 2D and 3D graphics, controls, collision detection, audio, multiplayer features, performance improvements, and publishing.