Skip to content

GETTING_STARTED.md

Latest commit

 

History

History
132 lines (94 loc) · 3.15 KB

GETTING_STARTED.md

File metadata and controls

132 lines (94 loc) · 3.15 KB

Getting Started with HueGraphics

This guide will help you get the entire stack running.

Prerequisites

  • Node.js 18+ and npm
  • .NET 8 SDK
  • Rust toolchain (cargo)
  • A 3D model file (.glb or .gltf format)

Quick Start (3 Steps)

1. Start the React Client

cd src/client
npm install
npm run dev

Client will be available at http://localhost:5173

2. Generate Point Cloud Data

cd src/model_parser

# Build the tool (first time only)
cargo build --release

# Convert your 3D model
./target/release/model_parser \
  --input /path/to/your/model.glb \
  --output ../../pointcloud-data/my-model \
  --format ept \
  --point-count 50000 \
  --strategy area-weighted

This creates:

pointcloud-data/
└── my-model/
    ├── ept.json              # Metadata
    ├── ept-data/            # Binary tiles
    └── ept-hierarchy/       # Octree structure

3. Start the Backend API

cd src/backend/HueGraphics.API
dotnet run

API will be available at http://localhost:5000

Verify Everything Works

  1. Check API - Visit http://localhost:5000/swagger
  2. Test endpoint - GET http://localhost:5000/api/pointcloud
    • Should return list of point clouds
  3. Check specific model - GET http://localhost:5000/api/pointcloud/my-model/metadata
  4. Test EPT data - GET http://localhost:5000/api/pointcloud/my-model/ept.json

Connect Client to API

Update your React client to fetch from the API:

// In your component
useEffect(() => {
  fetch('http://localhost:5000/api/pointcloud')
    .then(res => res.json())
    .then(data => console.log('Point clouds:', data));
}, []);

Common Issues

API Returns 404

  • Ensure pointcloud-data/ directory exists
  • Check that your model folder name matches the ID in the API request
  • Verify EPT files were generated correctly

CORS Errors

  • Backend is configured for localhost:5173 and localhost:3000
  • If using different port, update Program.cs in HueGraphics.API

Model Parser Fails

  • Ensure input file is valid GLTF/GLB format
  • Check file permissions
  • Try with smaller point count first (--point-count 1000)

Next Steps

  1. Integrate EPT Loader - See src/model_parser/STREAMING_API.md
  2. Customize Theme - See .dev-local/THEME-GUIDE.md
  3. Add More Models - Run model_parser on additional files
  4. Production Build - See deployment guides in respective READMEs

Development Workflow

  1. Convert 3D model → Point cloud (model_parser)
  2. Place in pointcloud-data/
  3. API serves it automatically
  4. Client visualizes with Three.js

Folder Structure Recap

src/
├── client/          # React + Three.js → localhost:5173
├── backend/         # .NET API → localhost:5000
└── model_parser/    # Rust CLI (offline tool)

pointcloud-data/     # Generated by model_parser, served by API

Questions?