[{"data":1,"prerenderedAt":183},["ShallowReactive",2],{"blog-en-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\u002Fen\u002Freact-three-fiber.md","React Three Fiber: thinking 3D declaratively",{"type":7,"value":8,"toc":163},"minimark",[9,13,18,21,132,135,139,145,156,159],[10,11,12],"p",{},"For a long time I wrote Three.js the way the library asks you to: imperatively. Create the\nscene, position the camera, add a mesh, update everything by hand inside the render loop. It\nworks — but every larger project turned into a tangle of state nobody wanted to unwind. React\nThree Fiber changed that for me.",[14,15,17],"h2",{"id":16},"from-commands-to-description","From commands to description",[10,19,20],{},"React Three Fiber, or R3F, lets me express a 3D scene the same way I build an interface: as a\ntree of components. Instead of instantiating a mesh and manually attaching it to the scene, I\nsimply describe what should be there.",[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],{},"This isn't a toy layer on top of Three.js — it is Three.js, just declarative. Every Three class\nbecomes a component, every property a prop. The crucial difference: I describe the state I want,\nand R3F reconciles the scene to match it. The very principle that made React so strong in the\nDOM now applies to the canvas.",[14,136,138],{"id":137},"why-this-changes-creative-work","Why this changes creative work",[140,141,142],"blockquote",{},[10,143,144],{},"Maintainability isn't the opposite of creativity — it's what lets you stay bold.",[10,146,147,148,151,152,155],{},"The real win isn't less code, it's less fear of change. When a scene is made of clearly named\ncomponents, I can swap an idea without dreading the rest. The ecosystem helps enormously: with\n",[29,149,150],{},"@react-three\u002Fdrei"," I have cameras, controls and loaders within reach, and hooks like ",[29,153,154],{},"useFrame","\nbind animation cleanly into the render cycle — no global loop that has to know everything.",[10,157,158],{},"For me that means I can sketch a 3D idea quickly, share it with a team, and pick it back up\nweeks later without first doing archaeology on what past-me was thinking. Three.js gives me the\ndepth, R3F gives me the structure. Declarative 3D isn't a trend to me — it's how creative web\nwork finally carries beyond the first demo.",[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","How React Three Fiber turns Three.js scenes into components — and why declarative 3D finally made my creative work maintainable.",false,"md","en",{},true,"\u002Fblog\u002Fen\u002Freact-three-fiber",{"title":5,"description":169},"blog\u002Fen\u002Freact-three-fiber",[179,180,181],"Three.js","React","3D","26L__w-DplfcsEeFZYnJSVxrSWoA3JvIk5u1G296g8w",1781596072695]