# План реализации — Геометрия 10 класс (стереометрия)

**Учебник:** Л. А. Латотин, Б. Д. Чеботаревский, И. В. Горбунова. Геометрия 10 (базовый и повышенный уровни). Минск, Адукацыя і выхаванне, 2020. 203 страницы.

**Объём курса:** 4 раздела, 14 параграфов, ~140 интерактивов, ~20 боссов + 4 финальных.

**КЛЮЧЕВАЯ ОСОБЕННОСТЬ:** это **стереометрия** — геометрия пространства. Для качества интерактивности **критически важно реализовать 3D-визуализацию через SVG-проекции**. Это самая большая техническая инвестиция курса.

---

## 0. Общая архитектура

### 0.1 Файлы

```
backend/src/db/migrations/
  021_geometry_10_hub.sql           -- hub + 4 ребёнка (раздела)

frontend/textbooks/
  geometry_10_hub.html              -- HUB-страница (4 карточки разделов)
  geometry_10_r1.html               -- Раздел 1 «Введение в стереометрию» (3 § + Финал)
  geometry_10_r2.html               -- Раздел 2 «Параллельность» (3 § + Финал)
  geometry_10_r3.html               -- Раздел 3 «Перпендикулярность» (4 § + Финал)
  geometry_10_r4.html               -- Раздел 4 «Координаты и векторы» (4 § + Финал)

frontend/js/
  stereo3d.js                       -- НОВАЯ библиотека 3D-проекций (см. §1 ниже)
  geom10_svg.js                     -- Адаптер: расширение GEOM7 для стереометрии
                                       (планарные хелперы — сечения, проекции на плоскость)
  stereo10-fx.js                    -- Эффекты комбо/анимации (как alg7-fx)

frontend/css/
  stereo10-fx.css                   -- анимации
```

### 0.2 Темы разделов

| Раздел | Тема | Основные цвета | Watermark |
|---|---|---|---|
| 1 — Введение в стереометрию | **blue** | `#2563eb` → `#93c5fd` | `△` |
| 2 — Параллельность | **emerald** | `#059669` → `#86efac` | `∥` |
| 3 — Перпендикулярность | **rose** | `#e11d48` → `#fda4af` | `⊥` |
| 4 — Координаты и векторы | **amber** | `#d97706` → `#fcd34d` | `→` |

---

## 1. **КРИТИЧЕСКАЯ БИБЛИОТЕКА:** `stereo3d.js` (~700 строк)

Без этой библиотеки сделать качественную стереометрию невозможно. План — **реализовать первой, до всех глав**.

### 1.1 Архитектура

Не использует Three.js или Canvas. **Чистый SVG с ручной проекцией 3D → 2D.**

```js
window.STEREO3D = {
  // Создать сцену с заданным размером SVG и проекцией
  Scene: function(W, H, opts) { ... },

  // Заранее заданные виды (как в учебнике)
  views: {
    CABINET:    { /* угол 30°, сжатие y по z в 0.5 */ },
    ISOMETRIC:  { /* классическая изометрия */ },
    PERSPECTIVE:{ /* небольшая перспектива для красоты */ }
  }
};

// Использование:
const scene = new STEREO3D.Scene(380, 320, {view:'CABINET'});
scene.addPolyhedron('cube', {center:[0,0,0], size:[2,2,2], color:'#2563eb'});
scene.addLabel('A', [-1,-1,-1]);
const svg = scene.render();
```

### 1.2 Класс `Scene`

```js
class Scene {
  constructor(W, H, opts) {
    this.W = W; this.H = H;
    this.center = [W/2, H/2];           // px-центр SVG
    this.scale = opts.scale || 40;       // 1 единица 3D = N px
    this.view = opts.view || 'CABINET';
    this.rotX = opts.rotX || 0;          // дополнительный поворот вокруг X
    this.rotY = opts.rotY || 0;          // поворот вокруг Y
    this.objects = [];                   // массив объектов сцены
  }

  // Проекция точки (x, y, z) → (xPx, yPx)
  project([x, y, z]) {
    // 1. Применяем поворот вокруг X, Y
    const [x1, y1, z1] = rotate3D([x, y, z], this.rotX, this.rotY);
    // 2. Применяем выбранную проекцию (CABINET / ISOMETRIC / PERSPECTIVE)
    let px, py;
    if (this.view === 'CABINET') {
      // Кабинетная: горизонтально x, вертикально z вверх, y уходит вглубь под 30° с сжатием 0.5
      const a = Math.PI / 6;  // 30°
      px = x1 + 0.5 * y1 * Math.cos(a);
      py = -z1 + 0.5 * y1 * Math.sin(a);  // SVG y вниз → инвертируем
    } else if (this.view === 'ISOMETRIC') {
      // Изометрическая: оси по 120°
      px = x1 * Math.cos(Math.PI/6) - y1 * Math.cos(Math.PI/6);
      py = -z1 + x1 * Math.sin(Math.PI/6) + y1 * Math.sin(Math.PI/6);
    }
    return [
      this.center[0] + this.scale * px,
      this.center[1] + this.scale * py
    ];
  }

  // Хелперы рисования
  drawPoint(p3d, opts) { ... }
  drawEdge(p1, p2, opts) { ... }      // отрезок с visible/dashed
  drawFace(points, opts) { ... }       // грань с fill, stroke, opacity
  drawArc3D(p1, p2, p3, opts) { ... }  // дуга в плоскости трёх точек

  // Готовые тела
  addPolyhedron(type, params) { ... }
  // type: 'cube' | 'box' | 'tetrahedron' | 'pyramid' | 'prism' | 'octahedron'
  // params: {center, size, vertices?, color, label, edgeColor?, hiddenStyle?}

  addPlane(point, normal, opts) { ... }  // плоскость по точке и нормали (рисуется ромбом-сектором)

  addLine3D(p1, p2, opts) { ... }        // прямая (бесконечная), отрезок (segment) или луч
  addAngleMark3D(vertex, p1, p2, opts) { ... }
  addParallelMark3D(p1, p2, opts) { ... }
  addPerpMark3D(vertex, p1, p2, opts) { ... } // маркер прямого угла

  // Главное: вычислить «видимые» и «невидимые» рёбра автоматически
  // На основании углов нормалей граней к направлению камеры
  computeVisibility() { ... }

  // Возвращает финальный SVG-фрагмент
  render() { ... }
}
```

### 1.3 Готовые предопределённые тела

**Куб:** `addPolyhedron('cube', {center:[0,0,0], size:2, label:'ABCDA₁B₁C₁D₁'})` — автоматически разместит вершины A, B, C, D снизу и A₁, B₁, C₁, D₁ сверху. Видимые рёбра — сплошные, невидимые (за телом) — пунктирные.

**Параллелепипед:** `addPolyhedron('box', {center, size:[a,b,c]})`.

**Тетраэдр:** `addPolyhedron('tetrahedron', {vertices:[A,B,C,D]})`.

**Призма n-угольная:** `addPolyhedron('prism', {n:6, baseRadius, height})`.

**Пирамида n-угольная:** `addPolyhedron('pyramid', {n:4, baseRadius, height, apex:[0,0,h]})`.

### 1.4 Опциональные слайдеры

Для интерактивных рисунков можно добавить под SVG два слайдера: «Поворот X» и «Поворот Y». Они вызывают `scene.rotX = …; scene.rotY = …; scene.update()` — пересчитывают и перерисовывают объекты.

### 1.5 Отрисовка плоскости

Плоскость в стереометрии изображают параллелограммом (ромбом). Хелпер:
```js
scene.addPlane(point, normal, {size:3, color:'#2563eb', opacity:0.18})
```
Рисует ромб с центром в `point`, лежащий в плоскости с нормалью `normal`, размером 3×3 единицы.

### 1.6 Анимации (пост-MVP)

Для «построения сечений» — пошаговое появление линий с CSS-анимациями.

---

## 2. Раздел 1 «Введение в стереометрию» (3 §)

**Тема:** blue. **Финал:** 4 босса. **Объём файла:** ~2400 строк.

### § 1. Пространственные фигуры

**Цель:** Знакомство с призмой, пирамидой, цилиндром, конусом, шаром. Терминология: грани, рёбра, вершины, диагональ.

**Рисунки (всё через `STEREO3D.Scene`):**

1. **Главный SVG: 5 основных тел в ряд** (640×220):
   - Шестиугольная призма / Пятиугольная пирамида / Цилиндр / Конус / Шар
   - Каждое тело — отдельная мини-сцена в одной строке
   - Подписи под каждым

2. **Многогранник с подписями элементов** (380×320):
   - Произвольный 7-гранник (например, шестиугольная призма)
   - Подписи: «Вершина», «Ребро», «Грань», «Диагональ»
   - Цветовая подсветка одного ребра, одной грани, одной вершины

3. **Изображение пространственной фигуры на плоскости** (380×260):
   - Пример с рис. 6 учебника: параллелограмм ABCD и треугольник PQR
   - Демонстрирует штриховую линию для невидимых отрезков
   - Подсветка видимых vs невидимых рёбер

4. **Призма прямая/наклонная** (560×280): два сравнительных рисунка.

5. **Правильная призма / правильная пирамида** (560×280): различие.

**Карточки теории (6):**
- 1.1 Плоские vs пространственные фигуры. Стереометрия.
- 1.2 Многогранники: грани, рёбра, вершины, диагональ.
- 1.3 Выпуклые и невыпуклые многогранники.
- 1.4 Призма: основание, боковые рёбра, грани. Виды.
- 1.5 Пирамида: основание, боковые рёбра, апекс.
- 1.6 Цилиндр, конус, шар — тела вращения.

**Интерактивы:**
1. **Узнай тело по описанию** — 8 заданий: «Тело с двумя равными n-угольными гранями и n прямоугольными боковыми гранями» → призма.
2. **Сосчитай элементы** — 6 заданий: для куба, тетраэдра, n-угольной призмы и пирамиды — сколько граней, рёбер, вершин. (Используем формулу Эйлера в качестве проверки.)
3. **3D-крутилка** — slider «поворот X», «поворот Y» для куба. Учащийся видит, как куб выглядит с разных сторон. Под рисунком — задание: «Сосчитай число видимых граней при текущем повороте». Динамическая проверка.
4. **Развёртка ↔ тело** — даны 4 развёртки, выбери, какая складывается в куб.

**Босс §1:** 5 этапов
- Сколько рёбер у шестиугольной призмы? (Ответ: 18)
- Сколько граней у тетраэдра? (4)
- Чем призма отличается от пирамиды? (выбор из вариантов)
- Сколько диагоналей у параллелепипеда? (4)
- Тело имеет 6 граней, 12 рёбер, 8 вершин. Что это? («куб» или «параллелепипед»)

---

### § 2. Прямые и плоскости

**Цель:** Аксиомы стереометрии и их следствия.

**Рисунки:**

1. **Аксиомы 1-3** (3 отдельных SVG по 320×260):
   - A1: «Через любые 3 точки, не лежащие на одной прямой, проходит единственная плоскость» — 3 точки A, B, C и плоскость через них.
   - A2: «Если две точки прямой лежат в плоскости, то и вся прямая лежит в плоскости» — прямая внутри плоскости.
   - A3: «Если две плоскости имеют общую точку, то они имеют общую прямую» — две пересекающиеся плоскости и линия пересечения.

2. **Следствия** (3 SVG по 320×260):
   - Через прямую и точку вне её проходит единственная плоскость.
   - Через две пересекающиеся прямые проходит единственная плоскость.
   - Через две параллельные прямые проходит единственная плоскость.

3. **Способы задания плоскости** — итоговая карточка-схема: 4 способа.

**Карточки (5):**
- 2.1 Аксиомы стереометрии.
- 2.2 Следствия из аксиом.
- 2.3 Способы задания плоскости.
- 2.4 Принадлежность точки прямой/плоскости — обозначения.
- 2.5 Иллюстрированные примеры применения аксиом.

**Интерактивы:**
1. **Какая аксиома?** — 8 заданий: рисунок + утверждение, выбор из A1/A2/A3.
2. **Можно ли провести плоскость?** — 6 заданий: даны элементы (2 точки, прямая, и т.д.), достаточно ли для определения плоскости?
3. **Сколько плоскостей?** — 5 заданий: через 4 точки, через 2 прямые и т.д.

**Босс §2:** 5 этапов
- Сколько плоскостей можно провести через 3 точки на одной прямой? (бесконечно)
- Через какие элементы можно провести единственную плоскость? (3 нек-н точки, прямая + точка вне, 2 пересек. прямые, 2 парал. прямые)
- Две плоскости пересекаются по чему? (по прямой)
- Сколько общих точек у 2 пересекающихся плоскостей? (бесконечно)
- Если 3 точки лежат на одной прямой, через них проходит ровно $?$ плоскостей. (бесконечно)

---

### § 3. Построения сечений многогранников

**Цель:** Метод сечений — найти многоугольник, получаемый при пересечении многогранника плоскостью.

**Рисунки:**

1. **Сечение куба плоскостью через 3 точки** (380×340):
   - Куб ABCDA₁B₁C₁D₁
   - 3 заданные точки M, N, P на разных гранях
   - Анимация: сначала появляются M, N, P; затем плоскость; затем пересечение проявляется как многоугольник (постепенно, ребро за ребром)

2. **3 классических случая сечений** (3 SVG по 280×280):
   - Треугольное сечение
   - Параллелограмм-сечение
   - Шестиугольное сечение (max для куба)

3. **Метод следов** (380×340):
   - Базовая плоскость (нижняя грань куба)
   - Плоскость сечения пересекает базовую — это след
   - Подсветка построения

**Карточки (4):**
- 3.1 Что такое сечение многогранника. Когда оно возможно.
- 3.2 Метод следов.
- 3.3 Метод параллельного переноса.
- 3.4 Сечения куба, призмы, пирамиды — основные виды.

**Интерактивы:**
1. **Какой многоугольник?** — 6 заданий: дан куб и 3 точки, выбери тип сечения (△ / □ / 5-угол / 6-угол).
2. **Построй сечение** (упрощённый: drag-and-drop вершин на рёбрах куба → правильная фигура).
3. **Найди след** — 5 заданий.

**Босс §3:** 5 этапов
- Может ли сечением куба быть шестиугольник? (да)
- Какое максимальное число сторон сечения куба? (6)
- Какое максимальное число сторон сечения треугольной пирамиды? (4)
- Если плоскость параллельна основанию пирамиды, сечение подобно $?$ (основанию)
- Сечение тетраэдра — это всегда $?$-угольник, где ? ≤ ? (3 или 4)

---

### ФИНАЛ РАЗДЕЛА 1 — 4 босса

- Босс 1: Элементы многогранников.
- Босс 2: Аксиомы и следствия.
- Босс 3: Сечения.
- Босс 4: Сборная задача.

Награда: ачивка «Введение в стереометрию пройдено!» + 100 XP.

---

## 3. Раздел 2 «Параллельность прямых и плоскостей» (3 §)

**Тема:** emerald. **Объём:** ~2200 строк.

### § 4. Взаимное расположение прямых в пространстве

**Цель:** 3 случая — пересекающиеся, параллельные, скрещивающиеся.

**Рисунки:**

1. **Три случая, side-by-side** (640×260):
   - Пересекающиеся прямые
   - Параллельные прямые
   - Скрещивающиеся прямые
   - В каждом — 3D-рисунок: пара прямых + плоскости (или одна общая) для иллюстрации

2. **Куб с примерами всех 3 типов** (380×340):
   - Подсветка пары рёбер AA₁ и BB₁ — параллельные
   - Подсветка пары AB и AD — пересекающиеся
   - Подсветка пары AB и CC₁ — скрещивающиеся
   - Цветовая кодировка

3. **Угол между скрещивающимися прямыми** (380×340):
   - Скрещивающиеся прямые a и b
   - Через точку B (точка на a₁) проводим a₁ ∥ a
   - Угол между a₁ и b — это угол между скрещивающимися

**Карточки (5):**
- 4.1 Три случая расположения прямых.
- 4.2 Определение скрещивающихся прямых.
- 4.3 Признак скрещивающихся.
- 4.4 Угол между скрещивающимися прямыми.
- 4.5 Расстояние между скрещивающимися прямыми (длина общего перпендикуляра).

**Интерактивы:**
1. **Определи тип** — 8 заданий с куба: пара рёбер → тип.
2. **Найди угол** — 5 заданий: куб + 2 указанных ребра, найди угол.
3. **3D-крутилка куба** с подсветкой пары — учащийся вращает фигуру, видит, что пара рёбер действительно скрещивается (не пересекается и не параллельна).

**Босс §4:** 5 этапов.

---

### § 5. Взаимное расположение прямой и плоскости

**Цель:** 3 случая — прямая лежит, пересекает, параллельна. Признак параллельности.

**Рисунки:**

1. **Три случая** (640×220).
2. **Признак параллельности** (380×320): прямая a параллельна прямой b ⊂ α (плоскость), и a ⊄ α ⇒ a ∥ α.
3. **Следствие** (380×280): если плоскость через прямую a ∥ α пересекает α, то линия пересечения параллельна a.

**Карточки (4):**
- 5.1 Три случая.
- 5.2 Признак параллельности.
- 5.3 Следствия.
- 5.4 Применение для построений в пространстве.

**Интерактивы:**
1. Сопоставь утверждение с случаем.
2. Применение признака.
3. Реальные конструкции: задачи на параллельность в кубе.

**Босс §5:** 5 этапов.

---

### § 6. Взаимное расположение плоскостей в пространстве

**Цель:** 2 случая — пересекаются, параллельны. Признак параллельности плоскостей.

**Рисунки:**

1. **Пересекающиеся плоскости** (380×280): угол между ними.
2. **Параллельные плоскости** (380×280).
3. **Признак параллельности** (380×320): если плоскость α содержит 2 пересекающиеся прямые, каждая из которых параллельна плоскости β, то α ∥ β.

**Карточки (4):**
- 6.1 Два случая.
- 6.2 Признак параллельности плоскостей.
- 6.3 Свойства параллельных плоскостей.
- 6.4 Линии пересечения двух параллельных плоскостей третьей плоскостью.

**Интерактивы:** 3 тренажёра.

**Босс §6:** 5 этапов.

---

### ФИНАЛ РАЗДЕЛА 2 — 4 босса. Награда + 100 XP.

---

## 4. Раздел 3 «Перпендикулярность» (4 §)

**Тема:** rose. **Объём:** ~3000 строк.

### § 7. Перпендикулярность прямой и плоскости

**Цель:** Определение, признак перпендикулярности прямой и плоскости.

**Рисунки:**

1. **Перпендикулярная прямая к плоскости** (380×340):
   - Плоскость α
   - Прямая l ⊥ α
   - Точка пересечения O
   - Все прямые α, проходящие через O, перпендикулярны l (помечены) — наглядно показано 4-6 таких прямых

2. **Признак перпендикулярности** (380×340):
   - Прямая l перпендикулярна двум пересекающимся прямым m и n в плоскости α
   - Вывод: l ⊥ α

**Карточки (5):**
- 7.1 Определение прямой, перпендикулярной плоскости.
- 7.2 Признак перпендикулярности (теорема).
- 7.3 Свойства: если l ⊥ α, то l ⊥ любой прямой в α.
- 7.4 Связь с параллельностью.
- 7.5 Алгоритм доказательства перпендикулярности.

**Интерактивы:** 3 тренажёра + 3D-куб с подсветкой перпендикуляра.

**Босс §7:** 5 этапов.

---

### § 8. Расстояния

**Цель:** Расстояние от точки до прямой / до плоскости; между параллельными плоскостями; между скрещивающимися прямыми.

**Рисунки:**

1. **Расстояние от точки до плоскости** (380×320):
   - Точка A над плоскостью α
   - Перпендикуляр AO к α
   - Длина AO — искомое расстояние

2. **Расстояние от прямой до плоскости** (когда прямая параллельна) (380×320).

3. **Расстояние между параллельными плоскостями** (380×320).

4. **Расстояние между скрещивающимися** (380×340):
   - Скрещивающиеся l и m
   - Общий перпендикуляр PQ
   - Длина PQ — расстояние

**Карточки (5):**
- 8.1 Расстояние от точки до прямой.
- 8.2 Расстояние от точки до плоскости.
- 8.3 Расстояние от прямой до параллельной плоскости.
- 8.4 Расстояние между параллельными плоскостями.
- 8.5 Расстояние между скрещивающимися прямыми.

**Интерактивы:** 5 тренажёров — задачи на куб с реальными вычислениями.

**Босс §8:** 6 этапов.

---

### § 9. Угол между прямой и плоскостью

**Цель:** Определение угла наклонной с плоскостью — угол между наклонной и её проекцией.

**Рисунки:**

1. **Угол наклонной** (380×340):
   - Точка A над плоскостью α
   - Перпендикуляр AH (H в α)
   - Наклонная AB (B в α)
   - Проекция HB
   - Угол ABH = угол между AB и α

2. **Теорема о 3 перпендикулярах** (380×340):
   - Если из основания H перпендикуляра AH в плоскости α провести прямую BC ⊥ HB, то AB ⊥ BC

**Карточки (4):** Определения, теорема о 3 перпендикулярах, алгоритм.

**Интерактивы:** 4 тренажёра с углами в кубе/пирамиде.

**Босс §9:** 5 этапов.

---

### § 10. Перпендикулярность плоскостей

**Цель:** Двугранный угол. Признак перпендикулярности плоскостей.

**Рисунки:**

1. **Двугранный угол** (380×320):
   - Две полуплоскости с общим ребром
   - Линейный угол (перпендикуляры из точки на ребре к каждой полуплоскости)

2. **Признак перпендикулярности** (380×320):
   - Если плоскость α содержит прямую l ⊥ β, то α ⊥ β.

**Карточки (5):** Двугранный угол, линейный угол, перпендикулярные плоскости, признак, свойства.

**Интерактивы:** 4 тренажёра.

**Босс §10:** 6 этапов.

---

### ФИНАЛ РАЗДЕЛА 3 — 5 боссов. Награда + 130 XP.

---

## 5. Раздел 4 «Координаты и векторы в пространстве» (4 §)

**Тема:** amber. **Объём:** ~2400 строк.

### § 11. Координаты в пространстве

**Цель:** Прямоугольная система координат в R³; точка (x, y, z); расстояние между точками.

**Рисунки:**

1. **3D-система координат** (380×340):
   - Три оси: Ox (вправо), Oy (вглубь), Oz (вверх)
   - Метки 1 на каждой оси
   - Точка M(2; 3; 4) с пунктирами к проекциям на оси

2. **Расстояние между точками** (380×320):
   - Две точки A и B в пространстве
   - Параллелепипед, построенный на разности координат
   - Формула AB = √(Δx² + Δy² + Δz²)

**Карточки (3):** ПДСК, координаты точки, формула расстояния.

**Интерактивы:** 3 тренажёра.

**Босс §11:** 5 этапов.

---

### § 12. Вектор. Действия над векторами

**Цель:** Вектор в пространстве, сложение, умножение на число, разложение по базису.

**Рисунки:**

1. **Сложение векторов** (380×280): правило треугольника + правило параллелограмма.
2. **Умножение на число** (380×220).
3. **Базисные векторы i, j, k** (380×340): три единичных вектора по осям.
4. **Разложение вектора** в базисе.

**Карточки (5):** Определения, операции, базис, координаты вектора, коллинеарность/компланарность.

**Интерактивы:** 4 тренажёра + 3D-визуализация.

**Босс §12:** 5 этапов.

---

### § 13. Скалярное произведение векторов

**Цель:** a · b = |a| · |b| · cos α; формула в координатах.

**Рисунки:**

1. **Геометрический смысл** (380×280): два вектора и угол между ними.
2. **Алгебраическое выражение** (380×220): a · b = x₁x₂ + y₁y₂ + z₁z₂.
3. **Свойства**: связь с перпендикулярностью (a · b = 0 ⇔ a ⊥ b).

**Карточки (4):** Определение, координатная формула, свойства, угол между векторами.

**Интерактивы:** 4 тренажёра.

**Босс §13:** 5 этапов.

---

### § 14. Применение векторов и координат

**Цель:** Решение геометрических задач векторно-координатным методом.

**Рисунки:**

1. **Уравнения плоскости и прямой в пространстве** (380×320).
2. **Угол между прямыми / плоскостями через векторы** (380×320).
3. **Расстояния через координаты** (380×320).

**Карточки (5):** Уравнения, углы, расстояния, примеры доказательств.

**Интерактивы:** 5 тренажёров — комплексные задачи с координатами.

**Босс §14:** 6 этапов.

---

### ФИНАЛ РАЗДЕЛА 4 — 4 босса. Награда + 120 XP + финальная ачивка «Геометрия 10 пройдена!»

---

## 6. HUB-страница `geometry_10_hub.html`

- 4 большие карточки разделов с прогрессом
- Общий прогресс курса
- «Продолжить с того места»
- Список ачивок
- Ссылка на справочный материал в виде раскрывающихся карточек:
  - Тела и их элементы (как на форзаце)
  - Прямые в пространстве
  - Прямая и плоскость
  - Две плоскости
  - Векторы

---

## 7. Готовые SVG-эскизы для библиотеки `stereo3d.js`

Перед реализацией каждого 3D-рисунка в коде должен быть **комментарий с эскизом**:

```js
/* === SVG: куб ABCDA₁B₁C₁D₁ для §4 ===
   Сцена: 380×340, view='CABINET', scale=40
   Вершины (в единицах):
     A = (-1, -1, -1)   A₁ = (-1, -1, +1)
     B = (+1, -1, -1)   B₁ = (+1, -1, +1)
     C = (+1, +1, -1)   C₁ = (+1, +1, +1)
     D = (-1, +1, -1)   D₁ = (-1, +1, +1)
   Видимые рёбра: AB, BC, CC₁, C₁D₁, D₁A₁, A₁A, BB₁, B₁C₁, A₁B₁, AD
   Невидимые: CD, DD₁ — пунктир
   Подсветка: ребро AA₁ красное (3px), ребро BB₁ красное — иллюстрация параллельности
*/
```

---

## 8. Волны реализации

| Волна | Содержание | Длительность |
|---|---|---|
| **W0** | Миграция БД + 5 stub-файлов (hub + 4 раздела). **Полная реализация `stereo3d.js`** (~700 строк) с тестами на cube/box/pyramid. | 2 сессии |
| **W1** | Раздел 1, §1 + §2 + Финал раздела 1. | 2 сессии |
| **W2** | Раздел 1, §3 (сечения) — сложная анимированная визуализация. | 1 сессия |
| **W3** | Раздел 2 полностью (3 §). | 2 сессии |
| **W4** | Раздел 2, Финал. | 1 сессия |
| **W5** | Раздел 3, §7 + §8. | 1 сессия |
| **W6** | Раздел 3, §9 + §10. | 1 сессия |
| **W7** | Раздел 3, Финал. | 1 сессия |
| **W8** | Раздел 4 полностью (4 §). | 2 сессии |
| **W9** | Раздел 4, Финал + Hub-страница. | 1 сессия |
| **W10** | Polish: мобильная адаптация, тёмная мода, регрессионное тестирование 3D. | 1 сессия |

**Итого:** ~15 сессий = курс «Геометрия 10» полностью реализован.

---

## 9. Ключевые принципы качества

1. **Все 3D-фигуры рендерятся через `stereo3d.js`** — единый стиль, видимые/невидимые рёбра, подписи.
2. **Каждый § имеет минимум 1 интерактивную 3D-крутилку** для интуитивного понимания.
3. **Анимации сечений** в §3 — постепенное появление линий пересечения для понимания построения.
4. **Все формулы валидируются** через KaTeX.
5. **Прогресс синхронизируется** с сервером.
6. **Темы**: light + dark, плавный переход.
7. **Mobile**: при ≤ 768px размер 3D-сцен уменьшается, slider'ы перепаковываются.
8. **Cache-bust**: `stereo3d.js?v=N`.

---

## 10. Особенности 3D-визуализации (важно)

### 10.1 Глубина и порядок отрисовки

В простом cabinet-проекции порядок отрисовки граней важен:
- Сначала задние грани (нормаль смотрит «от камеры»)
- Затем рёбра задних граней (пунктир)
- Затем рёбра передних граней (сплошные)
- Затем вершины с подписями

Это даёт «иллюзию объёма» без полноценного z-buffer.

### 10.2 Цветовая кодировка

- **Тёмно-синий (#1e3a8a)** — основная заливка тела
- **Светло-синий (#3b82f6, opacity 0.3)** — заливка плоскостей
- **Красный (#dc2626)** — подсветка выделенного элемента (ребро, диагональ, угол)
- **Зелёный (#10b981)** — параллельные элементы
- **Фиолетовый (#7c3aed)** — перпендикуляры
- **Серый пунктир** — невидимые рёбра

### 10.3 Подписи вершин

Подписи располагаются автоматически:
- Если вершина внизу — подпись чуть ниже-влево
- Если вершина вверху — подпись чуть выше-вправо
- Если ближняя — крупный шрифт (font-size 14)
- Если дальняя — мельче (font-size 12), с прозрачностью 0.8

### 10.4 Слайдеры поворота (опционально)

```html
<div class="rot-controls">
  <label>Rot X <input type="range" min="-90" max="90" value="0" oninput="...">  </label>
  <label>Rot Y <input type="range" min="-90" max="90" value="0" oninput="...">  </label>
</div>
```

Когда пользователь двигает слайдер, JS пересоздаёт SVG-сцену с новыми `rotX`/`rotY` и заменяет innerHTML контейнера.

---

## 11. Главное отличие от учебника Геометрии 7

| | Геометрия 7 (планиметрия) | Геометрия 10 (стереометрия) |
|---|---|---|
| Размерность | 2D | 3D через 2D-проекции |
| Библиотека | `geom7_svg.js` (~280 строк) | `stereo3d.js` (~700 строк) + `geom10_svg.js` |
| Рисунки | Простые, статичные | 3D с возможностью поворота, анимации сечений |
| Сложность концепций | Базовая | Требует пространственного воображения |
| Время на §  | ~400-600 строк | ~600-900 строк |
| Боссы | Простые арифметические | Часто буквенно-словесные (тип фигуры, признак) |

---

**Готово.** План охватывает все 14 параграфов, 4 раздела, ~140 интерактивов и ~24 босса. Объём итогового курса — около 10 000 строк HTML/JS на 4 раздела + ~700 строк библиотеки `stereo3d.js` + hub-страница.

**КРИТИЧНО:** библиотека `stereo3d.js` должна быть полностью реализована и протестирована в Волне 0 до начала Волны 1. Без неё качество визуализаций будет плохим, и придётся переделывать всё.

Реализация начинается с Волны 0 и движется последовательно по разделам.
