[{"data":1,"prerenderedAt":183},["ShallowReactive",2],{"blog-de-react-three-fiber":3},{"id":4,"title":5,"body":6,"cover":167,"date":168,"description":169,"draft":170,"extension":171,"locale":172,"meta":173,"navigation":174,"path":175,"seo":176,"stem":177,"tags":178,"__hash__":182},"blog\u002Fblog\u002Fde\u002Freact-three-fiber.md","React Three Fiber: 3D, deklarativ gedacht",{"type":7,"value":8,"toc":163},"minimark",[9,13,18,21,132,135,139,145,156,159],[10,11,12],"p",{},"Lange habe ich Three.js so geschrieben, wie es die Bibliothek vorgibt: imperativ. Szene\nerstellen, Kamera positionieren, Mesh hinzufügen, in der Render-Schleife alles von Hand\naktualisieren. Es funktioniert — aber jedes größere Projekt wurde zu einem Knäuel aus\nZustand, das niemand mehr entwirren wollte. Mit React Three Fiber hat sich das gedreht.",[14,15,17],"h2",{"id":16},"von-befehlen-zu-beschreibung","Von Befehlen zu Beschreibung",[10,19,20],{},"React Three Fiber, kurz R3F, lässt mich eine 3D-Szene so ausdrücken, wie ich sonst eine\nBenutzeroberfläche baue: als Baum aus Komponenten. Statt ein Mesh zu instanziieren und\nmanuell an die Szene zu hängen, schreibe ich einfach, was da sein soll.",[22,23,28],"pre",{"className":24,"code":25,"language":26,"meta":27,"style":27},"language-jsx shiki shiki-themes github-light github-dark","\u003Cmesh position={[0, 1, 0]}>\n  \u003CboxGeometry args={[1, 1, 1]} \u002F>\n  \u003CmeshStandardMaterial color=\"hotpink\" \u002F>\n\u003C\u002Fmesh>\n","jsx","",[29,30,31,72,101,121],"code",{"__ignoreMap":27},[32,33,36,40,44,48,52,55,59,62,65,67,69],"span",{"class":34,"line":35},"line",1,[32,37,39],{"class":38},"sVt8B","\u003C",[32,41,43],{"class":42},"s9eBZ","mesh",[32,45,47],{"class":46},"sScJk"," position",[32,49,51],{"class":50},"szBVR","=",[32,53,54],{"class":38},"{[",[32,56,58],{"class":57},"sj4cs","0",[32,60,61],{"class":38},", ",[32,63,64],{"class":57},"1",[32,66,61],{"class":38},[32,68,58],{"class":57},[32,70,71],{"class":38},"]}>\n",[32,73,75,78,81,84,86,88,90,92,94,96,98],{"class":34,"line":74},2,[32,76,77],{"class":38},"  \u003C",[32,79,80],{"class":57},"boxGeometry",[32,82,83],{"class":46}," args",[32,85,51],{"class":50},[32,87,54],{"class":38},[32,89,64],{"class":57},[32,91,61],{"class":38},[32,93,64],{"class":57},[32,95,61],{"class":38},[32,97,64],{"class":57},[32,99,100],{"class":38},"]} \u002F>\n",[32,102,104,106,109,112,114,118],{"class":34,"line":103},3,[32,105,77],{"class":38},[32,107,108],{"class":57},"meshStandardMaterial",[32,110,111],{"class":46}," color",[32,113,51],{"class":50},[32,115,117],{"class":116},"sZZnC","\"hotpink\"",[32,119,120],{"class":38}," \u002F>\n",[32,122,124,127,129],{"class":34,"line":123},4,[32,125,126],{"class":38},"\u003C\u002F",[32,128,43],{"class":42},[32,130,131],{"class":38},">\n",[10,133,134],{},"Das ist kein Spielzeug-Layer über Three.js — es ist Three.js, nur deklarativ. Jede Three-Klasse\nwird zur Komponente, jede Eigenschaft zur Prop. Der entscheidende Unterschied: Ich beschreibe\nden Zustand, den ich haben will, und R3F gleicht die Szene dafür ab. Genau das Prinzip, das\nReact im DOM so stark gemacht hat, gilt nun für den Canvas.",[14,136,138],{"id":137},"warum-das-kreative-arbeit-verändert","Warum das kreative Arbeit verändert",[140,141,142],"blockquote",{},[10,143,144],{},"Wartbarkeit ist kein Gegensatz zu Kreativität — sie ist die Voraussetzung dafür, mutig zu bleiben.",[10,146,147,148,151,152,155],{},"Der eigentliche Gewinn ist nicht weniger Code, sondern weniger Angst vor Veränderung. Wenn\neine Szene aus klar benannten Komponenten besteht, kann ich eine Idee austauschen, ohne den\nRest zu fürchten. Das Ökosystem hilft enorm: Mit ",[29,149,150],{},"@react-three\u002Fdrei"," habe ich Kameras,\nSteuerungen und Loader griffbereit, und Hooks wie ",[29,153,154],{},"useFrame"," binden Animationen sauber an den\nRender-Zyklus — ohne globale Schleife, die alles kennt.",[10,157,158],{},"Für mich heißt das: Ich kann eine 3D-Idee schnell skizzieren, im Team teilen und Wochen später\nweiterbauen, ohne erst zu archäologieren, was ich mir damals gedacht habe. Three.js gibt mir\ndie Tiefe, R3F gibt mir die Struktur. Deklaratives 3D ist für mich kein Trend, sondern die Art,\nwie kreative Webarbeit endlich auch über die erste Demo hinaus trägt.",[160,161,162],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":27,"searchDepth":74,"depth":74,"links":164},[165,166],{"id":16,"depth":74,"text":17},{"id":137,"depth":74,"text":138},null,"2021-06-08","Wie React Three Fiber Three.js-Szenen in Komponenten verwandelt — und warum deklaratives 3D meine kreative Arbeit endlich wartbar gemacht hat.",false,"md","de",{},true,"\u002Fblog\u002Fde\u002Freact-three-fiber",{"title":5,"description":169},"blog\u002Fde\u002Freact-three-fiber",[179,180,181],"Three.js","React","3D","EKvq94X0aEyELHCJPBSiP9UMNnvvKIDCQ9wntBTgZIw",1781596071286]