Refine AI-Generated 3D Product Viewer

I have a single-file 3D web application—HTML, CSS and JavaScript wrapped together, powered by Three.js—that was produced automatically by an AI. It already loads a model and acts as a simple product viewer, but the code is tangled and brittle. Your task is to turn that rough draft into production-ready front-end code so the AI can learn from a clear, reliable example.

You will keep the existing look and behaviour (rotate, zoom, pan) while restructuring everything for readability, maintainability and speed. That means extracting logical modules, naming things cleanly, removing dead blocks, tightening asset loading, adding graceful error handling and making sure the viewer stays fluid on a mid-range laptop. Inline comments explaining key changes are important because the revised file will feed back into the model’s training set.

Deliverables
• A polished version of the application (single file or sensibly split assets) that runs instantly in any modern browser
• A concise markdown note outlining the main refactorings, performance tweaks and any libraries or settings you introduced

Acceptance criteria
• Original interactions work flawlessly and linting (ESLint standard config) reports no errors
• Frame rate holds 60 fps with the supplied test model
• Code structure is clear enough that another developer can extend features without guesswork

If you have a track record of taming messy WebGL or Three.js projects, I’m eager to review a sample of your clean-ups and get this viewer shining.