Convert logo bug to animated svg

I have an SVG logo made from flat vector paths that visually represents a 3D cube/mark. I do **not** want a simple CSS `rotateX()` animation of the flat SVG, because that just flips a flat image. I need someone to rebuild or reinterpret the logo as an actual 3D object, then animate it rotating around a horizontal X-axis through the center of the mark. The animation should look like the logo/cube is truly rotating in 3D space, not just being skewed or flattened. Requirements: * Use my existing SVG as the visual reference. * Recreate the mark as separate 3D faces/planes or shallow extruded geometry. * Rotate the object 360 degrees around the X-axis on click. * Export it in a web-friendly format. * Final deliverable should be easy to embed on a website. * Ideally provide HTML/CSS/JS implementation or a React-compatible version. * Animation should be smooth, lightweight, and not a video/GIF. * It should preserve the clean vector/logo look. * It should work well at small sizes, like a logo icon. Preferred approaches: 1. **Three.js / WebGL** Best option if this needs to be real 3D in the browser. The SVG can be converted into shapes, extruded slightly, placed in 3D space, and animated with a click event. 2. **Spline** Good option if you are more of a designer/animator. Rebuild the logo in Spline as a 3D object, animate rotation, and export for web. 3. **Blender + Three.js export** Good option if you are a true 3D designer. Build the object in Blender, export as GLB/GLTF, then wire it up with Three.js for web interaction. Please do **not** only apply CSS transform `rotateX()` to the SVG. I already tried that and it is not the effect I want. I need the logo to be constructed as a real 3D object or at least convincingly faked with separate 3D layers/faces. Please include examples of previous interactive web-based 3D logo animations you have done.