---
name: 3d-performance
description: "Keep interactive 3D responsive on constrained devices. Use for GPU, DPR, lazy load."
---

# Производительность 3D

Keep interactive 3D responsive on constrained devices.

## Implementation decisions

1. Mount the selected gallery scene only instead of one WebGL context per card.
2. Start with modest segments and profile before adding postprocessing.
3. Lazy-load Three.js and avoid allocations inside the loop.
4. Pause offscreen and release resources when closing the scene.

## Working source

Read [components/scene.tsx](../webcraft-shared/source/components/scene.tsx) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions.

The original workshop uses Three.js 0.180 and procedural builders. The external asset viewer separately loads licensed glTF, scanned PBR maps and HDRIs. Preserve the provenance of each corpus. See [objects.ts](../webcraft-shared/source/lib/objects.ts) for material and geometry ownership and [scene.tsx](../webcraft-shared/source/components/scene.tsx) for renderer lifecycle.

## Verify observable behavior

- One gallery has at most one active renderer.
- Hidden-tab and reduced-motion behavior are handled.
- The shell does not eagerly load Three.js.

## Scope

Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative.

Live example: https://webcraft-skill-library.undrgrnd.chatgpt.site/demos/3d

Version 2.0.0 · Original WEBCRAFT content · MIT