A modern restaurant website showcasing dishes in 3D and Augmented Reality using Needle Engine and SvelteKit.

Try it now: https://ar-restaurant-example-zubcks1t14le.needle.run/

• Interactive 3D Menu: View dishes in stunning 3D before ordering
• AR Experience: Experience dishes in augmented reality on supported devices
• QR Code Sharing: Share menu items via QR codes for mobile AR viewing
• Responsive Design: Works seamlessly across desktop and mobile devices

ar-restaurant-example/
├── Website/                      # SvelteKit web application
│   ├── src/routes/              # App pages
│   ├── static/
│   │   ├── assets/             # 3D models (.glb files)
│   │   ├── data/dishes.json    # Dish data
│   │   └── images/             # Preview images
│   └── package.json
├── Unity Project/ # Unity project with Needle Engine
└── README.md

1. Open the Unity project in Unity Project/ and click Play
2. Your local browser starts and you're already setup for adding new dishes

# Clone and install
git clone https://github.com/your-username/ar-restaurant-example.git
cd ar-restaurant-example/Website
npm install

# Run development server
npm run dev

Open http://localhost:5173 in your browser (or use the ip address to be able to open the local website on your phone).

1. Open the Unity project in Unity Project/
2. Add a new Dish Prefab to the scene and give it a unique name
3. Add your model inside the Dish Prefab instance
4. Needle Engine automatically exports individual GLTF files when you click Play or save the scene

Edit Website/static/data/dishes.json:

{
  "yourDishSlug": {
    "name": "Amazing New Dish",
    "price": "$24.99",
    "description": "Delicious description here.",
    "ingredients": ["Ingredient 1", "Ingredient 2"],
    "image": "dish-preview.svg",
    "model": "assets/yourDishSlug.glb",
    "slug": "yourDishSlug"
  }
}

Save dish preview image to Website/static/images/

That's it! The website automatically loads new dishes from the JSON data.

The app automatically detects device capabilities:

• AR Supported: Shows "🥽 Open in AR" button
• Non-AR Devices: Shows "📱 Open on Phone" with QR code

Push to main branch for automatic deployment via GitHub Actions to Needle Cloud.

• SvelteKit - Web framework
• Needle Engine - 3D/AR engine and model optimization for the web
• Unity - 3D model creation / preparation
• WebXR - AR functionality

🌵 Needle • @NeedleTools