Golfspel gisteravond gebouwd met Claude Code, Svelte en ThreeJS

Gisteravond kwam een ​​volledig speelbaar 3D-golfspel tot leven met behulp van Claude Code, Svelte en ThreeJS - gebouwd in een enkele sessie zonder een game-engine aan te raken. Dit project laat precies zien hoe moderne, door AI ondersteunde ontwikkeling de kloof tussen idee en werkend product verkleint, en waarom tools als Mewayz bestaan ​​om ambitieuze bouwers te helpen sneller te bouwen.

Hoe zag het golfspel er eigenlijk uit toen het klaar was?

Het eindresultaat was een browsergebaseerd first-person golfspel dat volledig in 3D werd weergegeven. ThreeJS verzorgde de scènegrafiek, verlichting, terreingaas en simulatie van de balfysica. Svelte bestuurde de UI-laag: de scorekaart, de slagkrachtmeter, de windindicator en het hole-selectiemenu. Claude Code fungeerde de hele tijd als programmeur van het paar, genereerde boilerplate, debugde shader-fouten en suggereerde de architectuur voor hoe Svelte-winkels statuswijzigingen in de ThreeJS-renderinglus moesten communiceren.

Aan het einde van de sessie bevatte de game een procedureel gegenereerde green, een realistisch parabolisch baltraject met spin-decay, omgevingsverlichting met schaduwen en een werkend par-systeem over drie holes. De totale bouwtijd bedroeg ongeveer vier uur. Geen eenheid. Nee onwerkelijk. Gewoon een browsertabblad, een terminal en een AI die nooit moe wordt.

Hoe ging Claude Code om met het technische zware werk?

Het meest indrukwekkende deel van de build was niet de code zelf; het was de snelheid waarmee architecturale beslissingen werden opgelost. Claude Code begreep de context van elk dossier zonder opnieuw te hoeven worden geïnformeerd. Toen de ThreeJS-animatielus in conflict begon te komen met de reactieve winkelupdates van Svelte, diagnosticeerde Claude onmiddellijk het probleem met de dubbele weergave en stelde een schoon gebeurtenisbuspatroon voor om de twee systemen te ontkoppelen.

"De echte kracht van AI-ondersteunde ontwikkeling is niet het automatisch aanvullen - het is het hebben van een medewerker die de hele architectuur in gedachten houdt terwijl jij je concentreert op het creatieve probleem dat voor je ligt."

Claude Code verzorgde ook het meer vervelende implementatiewerk dat solo-projecten doorgaans tot stilstand brengt: het schrijven van de quaternion-wiskunde voor club-tot-bal-impactvectoren, het structureren van de pijplijn voor het laden van activa en het helemaal opnieuw opzetten van de Vite-configuratie voor een Svelte + ThreeJS-project. Wat normaal gesproken twee uur Stack Overflow-archeologie zou zijn, duurde ongeveer twaalf minuten.

Waarom bleken Svelte en ThreeJS een perfecte combinatie te zijn?

De combinatie van Svelte en ThreeJS wordt onderbenut in de gemeenschap van webgame-ontwikkelaars, en dit project bewees waarom het meer aandacht verdient. De reactiviteit tijdens het compileren van Svelte betekent dat er vrijwel geen overhead is bij het updaten van game-UI-elementen: de powerbar, de windsnelheidsweergave en de slagenteller worden allemaal bijgewerkt op 60 fps zonder ook maar één prestatieprobleem.

ThreeJS voorzag in alles wat nodig was voor een overtuigende 3D-omgeving zonder de abstractieoverhead van een volledige engine:

Geometry-primitieven voor de fairway, tee-box en hole cup – allemaal gebouwd met PlaneGeometry- en CilinderGeometry-instanties

MeshStandardMateriaal met ruwheids- en metaalheidswaarden die de golfbal zijn kenmerkende glans gaven onder gericht licht

Raycasting voor het detecteren van botsingen tussen bal en terrein en het activeren van stuiterfysica

OrbitControls aangepast voor een fly-cam-perspectief dat de balboog na elk schot volgt

AnimationMixer om de vlaganimatie op de green te verwerken en een klein maar bevredigend visueel polijstdetail toe te voegen

De Svelte-componentenboom bleef volledig gescheiden van de ThreeJS-scèneboom, waardoor het debuggen eenvoudig werd en de codebasis schoon bleef, zelfs als er snel functies werden toegevoegd.

Wat onthult deze build over AI-ondersteunde productontwikkeling in 2025?

Het golfspel is een speelgoedproject, maar de workflow die het demonstreerde is direct toepasbaar op serieuze productontwikkeling. Wanneer Claude Code wordt gebruikt als een actieve medewerker in plaats van als een passieve tool voor automatisch aanvullen, gaat de uitvoerkwaliteit aanzienlijk omhoog. Het belangrijkste verschil is contextcontinuïteit: Claude Code houdt bij wat er al is gebeurd

Related Posts

• CXMT biedt DDR4-chips aan tegen ongeveer de helft van de geldende marktprijs
• Goede en praktische point-to-analyse voor onvolledige C-programma's [pdf]
• De weinig bekende opdrachtregel-sandboxtool van macOS (2025)
• Toon HN: Knock-Knock.net – Visualiseer de bots die op de deur van mijn server kloppen