IVA3D - Parametric Joinery Chair Demo

An interactive, web-based 3D configurator for parametric furniture design, demonstrating the power of modern web technologies and Agentic AI in manufacturing workflows.

You can check the demonstrator online here

🛠 What it Does

IVA3D is a Proof-of-Concept (PoC) application that allows users to design a mortise-and-tenon joinery chair in real-time. It bridges the gap between digital design and physical manufacturing by offering:

• Real-time 3D Visualization: Instantly see changes as you tweak parameters.
• Parametric Controls: Adjust dimensions (width, depth, height), leg sizes, backrest angles, and more using precise sliders.
• Dynamic Bill of Materials (BOM): Automatically calculates a cut-list of parts, joinery details, and estimated fabrication costs based on the current 3D model.
• Material Customization: Apply realistic PBR (Physically Based Rendering) wood and fabric textures to different parts of the chair.
• AI Assistant: A built-in chat interface driven by LLMs (Large Language Models) to help users navigate the configuration or ask technical questions about the design.

🚀 Key Features

• Interactive 3D Viewport: Built with Three.js and Svelte, featuring realistic lighting, shadows, and environment maps.
• Parametric Logic Engine: A robust TypeScript core (chairFactory.ts) that generates complex geometry on the fly based on user input.
• Cost Estimation: Real-time pricing based on material usage and part complexity.
• Responsive Design: A sleek, dark-themed UI built with TailwindCSS that works across devices.
• Agentic Workflow: Integrates with Vercel AI SDK to provide context-aware assistance.

💻 Tech Stack

• Framework: SvelteKit (Svelte 5 Runes) associated with Vite.
• 3D Graphics: Three.js & Threlte concepts.
• Styling: TailwindCSS.
• AI/LLM: Vercel AI SDK & OpenAI / Ollama (configurable).
• Validation: Zod for schema validation of parametric inputs.
• Language: TypeScript throughout for type safety.

🏗 How it Works

1. Input: The user adjusts a slider (e.g., “Leg Height”) or selects a material.
2. Logic: Reactive Svelte “runes” trigger a recalculation in the chairFactory module.
3. Generation: The factory generates new Three.js geometries for legs, rails, seat, and backrest, ensuring all joinery (mortises and tenons) aligns perfectly.
4. Analysis: The bomCalculator module analyzes the new geometry to produce a Bill of Materials, counting parts and calculating board-feet/meters.
5. Rendering: The 3D scene is updated in the canvas, and the BOM sidebar reflects the new data and costs.

🎯 What it Proves

This demo serves as a tangible example of:

1. Web-Based Manufacturing: bringing CAD-like capabilities to the browser without heavy installs.
2. Mass Customization: Enabling end-users to tailor products to their exact needs within manufacturing constraints.
3. Agentic UI: How AI agents can live alongside traditional UI controls to create a hybrid, more intuitive user experience.