Мне нужно создать трехмерную коробку (прозрачную) и поместить в нее другие трехмерные фигуры, такие как цилиндры и коробки. Все они должны отображаться динамически на основе данных, извлеченных из базы данных. 3D-фигуры внутри должны соответствовать краям основного блока, и их положение будет определяться данными, поступающими из БД. Следует избегать любых столкновений, и 3D-боксу должно быть разрешено вращательное взаимодействие, чтобы обеспечить визуализацию с разных точек зрения. При вращении все трехмерные фигуры внутри должны соответствовать перспективе основного блока и их начальным позициям.
В этом плане мне нужна помощь, чтобы определить: каков наилучший и легкий способ сделать это для приложения React?
Я попробовал CSS 3D Transforms. Тем не менее, это не легко собрать все трехмерные геометрические фигуры вместе без какого-либо столкновения или не вижу проблем, когда весь набор фигур повернут. По этой ссылке я следую: https://3dtransforms.desandro.com/box,, чтобы дать представление о том, что я ищу.
Заранее спасибо!
ОБНОВЛЕНИЕ: Это некоторые из фотографий того, что я пытаюсь сделать с помощью CSS 3D-преобразования. Тем не менее, геометрические координаты не организованы, чтобы позволить идентификации шаблона для автоматического создания форм. Кроме того, позиция внутренних фигур не подходит для всех точек зрения, что можно увидеть на нижней точке .