# План реализации — Геометрия 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
``` Когда пользователь двигает слайдер, 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 и движется последовательно по разделам.