Responsive Three.js-Auslieferung
Passt das Spiel an seine tatsächliche Anzeigefläche an, ohne unnötig große Bilder zu berechnen. Behandelt Größenwechsel, versteckte Container und fehlende Grafikunterstützung bei lesbarer Oberfläche.
threejs-responsive-delivery
Entdecke, wie der Skill hilftWann ist der Skill hilfreich?
Nutze dies bei verzerrtem eingebettetem 3D oder übermäßigem GPU-Verbrauch.
Wobei hilft er dir?
- Trennt sichtbare Canvasgröße vom Zeichenpuffer.
- Begrenzt Pixeldichte und behandelt versteckte oder nullgroße Container.
- Erhält lesbare UI und klare Meldungen bei fehlender Unterstützung.
Das könntest du fragen
Bette unser 3D-Kartenspiel in ein veränderbares Dashboard ein. Prüfe ein schmales Handy, ein Display mit hoher Pixeldichte und einen zeitweise versteckten Tab. Karten behalten ihre Proportionen, die Renderauflösung bleibt begrenzt und fehlende Grafikunterstützung erzeugt eine verständliche Meldung.
Ausführliche Dokumentation
Hier findest du die ursprüngliche Anleitung, Beispiele und Prüfschritte des Skills in ihrer Originalsprache.
Weniger anzeigen
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.
Enthaltene Dateien 1
SKILL.md