Схема примерно такая
Часть первая : Определение координат точки.
Raycasting (пересечение луча и модели) - позволяет найти ближайшую (иногда все) точки модели где луч ее пересек. Перебирает грани модели (обычно треугольники) и по сути сводится к задаче по пересечению луча и треугольника ноги которой растут к пересечению с плоскостью.
Математика вопроса описана тут:
www.ray-tracing.ru
Обычно луч выпускается по клику мыши координаты которой браузер отдает относительно window (нам кстати надо относительно канвы,
хе хе хе). Затем координаты клика переводим из пикселей в относительные (от -1 до 1), получаем 3D вектор добавив 1 по оси z, затем умножаем на инверсию произведения матриц проекции и камеры благодаря чему получаем вектор направления в мировых координатах и уже из него делаем raycating.
Не забываем что координаты зачастую получаем в мировых координатах и их желательно перевести в локальные хотя задачи бывают разные.
Часть вторая : Получение координат точки на канве (экране)
Для модели контрольные точки должны быть заданны в так называемых локальных координатах, то есть относительно модели. Для перевода их в экранные нужно провести следующий порядок вычислений.
матрица проекции * матрица трансформации модели * координаты точки
В некоторых зачах порядок матриц может меняться, например может быть добавлена матрица камеры, анимации и еще какие то преобразования. Кстати в разнообразных движках (например three.js) для подобных вычислений имеются уже готовые средства (но тут документация вам в помощь)
В результате получим координаты от -1 до 1 и все что останется это понять где они на канве
(v * 0.5 + 0.5) * canvaSize
если непонятно то имеется в виду
(v.x * 0.5 + 0.5) * c.width
(v.y * 0.5 + 0.5) * c.height
Теперь когда есть координаты все что осталось это нарисовать там что вам нужно и все =)
Простой
