Autodesk Platform Services - Material UI 3D Viewer

A modern React + TypeScript application with Material UI that demonstrates CAD model viewing using the Autodesk Platform Services (APS) Viewer.

🎯 Features

• Modern UI: Built with Material UI components and custom theming
• 3D Model Viewer: Integrated Autodesk Viewer for CAD files
• Demo Mode: Working sample models for demonstration
• File Upload: Simulated file upload with clear feedback
• Responsive Design: Works on desktop and mobile devices
• TypeScript: Full type safety and enhanced developer experience

📁 Project Structure

cad-model-autosdk-mallesh-main/
├── backend/                 # Express.js API server (Demo Mode)
│   ├── server.js           # Main server file with mock endpoints
│   ├── package.json        # Backend dependencies
│   └── ...
├── material-ui-frontend/    # React + TypeScript + Material UI frontend
│   ├── src/
│   │   ├── components/     # React components
│   │   ├── services/       # API and viewer services
│   │   ├── theme/          # Material UI theme
│   │   └── types/          # TypeScript interfaces
│   ├── package.json        # Frontend dependencies
│   └── ...
├── .env                    # Environment variables (APS credentials)
└── README.md              # This file

🚀 Quick Start

Prerequisites

• Node.js 16+ installed
• npm or yarn package manager

1. Start the Backend (Demo Mode)

cd backend
npm install
npm start

Server runs on: http://localhost:3000

2. Start the Frontend

cd material-ui-frontend
npm install
npm run dev

Frontend runs on: http://localhost:3001

3. Open the Application

Navigate to http://localhost:3001 in your browser

🎭 Demo Mode

This application runs in Demo Mode with the following features:

✅ Working 3D Models

• Autodesk Sample House.rvt - Architectural house model
• Autodesk Sample Engine.dwg - Mechanical engine model
• Autodesk Sample Office Building.rvt - Commercial building model

📁 File Upload Simulation

• Upload functionality is simulated
• Clear feedback about demo limitations
• Instructions for production setup

🔧 How to Use

1. Select a Model: Use the dropdown to choose a sample model
2. View in 3D: The model loads in the interactive 3D viewer
3. Viewer Controls:
   • Mouse: Orbit, pan, zoom
   • Buttons: Fit to view, fullscreen
4. Upload Files: Try the upload to see demo feedback

💡 Key Components

Backend (backend/server.js)

• Express.js API server
• Mock endpoints for demo functionality
• CORS enabled for frontend development
• Sample model URNs for Autodesk Viewer

Frontend (material-ui-frontend/)

• App.tsx: Main application with demo info banner
• ViewerComponent.tsx: 3D viewer integration with detailed logging
• ViewerService.ts: Autodesk Viewer management with error handling
• ApiService.ts: HTTP client for backend communication
• Material UI Theme: Custom Autodesk-inspired design

🐛 Troubleshooting

Viewer Not Loading

1. Check Browser Console: Look for detailed error messages
2. Try Sample Models: Use "Autodesk Sample House.rvt" first
3. Network: Ensure both servers are running
4. Scripts: Verify Autodesk Viewer scripts load from CDN

Common Issues

• "Viewer library failed to load": Check internet connection
• "Model not found": Use only the provided sample models in demo mode
• CORS errors: Ensure backend is running on port 3000

🔄 Development

Adding Real APS Functionality

To use real Autodesk Platform Services:

1. Get APS Credentials:

   • Visit https://aps.autodesk.com/
   • Create an app and get Client ID/Secret

2. Update .env file:

   APS_CLIENT_ID=your_client_id
   APS_CLIENT_SECRET=your_client_secret
   APS_CALLBACK_URL=http://localhost:3000/api/auth/callback
   

3. Replace Mock Endpoints: Update backend/server.js with real APS SDK calls

Project Scripts

Backend:

npm start          # Start development server

Frontend:

npm run dev        # Start development server
npm run build      # Build for production
npm run preview    # Preview production build
npm run lint       # Run ESLint

📚 Technologies

• Frontend: React 18, TypeScript, Material UI, Vite
• Backend: Node.js, Express.js
• 3D Viewer: Autodesk Platform Services Viewer
• Styling: Material UI + Emotion
• HTTP Client: Axios
• Development: Hot reload, TypeScript checking

🎯 Next Steps

1. Try the Demo: Select "Autodesk Sample House.rvt" to see working 3D
2. Explore Code: Check browser console for detailed logging
3. Upload Test: Try uploading a file to see demo feedback
4. Production Setup: Add real APS credentials for full functionality

---

🎉 Enjoy exploring 3D CAD models with this modern viewer!