Idee 3: CAD-studio · Hackathon App

Een simpele 3D-tekentool in de browser: onderdelen worden beschreven als JSON (blokken, cilinders, gaten), de app toont ze live in 3D, je verandert maten met schuifjes, en AI maakt of past een model aan op basis van gewone taal. Voor montageplaten, beugels, behuizingen, kasten of een opstelling in de werkplaats.

Wow-moment

Typ "montagebeugel 120 x 40 mm, 4 mm dik, met 4 gaten van 6 mm in de hoeken" en het onderdeel verschijnt draaiend in 3D. Schuif "breedte" naar 200: alles schuift mee, de gaten blijven in de hoeken. Klik Download STL en het kan zo naar de 3D-printer.

Gegevens

Tabel	Kolommen
`models` (noem het `designs`, `Model` botst met Eloquent)	`name`, `description`, `params` (json: `{"breedte": 120, "dikte": 4}`), `parts` (json, zie hieronder), `material`, `user_id` (nullable)
`design_versions`	`design_id`, `params`, `parts`, `message` ("gaten 8 mm gemaakt"), `created_at`

Het modelformaat (JSON)

Houd het klein, dan kan AI het betrouwbaar schrijven. Maten in mm, Z omhoog. Waarden zijn getallen of formules met parameternamen ("breedte - 10"), uitgerekend in JavaScript met een kleine veilige evaluator (alleen getallen, parameternamen, + - * / ( )).

{
  "params": { "breedte": 120, "diepte": 40, "dikte": 4, "gat": 6, "rand": 8 },
  "parts": [
    { "id": "plaat", "type": "box", "size": ["breedte", "diepte", "dikte"], "pos": [0, 0, 0], "color": "#9aa4b1" },
    { "id": "gat1", "type": "hole", "d": "gat", "depth": "dikte", "pos": ["rand", "rand", 0], "of": "plaat" },
    { "id": "gat2", "type": "hole", "d": "gat", "depth": "dikte", "pos": ["breedte - rand", "rand", 0], "of": "plaat" }
  ]
}

Types: box (size), cylinder (d, h), hole (d, depth, uitgespaard uit of). Meer is niet nodig voor de avond.

Afspraken voor de viewer (anders staan gaten verkeerd of liggen cilinders op hun kant):

pos is de minimum-hoek van een box (x, y, z) en het midden van de onderkant van een cylinder/hole.
Three.js zet een BoxGeometry met het midden op de oorsprong: schuif de mesh op met size / 2.
Een CylinderGeometry staat langs de Y-as: geometry.rotateX(Math.PI / 2) zodat hij langs Z (omhoog) staat, en schuif op met h / 2.
Z is omhoog: camera.up.set(0, 0, 1) vóór je de OrbitControls maakt.
Een hole is iets langer dan depth (bijv. +0,2 mm aan beide kanten), anders blijft er een vliesje over na het uitsparen.

Pagina's

Ontwerpen (/designs): kaarten met naam en een miniatuur (screenshot van de canvas, opgeslagen als png bij opslaan).
Editor (/designs/{id}): links de 3D-viewer (groot), rechts schuifjes per parameter, onderdelenlijst, AI-veld ("Wat moet er veranderen?"), knoppen Opslaan (= nieuwe versie), Download STL, Versies.
Dashboard (_live): laatst bewerkte ontwerpen met miniatuur.

Bouwvolgorde

npm install three three-bvh-csg (lokale libraries, mag). Een Alpine-component cadViewer in resources/js/: Three.js-scene met OrbitControls, raster, licht; render(model) bouwt meshes; gaten met three-bvh-csg (SUBTRACTION). Schuifje verandert param → opnieuw renderen (debounce 50 ms). Kleuren van achtergrond en raster uit de CSS-tokens van de stijl.
Migratie + seeder met 4 voorbeelden: montageplaat met 4 gaten, L-beugel, kastje (behuizing) met deksel, afstandsbus.
Editor-pagina met schuifjes (min/max = 0,2x tot 3x de standaardwaarde) en opslaan via HTMX.
AI: agent met vaste velden (structured output) {params, parts, message}. Instructies: het formaat hierboven met voorbeeld, "geef altijd het complete model terug", "gebruik parameters voor maten die iemand wil aanpassen". Stuur het huidige model mee bij "pas aan". Valideer: onbekend type of formule = foutmelding tonen, model niet opslaan.
STL-export in de browser: STLExporter uit three/examples/jsm/exporters/STLExporter.js → download.
Versies: lijst met bericht en tijd, klik = terugzetten.
Extra's: maatlijnen (labels in 3D met CSS2DRenderer), gewicht = volume × dichtheid van het materiaal, DXF van het bovenaanzicht voor de lasersnijder, "maak 3 varianten" (AI).

Demo (3 minuten)

"Voor elk simpel onderdeel wachten we op de tekenaar." 2. AI maakt een beugel uit één zin. 3. Schuifjes: maten aanpassen, gaten bewegen mee. 4. "Maak de gaten 8 mm en voeg een sleuf toe": nieuwe versie. 5. STL downloaden.

Let op

Begin met de viewer en één hardgecodeerd model; pas daarna opslaan en AI.
Draai de AI-aanroep gewoon in het verzoek (2 tot 6 seconden) met een laadindicator; een job is hier niet nodig.