Learn_System/plans/textbooks-11/PLAN_GEOMETRY_11.md

# План реализации: Геометрия 11 (Беларусь, Латотин/Чеботаревский, 2020)

**Источник:** `geometriya_11kl_latotin_rus_2020.pdf` (237 стр., 4 раздела, 11 §)
**Авторы:** Л. А. Латотин, Б. Д. Чеботаревский, И. В. Горбунова, О. Е. Цыбулько
**Издательство:** «Белорусская энциклопедия имени Петруся Бровки», 2020
**Уровень:** Базовый + повышенный.

> Это **стереометрия в выпускном классе**. Главный вызов — настоящие 3D-фигуры в браузере: призма, цилиндр, пирамида, конус, сфера, многогранники. Реализуем собственный мини-3D движок поверх SVG для полного контроля и нулевых зависимостей. Повторение (§8-§11) сделаем компактно — это обзор всей школьной геометрии.

---

## 🎯 Содержание учебника

### Раздел 1. Призма и цилиндр (§1–§2)
| § | Тема | Ключевые формулы |
|---|------|------------------|
| §1 | Призма | $S_{бок} = P \cdot l$ (наклонная), $S_{бок} = P_{осн} \cdot h$ (прямая), $V = S_{осн} \cdot h$. Прямая, правильная, наклонная. Параллелепипед, прямоугольный, куб. |
| §2 | Цилиндр | $S_{бок} = 2\pi R h$, $S_{полн} = 2\pi R(R+h)$, $V = \pi R^2 h$. Сечения, развёртка. |

### Раздел 2. Пирамида и конус (§3–§4)
| § | Тема | Ключевые формулы |
|---|------|------------------|
| §3 | Пирамида | $V = \tfrac{1}{3} S_{осн} h$, правильная: $S_{бок} = \tfrac{1}{2} P_{осн} \cdot l$ (l — апофема). Усечённая пирамида. |
| §4 | Конус | $S_{бок} = \pi R l$, $V = \tfrac{1}{3} \pi R^2 h$, развёртка — сектор. Усечённый конус. |

### Раздел 3. Сфера и шар (§5–§7)
| § | Тема | Ключевые формулы |
|---|------|------------------|
| §5 | Сфера | Уравнение $(x-a)^2 + (y-b)^2 + (z-c)^2 = R^2$, касательная плоскость. |
| §6 | Шар | $S = 4\pi R^2$, $V = \tfrac{4}{3}\pi R^3$. Шаровой сегмент, сектор, слой. Вписанные и описанные многогранники. |
| §7 | Правильные многогранники | 5 платоновых тел: тетраэдр, куб, октаэдр, додекаэдр, икосаэдр. Двойственность. |

### Раздел 4. Повторение всей геометрии (§8–§11)
| § | Тема | Объём |
|---|------|-------|
| §8 | Геометрические фигуры и их свойства (повторение планиметрии) | 156-188 стр. |
| §9 | Геометрические величины (площади, объёмы) | 156-188 стр. |
| §10 | Координаты и векторы (включая 3D-векторы) | 189-199 стр. |
| §11 | Геометрические построения | 200-219 стр. |

**Итого: 11 параграфов в 4 разделах.** § 1–7 — новый материал стереометрии. § 8–11 — итоговое повторение.

---

## 🎨 SVG-СТАНДАРТ 3D-КАЧЕСТВА

Это самое большое нововведение всего проекта. Нужен мини-3D движок поверх SVG.

### Мини-3D движок (хелпер `g3d.js` или встроен в каждый ch)

```js
// === Матрицы 3D-поворота ===
function matRotY(angle) {
  const c = Math.cos(angle), s = Math.sin(angle);
  return [[c, 0, s], [0, 1, 0], [-s, 0, c]];
}
function matRotX(angle) {
  const c = Math.cos(angle), s = Math.sin(angle);
  return [[1, 0, 0], [0, c, -s], [0, s, c]];
}
function matMul(A, B) { /* умножение матриц 3x3 */ }
function vecApply(M, v) {
  return {
    x: M[0][0]*v.x + M[0][1]*v.y + M[0][2]*v.z,
    y: M[1][0]*v.x + M[1][1]*v.y + M[1][2]*v.z,
    z: M[2][0]*v.x + M[2][1]*v.y + M[2][2]*v.z
  };
}

// === Проекция (изометрическая или перспективная) ===
function projectIso(v, cx, cy, scale) {
  // Изометрическая: x' = scale * (v.x - v.z), y' = scale * (v.y - (v.x + v.z)/2)
  const angle = Math.PI / 6;
  return {
    x: cx + scale * (v.x * Math.cos(angle) - v.z * Math.cos(angle)),
    y: cy - scale * (v.y - v.x * Math.sin(angle) - v.z * Math.sin(angle))
  };
}

// Перспективная проекция с виртуальной камерой
function projectPersp(v, camDist, cx, cy, scale) {
  const z = v.z + camDist;
  const k = scale / z;
  return { x: cx + v.x * k, y: cy - v.y * k };
}

// === Сцена ===
function createScene(W, H, opts) {
  return {
    W, H,
    cx: W / 2, cy: H / 2,
    scale: opts.scale || 60,
    rotX: opts.rotX || -0.3,    // наклон вниз
    rotY: opts.rotY || 0.6,     // поворот в сторону
    objects: [],
    render() { /* возвращает SVG content */ }
  };
}

// === Фигуры ===
function prismVertices(n, R, h) {
  // Правильная n-угольная призма с основанием R и высотой h
  const bottom = [], top = [];
  for (let i = 0; i < n; i++) {
    const a = 2 * Math.PI * i / n - Math.PI/2;
    bottom.push({ x: R * Math.cos(a), y: -h/2, z: R * Math.sin(a) });
    top.push({    x: R * Math.cos(a), y:  h/2, z: R * Math.sin(a) });
  }
  return { vertices: [...bottom, ...top], faces: prismFaces(n) };
}

function pyramidVertices(n, R, h) {
  const base = [];
  for (let i = 0; i < n; i++) {
    const a = 2 * Math.PI * i / n - Math.PI/2;
    base.push({ x: R * Math.cos(a), y: -h/2, z: R * Math.sin(a) });
  }
  const apex = { x: 0, y: h/2, z: 0 };
  return { vertices: [...base, apex], faces: pyramidFaces(n) };
}

function cylinderMesh(R, h, segments) {
  // segments = 32 (число делений окружности)
  // Возвращает массив отрезков образующих + 2 эллипса
}

function coneMesh(R, h, segments) { /* аналогично */ }

function sphereMesh(R, latSegs, lonSegs) {
  // Сетка из параллелей и меридианов
}

// === Скрытие невидимых рёбер (back-face culling + Z-sort) ===
function sortFacesByZ(faces, M) {
  return faces.sort((a, b) => {
    const za = avgZ(a, M), zb = avgZ(b, M);
    return zb - za;  // дальние сначала
  });
}

function isVisibleFace(face, M, camDist) {
  // Нормаль грани через cross product, проверка знака с z-вектором камеры
}

// === Renderer ===
function renderObject(obj, M, projector, opts) {
  const projected = obj.vertices.map(v => projector(vecApply(M, v)));
  let s = '';
  // Скрытые рёбра — пунктиром, видимые — сплошной линией
  obj.faces.forEach(face => {
    const points = face.indices.map(i => projected[i].x + ',' + projected[i].y).join(' ');
    const visible = isVisibleFace(face, M);
    s += `<polygon points="${points}" fill="${opts.fill}" fill-opacity="${visible ? 0.18 : 0}" stroke="${visible ? '#0f172a' : '#94a3b8'}" stroke-width="${visible ? 1.8 : 1}" stroke-dasharray="${visible ? '' : '4 3'}"/>`;
  });
  return s;
}
```

### Drag для вращения сцены

```js
function attachOrbitControl(svg, scene) {
  let dragging = false, lastX = 0, lastY = 0;
  svg.style.touchAction = 'none';
  svg.style.cursor = 'grab';
  function onDown(e) {
    dragging = true; svg.style.cursor = 'grabbing';
    const p = (e.touches ? e.touches[0] : e);
    lastX = p.clientX; lastY = p.clientY;
    e.preventDefault();
  }
  function onMove(e) {
    if (!dragging) return;
    const p = (e.touches ? e.touches[0] : e);
    const dx = p.clientX - lastX, dy = p.clientY - lastY;
    scene.rotY += dx * 0.012;
    scene.rotX += dy * 0.012;
    scene.rotX = Math.max(-1.2, Math.min(1.2, scene.rotX));  // clamp
    lastX = p.clientX; lastY = p.clientY;
    scene.redraw();
    e.preventDefault();
  }
  function onUp() { dragging = false; svg.style.cursor = 'grab'; }
  svg.addEventListener('mousedown', onDown, { passive: false });
  svg.addEventListener('touchstart', onDown, { passive: false });
  window.addEventListener('mousemove', onMove, { passive: false });
  window.addEventListener('touchmove', onMove, { passive: false });
  window.addEventListener('mouseup', onUp);
  window.addEventListener('touchend', onUp);
}
```

### Правила (обязательны с §1)

1. **Изометрическая проекция по умолчанию** (классическая для школьных стереометрических чертежей).
2. **Drag-to-rotate** на каждом 3D-SVG, slider'ы $\alpha$/$\beta$ — для точного контроля.
3. **Кнопки «Сверху», «Сбоку», «Спереди»** — мгновенный возврат к стандартным проекциям.
4. **Невидимые рёбра — пунктиром** (`stroke-dasharray="4 3"`), видимые — сплошной линией.
5. **Полупрозрачная заливка граней** (`fill-opacity="0.18"`) для понимания глубины.
6. **Подписи вершин** — снаружи фигуры (после проекции).
7. **Подсветка сечения** — другой цвет грани (например, розовый/розовый-полупрозрачный).
8. **Slider'ы — в учебных единицах** (рёбра 1..8 ед., высота 1..10 ед.), НЕ в пикселях.
9. **Цветовая кодировка:**
   - Основание призмы/пирамиды — розовое (`#fce7f3`, обводка `#db2777`)
   - Боковая поверхность — голубое (`#dbeafe`, обводка `#0891b2`)
   - Высота, апофема — красный (`#dc2626`) пунктиром
   - Радиус основания — фиолетовый (`#7c3aed`)
   - Сечения — оранжевое (`#fed7aa`, обводка `#ea580c`)
10. **KaTeX везде с двойным экранированием** в JS template literals.
11. **Эмодзи запрещены.** Только inline SVG.

### Типы 3D-SVG по темам

| § | Тема | Тип SVG |
|---|------|---------|
| §1 | Призма | Slider $n$ (3..8) + $h$. Правильная призма с возможностью вращения. Опционально: показ диагоналей основания, диагоналей призмы, высот граней. Развёртка (плоская). |
| §2 | Цилиндр | Slider $R$, $h$. Прозрачный цилиндр с осью. Сечения: осевое (прямоугольник), параллельное основанию (круг), наклонное (эллипс). Развёртка. Касательная плоскость. |
| §3 | Пирамида | Slider $n$ (3..6), $R$ (основание), $h$. Правильная пирамида с апофемой. Усечённая пирамида (slider $r$ верхнего основания). Подсветка апофемы. |
| §4 | Конус | Slider $R$, $h$. Конус с образующей и осью. Развёртка — сектор. Усечённый конус. Касательная плоскость по образующей. |
| §5 | Сфера | 3D-сфера с сеткой параллелей и меридианов. Slider $R$, центр $(a,b,c)$. Касательная плоскость в точке. |
| §6 | Шар | Шаровой сегмент, сектор, слой. Slider высоты сегмента. Шар, вписанный в куб; куб, вписанный в шар. |
| §7 | Правильные многогранники | 5 платоновых тел с возможностью переключения. Вращение, развёртки. Двойственность (тетраэдр-тетраэдр, куб-октаэдр, икосаэдр-додекаэдр). |
| §8 | Повторение планиметрии | 2D-фигуры из Геом 9 (без 3D). Компактные интерактивы. |
| §9 | Геометрические величины | Площади и объёмы — комбинация 2D и 3D в зависимости от темы. |
| §10 | Координаты и векторы | 3D-координатная система с осями. Векторы как стрелки в 3D. Сумма, разность, скалярное произведение. |
| §11 | Геометрические построения | 2D-построения циркулем и линейкой (как в Геом 9). |

---

## 🚀 ПОРЯДОК РЕАЛИЗАЦИИ

### Phase 0: Архитектура (фундамент)
- `geometry_11_hub.html` skeleton (палитра **cyan/sky**, чтобы отличить)
- `geometry_11_ch1.html` (§1-2 Призма + Цилиндр)
- `geometry_11_ch2.html` (§3-4 Пирамида + Конус)
- `geometry_11_ch3.html` (§5-7 Сфера + Шар + Правильные многогранники)
- `geometry_11_ch4.html` (§8-11 Повторение)
- Миграция `023_geometry_11_hub.sql` (slug `geometry-11`, sort_order 10)
- Мини-3D движок (`g3d` встроен в каждый ch как глобальный скрипт)
- KaTeX CDN, CSS POLISH, ICONS из geom9_ch4

### Phase 1: Раздел 1 «Призма и цилиндр» (2 §) — 3 волны
- **Wave 1**: §1 «Призма». 3 теории + 4 интерактива:
  1. **3D-конструктор призмы**: slider $n$ (3..8), $a$ (сторона), $h$ (высота). Drag-to-rotate. Развёртка по кнопке.
  2. **Калькулятор площадей и объёма**: ввод $n, a, h$ → $S_{осн}, P, S_{бок}, S_{полн}, V$ с пошаговым выводом.
  3. **DnD-сортер**: фигуры → типы (правильная / прямая / наклонная / параллелепипед / куб).
  4. **Тренажёр**: 6 задач на $V, S$ призмы.
- **Wave 2**: §2 «Цилиндр». 3 теории + 4 интерактива:
  1. **3D-конструктор цилиндра**: slider $R$, $h$. Drag-to-rotate. Сечения: осевое, параллельное, наклонное (slider угла наклона плоскости).
  2. **Калькулятор**: $S_{бок}, S_{полн}, V$.
  3. **Квикфайр «Какое сечение?»**: какая фигура получится — круг / эллипс / прямоугольник.
  4. **Тренажёр**.
- **Wave 3**: Финал раздела 1 (4 mini-шпаргалки + 5 боссов + ачивка «Мастер призмы и цилиндра»).

### Phase 2: Раздел 2 «Пирамида и конус» (2 §) — 3 волны
- **Wave 1**: §3 «Пирамида». 3D-конструктор с slider'ом $n$, $R$, $h$. Подсветка апофемы. Усечённая пирамида.
- **Wave 2**: §4 «Конус». 3D-конус с осью, образующей. Развёртка-сектор с slider'ом угла раскрытия. Касательная плоскость.
- **Wave 3**: Финал раздела 2 (5 боссов + ачивка «Мастер пирамиды и конуса»).

### Phase 3: Раздел 3 «Сфера, шар, многогранники» (3 §) — 4 волны
- **Wave 1**: §5 «Сфера». 3D-сфера с сеткой параллелей/меридианов. Касательная плоскость в точке. Уравнение сферы в координатах. Slider центра $(a,b,c)$ и $R$.
- **Wave 2**: §6 «Шар». Площадь поверхности, объём. Шаровой сегмент/сектор/слой. Вписанные и описанные многогранники.
- **Wave 3**: §7 «Правильные многогранники». 5 платоновых тел с переключателем. Свойства каждого. Двойственность.
- **Wave 4**: Финал раздела 3 (5 боссов + ачивка «Мастер сфер»).

### Phase 4: Раздел 4 «Повторение» (4 §) — компактно, 3 волны
- **Wave 1**: §8 «Планиметрия» + §9 «Площади и объёмы». Каждый — 2 теории + 3 интерактива (без 3D). Это обзор, не углубление.
- **Wave 2**: §10 «Координаты и векторы 3D». 3D-визуализатор векторов (стрелки в координатной системе). Slider'ы координат вектора. Скалярное произведение, угол.
- **Wave 3**: §11 «Построения» + Финал раздела 4 (3 боссов на каждое §).

### Phase 5: Финал всего курса
- Итоговая шпаргалка по 4 разделам.
- **9 интегрированных боссов** (геометрия 11 объёмная — больше боссов):
  1. **Призма + Цилиндр**: цилиндр вписан в правильную 6-угольную призму...
  2. **Пирамида + Сечение**: найти угол наклона апофемы.
  3. **Конус + Развёртка**: найти угол сектора по $R$ и $l$.
  4. **Шар + Многогранник**: вписать шар в куб.
  5. **Сфера + Координаты**: уравнение касательной плоскости.
  6. **Многогранники + Объёмы**: найти объём октаэдра через куб.
  7. **3D-векторы**: скалярное произведение, угол.
  8. **Параллелепипед + Диагональ**: $d^2 = a^2 + b^2 + c^2$.
  9. **Магистр стереометрии**: синтез всех формул.
- Ачивка «Магистр геометрии 11» + 100 XP бонус + confetti.
- Кнопка «К каталогу учебников».

---

## 📦 Структура каждого § (стандарт)

То же, что в Геом 9 / Алгебра 9 / Алгебра 11:
- 3 теоретических карточки (`makeCard`)
- 4 интерактива (один из них — 3D-конструктор, остальные могут быть 2D-калькуляторы, DnD, квикфайр, тренажёр)
- Кнопка «Я прочитал § (+10 XP)»
- Прогресс/XP: IV1 15%/10XP, IV2 15%/10XP, IV3 25%/15XP, IV4 25%/15XP, чтение 30%/10XP

### Финал раздела
- 4 mini-шпаргалки (по §) с ключевыми формулами
- 5 боссов (каждый +10 XP, +18% к `finalN`)
- Ачивка `rN_done` при 5/5 (+50 XP бонус)
- Кнопка к следующему разделу

---

## 📊 Оценка объёма

| Раздел | § | Особенности | LOC |
|--------|---|-------------|-----|
| Phase 0: skeleton | — | 4 ch + hub + 3D-движок | 1500 |
| Раздел 1 (§1-2) | 2 | Призма, цилиндр — главный 3D | 6000 |
| Раздел 2 (§3-4) | 2 | Пирамида, конус | 5500 |
| Раздел 3 (§5-7) | 3 | Сфера, шар, многогранники | 8000 |
| Раздел 4 (§8-11) | 4 | Повторение — компактно | 6000 |
| Финал курса | — | 9 боссов | 1200 |
| **Итого** | **11** | | **~28 000 LOC** |

Это больше, чем Геом 9 (~26K LOC), из-за 3D-движка и стереометрии.

---

## ⚠️ Критические правила

### ❌ НЕ делать
- **3D в пиксельных координатах**. Вершины фигур — всегда в учебных единицах, проекция масштабирует к пикселям.
- **«Магические числа» в матрицах поворота**. Всё через `matRotX`, `matRotY`, `matMul`.
- **Слайдеры рёбер $a$ от 40 до 150**. Только в единицах: $a \in [1; 8]$.
- **Drag без `passive: false`** — будет глючить на тач-устройствах.
- **Hidden surface removal на глаз** — используем sort by avg-Z или back-face culling.
- **Подписи вершин внутри фигуры** — всегда снаружи, после проекции.
- **Сечения с пересечениями граней без проверки** — может быть некрасиво. Проверяем алгоритм.

### ✅ Обязательно
- **Drag-to-rotate** на каждом 3D-SVG (не только slider'ы).
- **3 предустановленные кнопки проекции** (сверху/сбоку/спереди).
- **Slider'ы в учебных единицах** с разумным масштабом проекции.
- **JS parse-check** после каждого Wave.
- **KaTeX-аудит** через grep regex после каждого Wave.
- **3D-движок — общий файл `js/g3d.js`** или встроен в каждый ch (предпочтительно общий, чтобы не дублировать).
- **Все builder-функции в registry — НЕ stub'ы** в конце Wave финала.

---

## 🎬 Запуск

**Phase 0**: skeleton 4 ch-файлов Геом 11 + hub + миграция + мини-3D движок.
Палитра: **cyan/sky** (свежая, отличается от geom-9 розовой/rose).

После Phase 0 → Phase 1 Wave 1 (§1 Призма — самая первая 3D-фигура).

После завершения всех 5 Phase Геометрии 11 — план двух 11-классов завершён.