# План реализации: Геометрия 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 += ``; }); 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-классов завершён.