JavaScript: Вывести в браузер glTF модель с иерархией (через Three.js)

3 000 руб. за проект
12 октября 2019, 20:57 • 5 откликов • 58 просмотров
Есть модель этажа здания в формате glTF (вышлю по запросу).

Нужно пользуясь движком Three.js вывести эту модель на страничку (с возможностью мышкой крутить туда-сюда и приближать-отдалять). Слева от модели нужно любым компонентом для отрисовки деревьев нарисовать иерархию этой модели (в файле модели уже содержатся нормальные названия всех объектов и отношения parent-child между ними).

Далее, кликаем на элементе дерева объектов - подсвечивается соответствующий объект в 3D-виде. И наоборот, кликаем на объект на 3D-виде, подсвечивается соответствующий объект в дереве объектов.

Вот как загружать формат glTF в Three.js:
https://github.com/mrdoob/three.js/blob/master/examples/webgl_loader_gltf.html

Как подсвечивать объекты под мышкой:
https://threejs.org/examples/#webgl_interactive_cubes

Вот в этой статье посередине есть код, который позволяет строить иерархию объектов из glTF:
https://threejsfundamentals.org/threejs/lessons/threejs-load-gltf.html

По идее, задача решается в пару-тройку страничек кода, если вы раньше с Three.js работали.
Срок выполнения - 3 дня.