feat(stereo3d): Фаза 1 — камера и навигация (инерция, pan, пресеты, скриншот)

- инерция орбиты с затуханием; панорамирование (ПКМ/СКМ/Shift+ЛКМ, 2 пальца)
- орбита вокруг сдвигаемого таргета (_panOffset)
- overlay-тулбар: сброс вида + пресеты ракурса (Изо/Спереди/Сбоку/Сверху)
- тумблер авто-вращения с реальным засыпанием loop, fullscreen, снимок PNG
- a11y-атрибуты на кнопках; bump stereo.js?v=4

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Maxim Dolgolyov
2026-05-30 11:13:04 +03:00
parent 96a2097e70
commit 7c598d6430
4 changed files with 253 additions and 26 deletions
+36
View File
@@ -263,6 +263,42 @@
.st-fig-btn.active { border-color: var(--violet); color: var(--violet); background: rgba(155,93,229,.12); }
.st-fig-btn-wide { grid-column: span 2; }
/* ── 3D viewport view-controls overlay ── */
.st-view-toolbar {
position: absolute; top: 10px; right: 10px; z-index: 5;
display: flex; align-items: center; gap: 8px;
pointer-events: none; /* groups re-enable */
}
.st-view-group {
display: flex; align-items: center; gap: 2px;
padding: 3px; border-radius: 10px;
background: rgba(13,13,26,.72); backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,.10);
pointer-events: auto;
}
.st-view-preset {
padding: 4px 8px; border-radius: 7px;
background: transparent; border: none;
color: rgba(255,255,255,.62); font-size: .68rem; font-weight: 600;
cursor: pointer; white-space: nowrap; transition: all .12s;
}
.st-view-preset:hover { color: var(--violet); background: rgba(155,93,229,.10); }
.st-view-preset.active { color: var(--violet); background: rgba(155,93,229,.18); }
.st-view-btn {
display: flex; align-items: center; justify-content: center;
width: 28px; height: 28px; border-radius: 7px;
background: transparent; border: none; color: rgba(255,255,255,.62);
cursor: pointer; transition: all .12s;
}
.st-view-btn svg { width: 15px; height: 15px; }
.st-view-btn:hover { color: var(--violet); background: rgba(155,93,229,.10); }
.st-view-btn.active { color: var(--violet); background: rgba(155,93,229,.18); }
@media (max-width: 640px) {
.st-view-toolbar { top: 6px; right: 6px; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.st-view-preset { padding: 4px 6px; font-size: .64rem; }
.st-view-btn { width: 26px; height: 26px; }
}
.st-tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin-bottom: 4px; }
.st-tool-btn {
display: flex; align-items: center; gap: 5px;