Onshape 3D Viewer

React + Vite application that visualizes 3D models exported from Onshape using Three.js via @react-three/fiber.

Features

• Upload GLB, GLTF, OBJ, or STL files and preview them instantly.
• Auto-centering and auto-scaling based on the model bounding box.
• PBR-ready lighting, HDRI-style environment, shadow-catching ground plane.
• Smooth OrbitControls with camera reset.
• Loading overlay to indicate progress.
• Parts inspector panel that lists every mesh/component with editable colors.
• Placeholder example-model.glb bundled in public/ so the viewer always boots with content.

Getting Started

npm install
npm run dev

Then open the URL printed in the terminal (usually http://localhost:5173).

Usage

1. Export your Onshape part/assembly as GLB/GLTF/OBJ/STL.
2. Drag the file into the upload dropzone or click “Browse files”.
3. Interact with the model using OrbitControls (scroll to zoom, left-drag to orbit, right-drag to pan).
4. Use the “Reset Camera” button anytime to snap back to the default view.

Project Structure

src/
  components/
    Canvas3D.jsx       # Three.js canvas, lighting, controls, auto-normalization
    ModelLoader.jsx    # File upload UI / drag-and-drop
  utils/
    modelLoaders.js    # GLB/GLTF/OBJ/STL loader helpers
  App.jsx              # Application shell + layout
  main.jsx             # React entry point
  styles.css           # Global styles + layout
public/
  example-model.glb    # Placeholder model visible on first load

Feel free to replace public/example-model.glb with any other default asset. Just keep the filename consistent or update the path inside src/App.jsx.