---
name: scroll-3d
description: "Drive a bounded 3D presentation from local section scroll progress. Use for scroll, camera, timeline."
---

# 3D от скролла

Drive a bounded 3D presentation from local section scroll progress.

## Implementation decisions

1. Compute and clamp section progress to 0..1.
2. Interpolate authored rotations or camera positions continuously.
3. Keep actions and text in semantic DOM.
4. Provide a static composition for reduced motion.

## 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

- Scrolling upward reverses the timeline.
- The final section releases normally.
- The object cannot move behind the camera.

## 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