Maxim Dolgolyov
cd11b2aec6
PLAN_ALGEBRA_10.md (45 KB): - 3 главы, 22 параграфа (тригонометрия + корень n-й степени + производная) - Новая библиотека alg10_svg.js с модулями tri / func / nthRoot - Темы: teal / violet / green - ~140 интерактивов, 25 боссов, 11 волн реализации - Заранее спроектированы все SVG-рисунки (координаты, цвета, подписи) PLAN_GEOMETRY_10.md (39 KB): - 4 раздела, 14 параграфов (стереометрия + векторы) - КРИТИЧЕСКАЯ библиотека stereo3d.js (~700 строк): * Класс Scene с проекциями (CABINET / ISOMETRIC) * Предопределённые тела (cube / box / tetrahedron / pyramid / prism) * Плоскости, прямые, углы в 3D * Слайдеры поворота X/Y для интерактивных рисунков * Авто видимые/невидимые рёбра - Темы: blue / emerald / rose / amber - ~140 интерактивов, 24 босса, 11 волн реализации - Анимации сечений многогранников в §3 раздела 1
735 lines
38 KiB
Markdown
735 lines
38 KiB
Markdown
# План реализации — Геометрия 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 и движется последовательно по разделам.
|