Interactive rock and thin section visualization in 2D and 3D, directly in the browser.
RockViewer is an educational web application developed at the GEOPS laboratory (Géosciences Paris-Saclay) for the Earth Sciences curriculum of Université Paris-Saclay.
Its goal is to provide geology students with a lightweight, interactive tool to:
- Explore rock samples and thin sections virtually
- Measure, annotate, and analyze features
- Practice petrography and 3D spatial reasoning skills
- Generate visuals for lab reports or presentations
The app runs entirely in the browser and requires no installation.
🚀 Designed to support learning and teaching Earth Sciences in digital environments.
- Load JPEG/PNG images of thin-sections
- Pan, zoom, and switch between dark/light modes
- Magnifying glass (loupe) for high-resolution inspection
- Add labels and markers directly on the image
- Export annotated views as images (via
html2canvas)
📷 Example screenshot:
- Load 3D rock models in
.obj/.mtlformat - Use OrbitControls to rotate and zoom
- Accurate 1:1 scale
- Visualize axes, scale bars, bounding boxes
📷 Example screenshot:
- 📏 Distance and area measurement tools (2D and 3D)
- 🏷️ Annotation system with editable labels
- 🌓 Theme toggle: Dark/Light mode
- 📸 Export high-resolution screenshots (with overlays)
- A high-level, dynamic programming language
- A stylesheet language used to define the style of a web page
- A markup language used for structure and presentation
- Three.js – 3D rendering
- Vite – fast development build tool
- Vitest – unit testing
- html2canvas – screenshot capture
- Custom orbit and orthographic camera controls
- Dynamic scale bars and coordinate axes with real-time updates
- Magnifier component built with canvas overlays and clipping paths
- Measurement tools using DOM and 3D space projections
- Annotation system supporting drag, edit, and delete
.
├── public/ # Static assets (models, images, icons)
├── scripts/ # Core logic: tools, controls, utilities
├── src/
│ ├── components/ # UI components (viewers, panels, toolbars)
│ ├── styles/ # Custom styles
│ ├── main.js # Entry point
│ └── config.js # Default parameters
├── tests/ # Unit & UI tests
├── index.html # HTML entry point
├── vite.config.js # Build tool configuration
└── vitest.config.js # Testing setupDeveloped with the support of:
|
|
Maxime SC.
🌍 Earth Sciences student at Université Paris-Saclay
🔗 LinkedIn
📧 maxime.soares-correia@université-paris-saclay.fr
- Add multilingual support (EN/FR)
- Expand to mobile/tablet touch controls
- Add file format support for
.plyand.stl - Improve annotation export formats (e.g., GeoJSON)