SBIB 3D

A React + Three.js frontend client for the Small Bodies Image Browser (SBIB) API, designed to display footprint data on 3D models of celestial bodies.

Tech Stack

• React 18 - UI framework
• TypeScript - Type safety
• Vite - Build tool and dev server
• Three.js - 3D graphics library
• React Three Fiber - React renderer for Three.js
• @react-three/drei - Useful helpers for React Three Fiber

Getting Started

Prerequisites

1. Copy 3D Model Files: The model files need to be accessible at the paths stored in the database. Copy the model files from ../sbib-app/src/assets/ to public/assets/:

# From the sbib3d directory
mkdir -p public/assets
cp -r ../sbib-app/src/assets/* public/assets/

This ensures the database paths (e.g., /assets/ceres/ceres.obj) resolve correctly.

2. Start the Backend API: Make sure the sbib-api backend is running on http://localhost:9494

3. Configure API URL (optional): Create a .env file if you need to change the API URL:

cp .env.example .env
# Edit .env if needed

Install Dependencies

npm install

Development Server

npm run dev

The app will be available at http://localhost:5173

Build for Production

npm run build

Preview Production Build

npm run preview

Project Structure

sbib3d/
├── public/
│   └── assets/         # 3D model files (OBJ/MTL) - copy from sbib-app/src/assets/
├── src/
│   ├── components/
│   │   └── ModelViewer.tsx  # 3D model viewer component
│   ├── services/
│   │   └── api.ts      # API service for fetching target data
│   ├── App.tsx         # Root component
│   ├── main.tsx        # Entry point
│   └── index.css       # Global styles
├── index.html          # HTML template
├── package.json        # Dependencies
├── tsconfig.json       # TypeScript config
└── vite.config.ts      # Vite config

Features

• ✅ 3D model viewing with OBJ/MTL file support
• ✅ Dark space-themed background (blue/purple gradient)
• ✅ Mouse controls for zoom and rotation (OrbitControls)
• ✅ Automatic model centering and scaling
• ✅ API integration with sbib-api backend
• ✅ Currently configured for Ceres (target ID: 1)

Next Steps

1. ✅ Set up API service to connect to sbib-api backend
2. ✅ Implement 3D model loading (OBJ/MTL files)
3. ⏳ Implement footprint coordinate conversion and projection
4. ⏳ Add UI controls for selecting targets and images
5. ⏳ Implement spatial orientation handling for different target bodies