Разработать ThreeJS приложение отображения GLTF модели на веб странице
- Язык разработки: JavaScript ES6 + HTML5
- Ожидаемый визуальный результат отображения html страницы по ссылке https://jsjxym.axshare.com/
- GLTF Модель доступна по ссылке https://www.dropbox.com/sh/dxjxmsi56rjrnej/AACyAv5...
- Загрузка и отображение GLTF Модели с использованием ThreeJS GLTFLoader.
- Отображении в div блоке с id "container"
- Поддержка отображения и управления множеством GLTF Моделей
- Использование OrthographicCamera с позиционированием после загрузки страницы таким образом, чтобы были видны все модели в одном окне (Как вариант - создание Bounding box).
- Управление положением камеры аналогично ThreeJS примеру -> loader / gltf / compressed https://threejs.org/examples/#webgl_loader_gltf_co...
- Освещение со всех сторон
- Фон белый
- Цвет модели серый
- Цвет ребер модели черный
- Отображение куба положения с линиями векторов декартовой системы координат в правом верхнем углу (как на макете https://jsjxym.axshare.com/). При клике на соответствующую плоскость куба производиться поворот камеры на соответствующую плоскость отображения модели.
- Создание пользователем линий измерения между двумя точками аналогично примеру https://sbcode.net/threejs/measurements/. При выборе начальной и конечной точки линии измерения, курсор должен привязываться к ближайшей крайней точке, середине ребра, центру окружности, линии ребра. Привязка курсора начинает действовать в радиусе 10px от курсора до точки. Привязка к определенным элементам отключается через блок "привязка курсора" в левом верхнем углу (как на макете https://jsjxym.axshare.com/). После создания линии измерения автоматически создаются 3 линии параллельно соответствующей оси координат для отображения абсолютной разности расстояния между начальной и конечной точкой линии измерения. При расстоянии между начальной и конечной точкой равной 0 (точки находятся на одной прямой по оси) соответствующая линия разности точек по оси координат не отображается. Пример отображения линии измерения в плоскости параллельной оси Z в файле "ExampleMeasuring.png" и после клика на макете https://jsjxym.axshare.com/.
- Удаление всех линий измерения сделанных пользователем при клике на кнопку "Удалить все линии". Кнопка появляется в вверху в центре окна при наличии как минимум одной линии измерения.
- Итоговый код JavaScript должен быть в отдельном файле и подключаться к html через тег script.