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

Константин6 лет в сервисе
Данные заказчика будут вам доступны после подачи заявки
11.10.2019

Есть модель этажа здания в формате 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 работали.