我需要创建一个3D盒子（透明）并在其中放入另一个3D形状，如圆柱体和盒子。所有这些都需要根据从数据库获取的数据动态呈现。内部的3D形状需要尊重主盒的边缘，它们的位置将由来自DB的de数据确定。必须避免任何碰撞，并且必须允许3D框进行旋转交互以允许来自不同视点的可视化。旋转时，内部的所有3D形状必须遵循主框的透视图及其初始位置。
从这个角度来看，我需要帮助来确定：为React应用程序执行此操作的最佳和最轻松的方法是什么？
我尝试过CSS 3D变换。然而，将所有3D几何形状放在一起而没有任何碰撞并且在旋转所有形状组时没有看到问题并不容易。这是我关注的链接：https://3dtransforms.desandro.com/box，以便了解我正在搜索的内容。
提前致谢！
更新：这是我试图用CSS 3D变换做的一些图片。然而，几何坐标没有被组织以允许识别图案以自动生成形状。此外，position of inner shapes对所有观点都不利，因为有可能在bottom point of view.中看到
