Learn_System/docs/PLAN_GEOMETRY_10.md

План реализации — Геометрия 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.

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

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 Отрисовка плоскости

Плоскость в стереометрии изображают параллелограммом (ромбом). Хелпер:

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-рисунка в коде должен быть комментарий с эскизом:

/* === 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 Слайдеры поворота (опционально)

<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 и движется последовательно по разделам.