Responsive Three.js delivery
Adapts the game to its real display area without unnecessarily rendering oversized frames. It handles resizing, hidden containers and unavailable graphics contexts while keeping the interface readable.
threejs-responsive-delivery
See how it helpsWhen is it useful?
Use when embedded 3D looks stretched or consumes excessive GPU resources.
What does it help you do?
- Distinguishes displayed canvas dimensions from the drawing buffer.
- Bounds pixel density and handles hidden or zero-size hosts.
- Preserves readable UI and explicit unsupported-renderer outcomes.
Try asking this
Embed our 3D card battler in a resizable dashboard. Test a narrow phone, a high-density display and a temporarily hidden tab. Cards must keep their proportions, rendering resolution must stay bounded and unavailable graphics must show a clear explanation instead of a blank canvas.
Detailed documentation
Read the skill’s original instructions, examples and checks in their authored language.
Show less
Three.js — responsive delivery
Use when delivering Three.js across resized canvases, mobile screens or browser backends.
Version and project gate
Inspect Three.js revision, renderer/backend, addons import style, bundler, color-management conventions, animation loop owner, scene scale, glTF/decoder versions and existing physics wrapper. Never turn a task into an engine upgrade without the user’s intent. Read the version-matching official reference when an API decision depends on it.
Work
Read the displayed canvas size separately from the drawing buffer. Update projection with the display aspect and budget internal resolution for the actual device. Handle zero-sized/hidden hosts and unavailable rendering contexts. Keep UI readable separately from 3D render scale.
Deliver
A resize/resolution policy and a supported-browser delivery note for the actual build. Keep the change in the existing project structure; separate actual observations from the proposed acceptance scenario below.
Failure to prevent
Unbounded devicePixelRatio may create excessive GPU work; a stretched canvas can hide an unchanged drawing buffer.
Acceptance scenario
Resize an embedded host, rotate a phone viewport, hide/show the view and try an unsupported graphics path. Follow the project’s execution and verification permissions. If execution or a target device is unavailable, provide the reproduction steps and name the remaining uncertainty; do not mark it passed.
Scope and sources
This skill belongs to Vex. Agent selection is restricted by Orqestria’s assigned-agent policy, including forced skill selection; instruction text alone is not an access control. These are original task workflows researched from official documentation, not a copied or endorsed vendor skill.
Included files 1
SKILL.md