I already have a React-based whiteboard that handles all the usual 2D tools—PDF import, background colour swaps, freehand text, and more. I now need that same board to support true 3D interaction. The new assets are: mensuration shapes (cubes, cylinders, cones, spheres, etc.), classroom dice, and a rotatable globe. Each of them must respond to the standard whiteboard gestures so a teacher can: • spin or tilt the object smoothly with click-drag or touch • write or draw directly on the surface, exactly as they would on a 2D shape • trigger simple animations (e.g. dice roll, globe auto-rotate) without blocking other board actions All legacy 2D features must keep working when a 3D element is present; the board should feel like one seamless canvas, not two separate layers. I’m coding in React, so I expect you’ll lean on Three.js, React-Three-Fiber, or a comparable WebGL wrapper, but I’m open to whatever you consider best for performance and memory use. Please outline your approach to scene management, event handling between 2D and 3D layers, and how you’ll keep the bundle size reasonable. Deliverables 1. Plug-and-play React component(s) that render the specified 3D objects. 2. Integration hooks so existing whiteboard actions (PDF, background, text) work without modification. 3. A short README with build steps and an example page. I’m happy to spin up a repo invite and schedule a brief kickoff to walk you through the current codebase. Looking forward to seeing how you’ll bring this whiteboard into the third dimension.