Technical Specification: Free Online 3D Model Viewer

Overview

This application is a high-performance, client-side 3D model viewing tool. It allows users to drag and drop common 3D formats (.gltf, .glb, .obj) into the browser to render them in a clean, professional, and interactive workspace.

Core Features

• Drag-and-Drop Interface: Intuitive file loading zone.
• Universal Format Support: Support for GLTF/GLB and OBJ/MTL formats using Three.js.
• Interactive Camera: Smooth orbit controls for zooming, panning, and rotating (Left-click rotate, right-click pan, scroll zoom).
• Display Controls:
  • Wireframe toggle mode.
  • Background color picker (focus on neutral grays and whites).
  • Lighting intensity slider.
• Scene Information: Display of model statistics (vertex count, face count) to help verify model quality.
• Privacy-First Design: Zero backend processing. All rendering happens via local GPU acceleration.

UI/UX Design

• Aesthetic: Clean, professional "SaaS" aesthetic. Light background (#F8FAFC), crisp shadows, and a blue primary action color (#2563EB) for buttons.
• Layout:
  • Header: Clean title and brief helper text.
  • Viewport: The main area is a full-bleed <canvas> element container.
  • Control Sidebar: A floating sidebar on the right (desktop) or bottom (mobile) containing all toggles and inputs.
• Animations: Subtle fade-in animations for the UI panels upon file load. Smooth camera interpolation when centering the model.

Technical Implementation Directives

1. Architecture: Everything must reside in a single HTML file using CDN links for Three.js (r150+).
2. State Management: Use in-memory variables only. Do NOT use localStorage or any browser storage mechanisms.
3. Compatibility:
   • Ensure the application is safe for sandboxed iframes (avoid accessing parent frame).
   • Replace any browser alerts with custom floating DOM notification elements.
4. Performance: Implement lazy loading for the Three.js library assets if possible, though CDN links are required.
5. Responsive Handling: Use CSS Grid/Flexbox to adjust the canvas aspect ratio based on device orientation (landscape vs. portrait).

Color Palette

• Background: #FFFFFF
• Surface: #F1F5F9
• Primary: #2563EB
• Text: #1E293B
• Accent/Border: #E2E8F0