Разработать ThreeJS приложение отображения GLTF модели на веб странице

5 000 руб. за проект
01 мая 2022, 22:29 • 10 откликов • 45 просмотров
Разработать страницу отображения GLTF модели с использованием ThreeJS с возможностями построения пользователем линий измерения расстояния между точек.

Критерии результата:
  1. Загрузка и отображение GLTF Модели с использованием ThreeJS GLTFLoader.
  2. Отображении в div блоке с id "container"
  3. Поддержка отображения и управления множеством GLTF Моделей
  4. Использование OrthographicCamera с позиционированием после загрузки страницы таким образом, чтобы были видны все модели в одном окне (Как вариант - создание Bounding box).
  5. Управление положением камеры аналогично ThreeJS примеру -> loader / gltf / compressed https://threejs.org/examples/#webgl_loader_gltf_co...
  6. Освещение со всех сторон
  7. Фон белый
  8. Цвет модели серый
  9. Цвет ребер модели черный
  10. Отображение куба положения с линиями векторов декартовой системы координат в правом верхнем углу (как на макете https://jsjxym.axshare.com/). При клике на соответствующую плоскость куба производиться поворот камеры на соответствующую плоскость отображения модели.
  11. Создание пользователем линий измерения между двумя точками аналогично примеру https://sbcode.net/threejs/measurements/. При выборе начальной и конечной точки линии измерения, курсор должен привязываться к ближайшей крайней точке, середине ребра, центру окружности, линии ребра. Привязка курсора начинает действовать в радиусе 10px от курсора до точки. Привязка к определенным элементам отключается через блок "привязка курсора" в левом верхнем углу (как на макете https://jsjxym.axshare.com/). После создания линии измерения автоматически создаются 3 линии параллельно соответствующей оси координат для отображения абсолютной разности расстояния между начальной и конечной точкой линии измерения. При расстоянии между начальной и конечной точкой равной 0 (точки находятся на одной прямой по оси) соответствующая линия разности точек по оси координат не отображается. Пример отображения линии измерения в плоскости параллельной оси Z в файле "ExampleMeasuring.png" и после клика на макете https://jsjxym.axshare.com/.
  12. Удаление всех линий измерения сделанных пользователем при клике на кнопку "Удалить все линии". Кнопка появляется в вверху в центре окна при наличии как минимум одной линии измерения.
  13. Итоговый код JavaScript должен быть в отдельном файле и подключаться к html через тег script.
Файлы
Поделиться
Отзывы
R50 222fae9ce529e4fd0bf6460853e08bef
Виктор Серегичев
Заказчик
Благодарю Александра за отличную работу. Все четко, грамотно и в срок. Уже на этапе отклика на заявку был виден профессиональный подход. Как минимум в задачах с WebGL (TreeJS) рекомендую!
2 года назад
R50 c501adc24cb16fb34facabc1e4a2572d
Александр Мальков
Фрилансер
Виктор Сергеевич доступно и подробно описывает задачу, предоставляет дополнительные файлы к проекту, сам разбирается в технологи, по которой предлагает задание Three.js (WebGL). Комфортное сотрудничество на 5+.
2 года назад