@krox
аспирант, программист, исследователь

Как на WebGL сделать отображение точек с информацией на 3D модели?

Имеются ли какие-либо свободные движки на подобие three.js или же в нём есть возможность сделать добавление на отображаемую 3D модель точек, по нажатию на которые будет выводиться информация, добавленная на неё. Примером требуемого функционала обладает sketchfab.com - модель
533ddff5352b45a5bab2ab01e5b5ebe5.JPG

и сайт 3d.si.edu - модель
152798144eb74823ba27599878a58e35.JPG
Исходники смитсоновцев закрыты.

Каким ещё подобным образом можно реализовать требуемую функциональность и есть ли готовые решения?
P.S> Возможность встраивания sketchfab в собственный проект не подходит
Upd1: пользователь после загрузки модели должен иметь возможность САМ добавить нужное количество точек с описанием.
  • Вопрос задан
  • 1067 просмотров
Пригласить эксперта
Ответы на вопрос 3
MrGobus
@MrGobus
Иван
Схема примерно такая

Часть первая : Определение координат точки.
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

Теперь когда есть координаты все что осталось это нарисовать там что вам нужно и все =)
Ответ написан
@Eddy_Em
Проще подобные вещи сделать обычными "плавающими" блоками. Я, собственно, подписи так и делал: узнаем 2D-координаты на экране от webGL, затем рисуем там плавающий блок.
Ответ написан
svaa1982
@svaa1982
Web разработчик с трёхмерным уклоном
У blend4web есть отличный инструмент, называется anchors. Прямо в блендере создаёте объект Empty, подписываете как вам нужно и готово. В качестве примера у них есть демка с планетарием https://www.blend4web.com/ru/demo/planetarium/
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы