[{"data":1,"prerenderedAt":2983},["ShallowReactive",2],{"navigation":3,"/essentials/concepts/declarative-vs-imperative":239,"/essentials/concepts/declarative-vs-imperative-surround":2978},[4,29,78,173,205,215,219,223,227,231,235],{"title":5,"path":6,"stem":7,"children":8,"icon":27,"titleTemplate":28},"Getting Started","/getting-started","1.getting-started/1.index",[9,12,17,22],{"title":10,"path":6,"stem":7,"icon":11},"Introduction","i-lucide-house",{"title":13,"path":14,"stem":15,"icon":16},"Installation","/getting-started/installation","1.getting-started/2.installation","i-lucide-download",{"title":18,"path":19,"stem":20,"icon":21},"Your First Scene","/getting-started/your-first-scene","1.getting-started/3.your-first-scene","i-lucide-donut",{"title":23,"path":24,"stem":25,"icon":26},"Upgrade Guide","/getting-started/upgrade-guide","1.getting-started/4.upgrade-guide","i-lucide-circle-arrow-up","i-lucide-rocket","%s · Get Started with TresJS",{"title":30,"path":31,"stem":32,"children":33},"Essentials","/essentials","2.essentials",[34,36,48],{"title":30,"path":31,"stem":35},"2.essentials/index",{"title":37,"icon":38,"open":39,"path":40,"stem":41,"children":42,"page":47},"Core Architecture","i-lucide-cpu",true,"/essentials/core-architecture","2.essentials/1.core-architecture",[43],{"title":44,"path":45,"stem":46},"Custom Vue Renderer","/essentials/core-architecture/custom-vue-renderer","2.essentials/1.core-architecture/2.custom-vue-renderer",false,{"title":49,"icon":50,"open":39,"path":51,"stem":52,"children":53,"page":47},"Key Concepts","i-lucide-medal","/essentials/concepts","2.essentials/2.concepts",[54,58,62,66,70,74],{"title":55,"path":56,"stem":57},"Declarative vs Imperative","/essentials/concepts/declarative-vs-imperative","2.essentials/2.concepts/1.declarative-vs-imperative",{"title":59,"path":60,"stem":61},"Reactivity","/essentials/concepts/reactivity","2.essentials/2.concepts/2.reactivity",{"title":63,"path":64,"stem":65},"Constructor Arguments","/essentials/concepts/constructor-arguments","2.essentials/2.concepts/3.constructor-arguments",{"title":67,"path":68,"stem":69},"Declarative Properties","/essentials/concepts/declarative-properties","2.essentials/2.concepts/4.declarative-properties",{"title":71,"path":72,"stem":73},"Extending the Catalogue","/essentials/concepts/extending-catalogue","2.essentials/2.concepts/5.extending-catalogue",{"title":75,"path":76,"stem":77},"Child Attachments","/essentials/concepts/child-attachments","2.essentials/2.concepts/6.child-attachments",{"title":79,"path":80,"stem":81,"children":82},"API","/api","3.api",[83,86,104,131,141,155],{"title":84,"path":80,"stem":85},"TresJS API Reference","3.api/1.index",{"title":87,"icon":88,"open":39,"path":89,"stem":90,"children":91,"page":47},"Components","i-lucide-box","/api/components","3.api/1.components",[92,96,100],{"title":93,"path":94,"stem":95},"\u003CTresCanvas />","/api/components/tres-canvas","3.api/1.components/tres-canvas",{"title":97,"path":98,"stem":99},"\u003CTresCanvasContext />","/api/components/tres-context","3.api/1.components/tres-context",{"title":101,"path":102,"stem":103},"Tres Components","/api/components/tres-objects","3.api/1.components/tres-objects",{"title":105,"titleTemplate":106,"icon":107,"path":108,"stem":109,"children":110,"page":47},"Composables","%s · TresJS Composables","i-lucide-arrow-right-left","/api/composables","3.api/2.composables",[111,115,119,123,127],{"title":112,"path":113,"stem":114},"useTres","/api/composables/use-tres","3.api/2.composables/1.use-tres",{"title":116,"path":117,"stem":118},"useTresContext","/api/composables/use-tres-context","3.api/2.composables/2.use-tres-context",{"title":120,"path":121,"stem":122},"useLoop","/api/composables/use-loop","3.api/2.composables/3.use-loop",{"title":124,"path":125,"stem":126},"useGraph","/api/composables/use-graph","3.api/2.composables/4.use-graph",{"title":128,"path":129,"stem":130},"useLoader","/api/composables/use-loader","3.api/2.composables/5.use-loader",{"title":132,"icon":133,"path":134,"stem":135,"children":136,"page":47},"Event handling","i-lucide-mouse-pointer-2","/api/events","3.api/3.events",[137],{"title":138,"path":139,"stem":140},"Pointer Events","/api/events/pointer-events","3.api/3.events/1.pointer-events",{"title":142,"icon":143,"path":144,"stem":145,"children":146,"page":47},"Utils","i-lucide-wrench","/api/utils","3.api/4.utils",[147,151],{"title":148,"path":149,"stem":150},"Type Guards","/api/utils/type-guards","3.api/4.utils/1.type-guards",{"title":152,"path":153,"stem":154},"Directives","/api/utils/directives","3.api/4.utils/2.directives",{"title":156,"icon":157,"path":158,"stem":159,"children":160,"page":47},"Advanced","i-lucide-brain-circuit","/api/advanced","3.api/5.advanced",[161,165,169],{"title":162,"path":163,"stem":164},"Scaling Performance 🚀","/api/advanced/performance","3.api/5.advanced/performance",{"title":166,"path":167,"stem":168},"Primitives","/api/advanced/primitives","3.api/5.advanced/primitives",{"title":170,"path":171,"stem":172},"WebGPU","/api/advanced/web-gpu","3.api/5.advanced/web-gpu",{"title":174,"path":175,"stem":176,"children":177},"Cookbook","/cookbook","4.cookbook",[178,181,185,189,193,197,201],{"title":179,"path":175,"stem":180},"Cookbook 🍳🧑‍🍳","4.cookbook/index",{"title":182,"path":183,"stem":184},"OrbitControls","/cookbook/orbit-controls","4.cookbook/1.orbit-controls",{"title":186,"path":187,"stem":188},"Basic Animations","/cookbook/basic-animations","4.cookbook/2.basic-animations",{"title":190,"path":191,"stem":192},"Model Animation","/cookbook/model-animation","4.cookbook/3.model-animation",{"title":194,"path":195,"stem":196},"Advanced GSAP Animations","/cookbook/advanced-gsap-animations","4.cookbook/4.advanced-gsap-animations",{"title":198,"path":199,"stem":200},"Tweakpane","/cookbook/tweakpane","4.cookbook/5.tweakpane",{"title":202,"path":203,"stem":204},"Dynamic components","/cookbook/transition-dynamic","4.cookbook/6.transition-dynamic",{"title":206,"path":207,"stem":208,"children":209},"Community","/community","5.community/1.index",[210,211],{"title":206,"path":207,"stem":208},{"title":212,"path":213,"stem":214},"Awesome Resources","/community/awesome-resources","5.community/awesome-resources",{"title":216,"path":217,"stem":218},"German Translation","/de","de",{"title":220,"path":221,"stem":222},"Spanish Translation","/es","es",{"title":224,"path":225,"stem":226},"French Translation","/fr","fr",{"title":228,"path":229,"stem":230},"Italian Translation","/it","it",{"title":232,"path":233,"stem":234},"Japanese Translation","/jp","jp",{"title":236,"path":237,"stem":238},"Chinese Translation","/zh","zh",{"id":240,"title":55,"body":241,"description":2972,"extension":2973,"links":2974,"meta":2975,"navigation":39,"path":56,"seo":2976,"stem":57,"__hash__":2977},"docs/2.essentials/2.concepts/1.declarative-vs-imperative.md",{"type":242,"value":243,"toc":2947},"minimark",[244,249,253,257,265,756,761,789,793,800,1122,1126,1152,1156,1159,1163,1807,1811,2188,2192,2199,2202,2209,2212,2487,2494,2505,2512,2523,2527,2534,2895,2904,2908,2940,2943],[245,246,248],"h2",{"id":247},"understanding-the-paradigm-shift","Understanding the Paradigm Shift",[250,251,252],"p",{},"TresJS fundamentally changes how you create 3D scenes by transforming Three.js's imperative approach into a declarative, component-based system. This shift makes 3D development more intuitive for Vue developers while maintaining the full power of Three.js.",[245,254,256],{"id":255},"imperative-threejs-approach","Imperative Three.js Approach",[250,258,259,260,264],{},"In traditional Three.js development, you write ",[261,262,263],"strong",{},"imperative code"," - explicit instructions telling the computer exactly what to do step by step:",[266,267,273],"pre",{"className":268,"code":269,"filename":270,"language":271,"meta":272,"style":272},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import * as THREE from 'three'\n\n// Create scene, camera, and renderer\nconst scene = new THREE.Scene()\nconst camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)\nconst renderer = new THREE.WebGLRenderer()\nrenderer.setSize(window.innerWidth, window.innerHeight)\ndocument.body.appendChild(renderer.domElement)\n\n// Create geometry and material\nconst geometry = new THREE.BoxGeometry(1, 1, 1)\nconst material = new THREE.MeshBasicMaterial({ color: 0x00FF00 })\nconst cube = new THREE.Mesh(geometry, material)\n\n// Add to scene and position\nscene.add(cube)\ncamera.position.z = 5\n\n// Render loop\nfunction animate() {\n  requestAnimationFrame(animate)\n  cube.rotation.x += 0.01\n  cube.rotation.y += 0.01\n  renderer.render(scene, camera)\n}\nanimate()\n","three-js-scene.js","js","",[274,275,276,309,315,322,351,411,432,460,484,489,495,530,569,596,601,607,621,642,647,653,668,681,703,721,743,749],"code",{"__ignoreMap":272},[277,278,281,285,289,292,296,299,302,306],"span",{"class":279,"line":280},"line",1,[277,282,284],{"class":283},"s7zQu","import",[277,286,288],{"class":287},"sMK4o"," *",[277,290,291],{"class":283}," as",[277,293,295],{"class":294},"sTEyZ"," THREE ",[277,297,298],{"class":283},"from",[277,300,301],{"class":287}," '",[277,303,305],{"class":304},"sfazB","three",[277,307,308],{"class":287},"'\n",[277,310,312],{"class":279,"line":311},2,[277,313,314],{"emptyLinePlaceholder":39},"\n",[277,316,318],{"class":279,"line":317},3,[277,319,321],{"class":320},"sHwdD","// Create scene, camera, and renderer\n",[277,323,325,329,332,335,338,341,344,348],{"class":279,"line":324},4,[277,326,328],{"class":327},"spNyl","const",[277,330,331],{"class":294}," scene ",[277,333,334],{"class":287},"=",[277,336,337],{"class":287}," new",[277,339,340],{"class":294}," THREE",[277,342,343],{"class":287},".",[277,345,347],{"class":346},"s2Zo4","Scene",[277,349,350],{"class":294},"()\n",[277,352,354,356,359,361,363,365,367,370,373,377,380,383,385,388,391,393,395,398,400,403,405,408],{"class":279,"line":353},5,[277,355,328],{"class":327},[277,357,358],{"class":294}," camera ",[277,360,334],{"class":287},[277,362,337],{"class":287},[277,364,340],{"class":294},[277,366,343],{"class":287},[277,368,369],{"class":346},"PerspectiveCamera",[277,371,372],{"class":294},"(",[277,374,376],{"class":375},"sbssI","75",[277,378,379],{"class":287},",",[277,381,382],{"class":294}," window",[277,384,343],{"class":287},[277,386,387],{"class":294},"innerWidth ",[277,389,390],{"class":287},"/",[277,392,382],{"class":294},[277,394,343],{"class":287},[277,396,397],{"class":294},"innerHeight",[277,399,379],{"class":287},[277,401,402],{"class":375}," 0.1",[277,404,379],{"class":287},[277,406,407],{"class":375}," 1000",[277,409,410],{"class":294},")\n",[277,412,414,416,419,421,423,425,427,430],{"class":279,"line":413},6,[277,415,328],{"class":327},[277,417,418],{"class":294}," renderer ",[277,420,334],{"class":287},[277,422,337],{"class":287},[277,424,340],{"class":294},[277,426,343],{"class":287},[277,428,429],{"class":346},"WebGLRenderer",[277,431,350],{"class":294},[277,433,435,438,440,443,446,448,451,453,455,457],{"class":279,"line":434},7,[277,436,437],{"class":294},"renderer",[277,439,343],{"class":287},[277,441,442],{"class":346},"setSize",[277,444,445],{"class":294},"(window",[277,447,343],{"class":287},[277,449,450],{"class":294},"innerWidth",[277,452,379],{"class":287},[277,454,382],{"class":294},[277,456,343],{"class":287},[277,458,459],{"class":294},"innerHeight)\n",[277,461,463,466,468,471,473,476,479,481],{"class":279,"line":462},8,[277,464,465],{"class":294},"document",[277,467,343],{"class":287},[277,469,470],{"class":294},"body",[277,472,343],{"class":287},[277,474,475],{"class":346},"appendChild",[277,477,478],{"class":294},"(renderer",[277,480,343],{"class":287},[277,482,483],{"class":294},"domElement)\n",[277,485,487],{"class":279,"line":486},9,[277,488,314],{"emptyLinePlaceholder":39},[277,490,492],{"class":279,"line":491},10,[277,493,494],{"class":320},"// Create geometry and material\n",[277,496,498,500,503,505,507,509,511,514,516,519,521,524,526,528],{"class":279,"line":497},11,[277,499,328],{"class":327},[277,501,502],{"class":294}," geometry ",[277,504,334],{"class":287},[277,506,337],{"class":287},[277,508,340],{"class":294},[277,510,343],{"class":287},[277,512,513],{"class":346},"BoxGeometry",[277,515,372],{"class":294},[277,517,518],{"class":375},"1",[277,520,379],{"class":287},[277,522,523],{"class":375}," 1",[277,525,379],{"class":287},[277,527,523],{"class":375},[277,529,410],{"class":294},[277,531,533,535,538,540,542,544,546,549,551,554,558,561,564,567],{"class":279,"line":532},12,[277,534,328],{"class":327},[277,536,537],{"class":294}," material ",[277,539,334],{"class":287},[277,541,337],{"class":287},[277,543,340],{"class":294},[277,545,343],{"class":287},[277,547,548],{"class":346},"MeshBasicMaterial",[277,550,372],{"class":294},[277,552,553],{"class":287},"{",[277,555,557],{"class":556},"swJcz"," color",[277,559,560],{"class":287},":",[277,562,563],{"class":375}," 0x00FF00",[277,565,566],{"class":287}," }",[277,568,410],{"class":294},[277,570,572,574,577,579,581,583,585,588,591,593],{"class":279,"line":571},13,[277,573,328],{"class":327},[277,575,576],{"class":294}," cube ",[277,578,334],{"class":287},[277,580,337],{"class":287},[277,582,340],{"class":294},[277,584,343],{"class":287},[277,586,587],{"class":346},"Mesh",[277,589,590],{"class":294},"(geometry",[277,592,379],{"class":287},[277,594,595],{"class":294}," material)\n",[277,597,599],{"class":279,"line":598},14,[277,600,314],{"emptyLinePlaceholder":39},[277,602,604],{"class":279,"line":603},15,[277,605,606],{"class":320},"// Add to scene and position\n",[277,608,610,613,615,618],{"class":279,"line":609},16,[277,611,612],{"class":294},"scene",[277,614,343],{"class":287},[277,616,617],{"class":346},"add",[277,619,620],{"class":294},"(cube)\n",[277,622,624,627,629,632,634,637,639],{"class":279,"line":623},17,[277,625,626],{"class":294},"camera",[277,628,343],{"class":287},[277,630,631],{"class":294},"position",[277,633,343],{"class":287},[277,635,636],{"class":294},"z ",[277,638,334],{"class":287},[277,640,641],{"class":375}," 5\n",[277,643,645],{"class":279,"line":644},18,[277,646,314],{"emptyLinePlaceholder":39},[277,648,650],{"class":279,"line":649},19,[277,651,652],{"class":320},"// Render loop\n",[277,654,656,659,662,665],{"class":279,"line":655},20,[277,657,658],{"class":327},"function",[277,660,661],{"class":346}," animate",[277,663,664],{"class":287},"()",[277,666,667],{"class":287}," {\n",[277,669,671,674,676,679],{"class":279,"line":670},21,[277,672,673],{"class":346},"  requestAnimationFrame",[277,675,372],{"class":556},[277,677,678],{"class":294},"animate",[277,680,410],{"class":556},[277,682,684,687,689,692,694,697,700],{"class":279,"line":683},22,[277,685,686],{"class":294},"  cube",[277,688,343],{"class":287},[277,690,691],{"class":294},"rotation",[277,693,343],{"class":287},[277,695,696],{"class":294},"x",[277,698,699],{"class":287}," +=",[277,701,702],{"class":375}," 0.01\n",[277,704,706,708,710,712,714,717,719],{"class":279,"line":705},23,[277,707,686],{"class":294},[277,709,343],{"class":287},[277,711,691],{"class":294},[277,713,343],{"class":287},[277,715,716],{"class":294},"y",[277,718,699],{"class":287},[277,720,702],{"class":375},[277,722,724,727,729,732,734,736,738,741],{"class":279,"line":723},24,[277,725,726],{"class":294},"  renderer",[277,728,343],{"class":287},[277,730,731],{"class":346},"render",[277,733,372],{"class":556},[277,735,612],{"class":294},[277,737,379],{"class":287},[277,739,740],{"class":294}," camera",[277,742,410],{"class":556},[277,744,746],{"class":279,"line":745},25,[277,747,748],{"class":287},"}\n",[277,750,752,754],{"class":279,"line":751},26,[277,753,678],{"class":346},[277,755,350],{"class":294},[757,758,760],"h3",{"id":759},"challenges-with-imperative-code","Challenges with Imperative Code",[762,763,764,771,777,783],"ul",{},[765,766,767,770],"li",{},[261,768,769],{},"Manual State Management",": You must manually track and update object states.",[765,772,773,776],{},[261,774,775],{},"Complex Cleanup",": Requires explicit disposal of geometries, materials, and resources.",[765,778,779,782],{},[261,780,781],{},"Verbose Setup",": Lots of boilerplate code for basic scenes.",[765,784,785,788],{},[261,786,787],{},"Hard to Maintain",": Difficult to modify or extend as complexity grows.",[245,790,792],{"id":791},"declarative-tresjs-approach","Declarative TresJS Approach",[250,794,795,796,799],{},"TresJS transforms this into ",[261,797,798],{},"declarative code"," - you describe what you want, not how to achieve it:",[266,801,806],{"className":802,"code":803,"filename":804,"language":805,"meta":272,"style":272},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\n\nconst cubeRef = ref()\n\nconst { onBeforeRender } = useLoop()\nfunction onLoop() {\n  if (cubeRef.value) {\n    cubeRef.value.rotation.x += 0.01\n    cubeRef.value.rotation.y += 0.01\n  }\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas @loop=\"onLoop\">\n    \u003CTresPerspectiveCamera :position=\"[0, 0, 5]\" />\n    \u003CTresMesh ref=\"cubeRef\">\n      \u003CTresBoxGeometry />\n      \u003CTresMeshBasicMaterial color=\"green\" />\n    \u003C/TresMesh>\n  \u003C/TresCanvas>\n\u003C/template>\n","tres-scene.vue","vue",[274,807,808,835,856,860,873,877,897,908,930,951,971,976,980,989,993,1002,1024,1047,1066,1076,1096,1105,1114],{"__ignoreMap":272},[277,809,810,813,816,819,822,824,827,830,832],{"class":279,"line":280},[277,811,812],{"class":287},"\u003C",[277,814,815],{"class":556},"script",[277,817,818],{"class":327}," setup",[277,820,821],{"class":327}," lang",[277,823,334],{"class":287},[277,825,826],{"class":287},"\"",[277,828,829],{"class":304},"ts",[277,831,826],{"class":287},[277,833,834],{"class":287},">\n",[277,836,837,839,842,845,847,850,852,854],{"class":279,"line":311},[277,838,284],{"class":283},[277,840,841],{"class":287}," {",[277,843,844],{"class":294}," ref",[277,846,566],{"class":287},[277,848,849],{"class":283}," from",[277,851,301],{"class":287},[277,853,805],{"class":304},[277,855,308],{"class":287},[277,857,858],{"class":279,"line":317},[277,859,314],{"emptyLinePlaceholder":39},[277,861,862,864,867,869,871],{"class":279,"line":324},[277,863,328],{"class":327},[277,865,866],{"class":294}," cubeRef ",[277,868,334],{"class":287},[277,870,844],{"class":346},[277,872,350],{"class":294},[277,874,875],{"class":279,"line":353},[277,876,314],{"emptyLinePlaceholder":39},[277,878,879,881,883,886,889,892,895],{"class":279,"line":413},[277,880,328],{"class":327},[277,882,841],{"class":287},[277,884,885],{"class":294}," onBeforeRender ",[277,887,888],{"class":287},"}",[277,890,891],{"class":287}," =",[277,893,894],{"class":346}," useLoop",[277,896,350],{"class":294},[277,898,899,901,904,906],{"class":279,"line":434},[277,900,658],{"class":327},[277,902,903],{"class":346}," onLoop",[277,905,664],{"class":287},[277,907,667],{"class":287},[277,909,910,913,916,919,921,924,927],{"class":279,"line":462},[277,911,912],{"class":283},"  if",[277,914,915],{"class":556}," (",[277,917,918],{"class":294},"cubeRef",[277,920,343],{"class":287},[277,922,923],{"class":294},"value",[277,925,926],{"class":556},") ",[277,928,929],{"class":287},"{\n",[277,931,932,935,937,939,941,943,945,947,949],{"class":279,"line":486},[277,933,934],{"class":294},"    cubeRef",[277,936,343],{"class":287},[277,938,923],{"class":294},[277,940,343],{"class":287},[277,942,691],{"class":294},[277,944,343],{"class":287},[277,946,696],{"class":294},[277,948,699],{"class":287},[277,950,702],{"class":375},[277,952,953,955,957,959,961,963,965,967,969],{"class":279,"line":491},[277,954,934],{"class":294},[277,956,343],{"class":287},[277,958,923],{"class":294},[277,960,343],{"class":287},[277,962,691],{"class":294},[277,964,343],{"class":287},[277,966,716],{"class":294},[277,968,699],{"class":287},[277,970,702],{"class":375},[277,972,973],{"class":279,"line":497},[277,974,975],{"class":287},"  }\n",[277,977,978],{"class":279,"line":532},[277,979,748],{"class":287},[277,981,982,985,987],{"class":279,"line":571},[277,983,984],{"class":287},"\u003C/",[277,986,815],{"class":556},[277,988,834],{"class":287},[277,990,991],{"class":279,"line":598},[277,992,314],{"emptyLinePlaceholder":39},[277,994,995,997,1000],{"class":279,"line":603},[277,996,812],{"class":287},[277,998,999],{"class":556},"template",[277,1001,834],{"class":287},[277,1003,1004,1007,1010,1013,1015,1017,1020,1022],{"class":279,"line":609},[277,1005,1006],{"class":287},"  \u003C",[277,1008,1009],{"class":556},"TresCanvas",[277,1011,1012],{"class":327}," @loop",[277,1014,334],{"class":287},[277,1016,826],{"class":287},[277,1018,1019],{"class":304},"onLoop",[277,1021,826],{"class":287},[277,1023,834],{"class":287},[277,1025,1026,1029,1032,1035,1037,1039,1042,1044],{"class":279,"line":623},[277,1027,1028],{"class":287},"    \u003C",[277,1030,1031],{"class":556},"TresPerspectiveCamera",[277,1033,1034],{"class":327}," :position",[277,1036,334],{"class":287},[277,1038,826],{"class":287},[277,1040,1041],{"class":304},"[0, 0, 5]",[277,1043,826],{"class":287},[277,1045,1046],{"class":287}," />\n",[277,1048,1049,1051,1054,1056,1058,1060,1062,1064],{"class":279,"line":644},[277,1050,1028],{"class":287},[277,1052,1053],{"class":556},"TresMesh",[277,1055,844],{"class":327},[277,1057,334],{"class":287},[277,1059,826],{"class":287},[277,1061,918],{"class":304},[277,1063,826],{"class":287},[277,1065,834],{"class":287},[277,1067,1068,1071,1074],{"class":279,"line":649},[277,1069,1070],{"class":287},"      \u003C",[277,1072,1073],{"class":556},"TresBoxGeometry",[277,1075,1046],{"class":287},[277,1077,1078,1080,1083,1085,1087,1089,1092,1094],{"class":279,"line":655},[277,1079,1070],{"class":287},[277,1081,1082],{"class":556},"TresMeshBasicMaterial",[277,1084,557],{"class":327},[277,1086,334],{"class":287},[277,1088,826],{"class":287},[277,1090,1091],{"class":304},"green",[277,1093,826],{"class":287},[277,1095,1046],{"class":287},[277,1097,1098,1101,1103],{"class":279,"line":670},[277,1099,1100],{"class":287},"    \u003C/",[277,1102,1053],{"class":556},[277,1104,834],{"class":287},[277,1106,1107,1110,1112],{"class":279,"line":683},[277,1108,1109],{"class":287},"  \u003C/",[277,1111,1009],{"class":556},[277,1113,834],{"class":287},[277,1115,1116,1118,1120],{"class":279,"line":705},[277,1117,984],{"class":287},[277,1119,999],{"class":556},[277,1121,834],{"class":287},[757,1123,1125],{"id":1124},"benefits-of-declarative-code","Benefits of Declarative Code",[762,1127,1128,1134,1140,1146],{},[765,1129,1130,1133],{},[261,1131,1132],{},"Reactive State Management",": Vue's reactivity automatically handles updates.",[765,1135,1136,1139],{},[261,1137,1138],{},"Automatic Cleanup",": TresJS manages resource disposal automatically.",[765,1141,1142,1145],{},[261,1143,1144],{},"Intuitive Syntax",": HTML-like template syntax, which is familiar to Vue developers.",[765,1147,1148,1151],{},[261,1149,1150],{},"Easier Maintenance",": The component structure makes your code more modular and reusable.",[245,1153,1155],{"id":1154},"side-by-side-comparison","Side-by-Side Comparison",[250,1157,1158],{},"Let's compare how common 3D operations are handled in both approaches:",[757,1160,1162],{"id":1161},"creating-a-scene-with-lighting","Creating a Scene with Lighting",[1164,1165,1166,1587],"code-group",{},[266,1167,1170],{"className":268,"code":1168,"filename":1169,"language":271,"meta":272,"style":272},"// Setup scene, camera, renderer\nconst scene = new THREE.Scene()\nconst camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)\nconst renderer = new THREE.WebGLRenderer()\nrenderer.setSize(window.innerWidth, window.innerHeight)\ndocument.body.appendChild(renderer.domElement)\n\n// Add lights\nconst ambientLight = new THREE.AmbientLight(0x404040, 0.5)\nscene.add(ambientLight)\n\nconst directionalLight = new THREE.DirectionalLight(0xFFFFFF, 1)\ndirectionalLight.position.set(5, 5, 5)\nscene.add(directionalLight)\n\n// Create and add objects\nconst geometry = new THREE.SphereGeometry(1, 32, 32)\nconst material = new THREE.MeshStandardMaterial({ color: 0xFF6B35 })\nconst sphere = new THREE.Mesh(geometry, material)\nscene.add(sphere)\n\n// Render loop\nfunction animate() {\n  requestAnimationFrame(animate)\n  renderer.render(scene, camera)\n}\nanimate()\n","Three.js (Imperative)",[274,1171,1172,1177,1195,1241,1259,1281,1299,1303,1308,1338,1349,1353,1382,1412,1423,1427,1432,1464,1496,1519,1530,1534,1538,1548,1558,1576,1580],{"__ignoreMap":272},[277,1173,1174],{"class":279,"line":280},[277,1175,1176],{"class":320},"// Setup scene, camera, renderer\n",[277,1178,1179,1181,1183,1185,1187,1189,1191,1193],{"class":279,"line":311},[277,1180,328],{"class":327},[277,1182,331],{"class":294},[277,1184,334],{"class":287},[277,1186,337],{"class":287},[277,1188,340],{"class":294},[277,1190,343],{"class":287},[277,1192,347],{"class":346},[277,1194,350],{"class":294},[277,1196,1197,1199,1201,1203,1205,1207,1209,1211,1213,1215,1217,1219,1221,1223,1225,1227,1229,1231,1233,1235,1237,1239],{"class":279,"line":317},[277,1198,328],{"class":327},[277,1200,358],{"class":294},[277,1202,334],{"class":287},[277,1204,337],{"class":287},[277,1206,340],{"class":294},[277,1208,343],{"class":287},[277,1210,369],{"class":346},[277,1212,372],{"class":294},[277,1214,376],{"class":375},[277,1216,379],{"class":287},[277,1218,382],{"class":294},[277,1220,343],{"class":287},[277,1222,387],{"class":294},[277,1224,390],{"class":287},[277,1226,382],{"class":294},[277,1228,343],{"class":287},[277,1230,397],{"class":294},[277,1232,379],{"class":287},[277,1234,402],{"class":375},[277,1236,379],{"class":287},[277,1238,407],{"class":375},[277,1240,410],{"class":294},[277,1242,1243,1245,1247,1249,1251,1253,1255,1257],{"class":279,"line":324},[277,1244,328],{"class":327},[277,1246,418],{"class":294},[277,1248,334],{"class":287},[277,1250,337],{"class":287},[277,1252,340],{"class":294},[277,1254,343],{"class":287},[277,1256,429],{"class":346},[277,1258,350],{"class":294},[277,1260,1261,1263,1265,1267,1269,1271,1273,1275,1277,1279],{"class":279,"line":353},[277,1262,437],{"class":294},[277,1264,343],{"class":287},[277,1266,442],{"class":346},[277,1268,445],{"class":294},[277,1270,343],{"class":287},[277,1272,450],{"class":294},[277,1274,379],{"class":287},[277,1276,382],{"class":294},[277,1278,343],{"class":287},[277,1280,459],{"class":294},[277,1282,1283,1285,1287,1289,1291,1293,1295,1297],{"class":279,"line":413},[277,1284,465],{"class":294},[277,1286,343],{"class":287},[277,1288,470],{"class":294},[277,1290,343],{"class":287},[277,1292,475],{"class":346},[277,1294,478],{"class":294},[277,1296,343],{"class":287},[277,1298,483],{"class":294},[277,1300,1301],{"class":279,"line":434},[277,1302,314],{"emptyLinePlaceholder":39},[277,1304,1305],{"class":279,"line":462},[277,1306,1307],{"class":320},"// Add lights\n",[277,1309,1310,1312,1315,1317,1319,1321,1323,1326,1328,1331,1333,1336],{"class":279,"line":486},[277,1311,328],{"class":327},[277,1313,1314],{"class":294}," ambientLight ",[277,1316,334],{"class":287},[277,1318,337],{"class":287},[277,1320,340],{"class":294},[277,1322,343],{"class":287},[277,1324,1325],{"class":346},"AmbientLight",[277,1327,372],{"class":294},[277,1329,1330],{"class":375},"0x404040",[277,1332,379],{"class":287},[277,1334,1335],{"class":375}," 0.5",[277,1337,410],{"class":294},[277,1339,1340,1342,1344,1346],{"class":279,"line":491},[277,1341,612],{"class":294},[277,1343,343],{"class":287},[277,1345,617],{"class":346},[277,1347,1348],{"class":294},"(ambientLight)\n",[277,1350,1351],{"class":279,"line":497},[277,1352,314],{"emptyLinePlaceholder":39},[277,1354,1355,1357,1360,1362,1364,1366,1368,1371,1373,1376,1378,1380],{"class":279,"line":532},[277,1356,328],{"class":327},[277,1358,1359],{"class":294}," directionalLight ",[277,1361,334],{"class":287},[277,1363,337],{"class":287},[277,1365,340],{"class":294},[277,1367,343],{"class":287},[277,1369,1370],{"class":346},"DirectionalLight",[277,1372,372],{"class":294},[277,1374,1375],{"class":375},"0xFFFFFF",[277,1377,379],{"class":287},[277,1379,523],{"class":375},[277,1381,410],{"class":294},[277,1383,1384,1387,1389,1391,1393,1396,1398,1401,1403,1406,1408,1410],{"class":279,"line":571},[277,1385,1386],{"class":294},"directionalLight",[277,1388,343],{"class":287},[277,1390,631],{"class":294},[277,1392,343],{"class":287},[277,1394,1395],{"class":346},"set",[277,1397,372],{"class":294},[277,1399,1400],{"class":375},"5",[277,1402,379],{"class":287},[277,1404,1405],{"class":375}," 5",[277,1407,379],{"class":287},[277,1409,1405],{"class":375},[277,1411,410],{"class":294},[277,1413,1414,1416,1418,1420],{"class":279,"line":598},[277,1415,612],{"class":294},[277,1417,343],{"class":287},[277,1419,617],{"class":346},[277,1421,1422],{"class":294},"(directionalLight)\n",[277,1424,1425],{"class":279,"line":603},[277,1426,314],{"emptyLinePlaceholder":39},[277,1428,1429],{"class":279,"line":609},[277,1430,1431],{"class":320},"// Create and add objects\n",[277,1433,1434,1436,1438,1440,1442,1444,1446,1449,1451,1453,1455,1458,1460,1462],{"class":279,"line":623},[277,1435,328],{"class":327},[277,1437,502],{"class":294},[277,1439,334],{"class":287},[277,1441,337],{"class":287},[277,1443,340],{"class":294},[277,1445,343],{"class":287},[277,1447,1448],{"class":346},"SphereGeometry",[277,1450,372],{"class":294},[277,1452,518],{"class":375},[277,1454,379],{"class":287},[277,1456,1457],{"class":375}," 32",[277,1459,379],{"class":287},[277,1461,1457],{"class":375},[277,1463,410],{"class":294},[277,1465,1466,1468,1470,1472,1474,1476,1478,1481,1483,1485,1487,1489,1492,1494],{"class":279,"line":644},[277,1467,328],{"class":327},[277,1469,537],{"class":294},[277,1471,334],{"class":287},[277,1473,337],{"class":287},[277,1475,340],{"class":294},[277,1477,343],{"class":287},[277,1479,1480],{"class":346},"MeshStandardMaterial",[277,1482,372],{"class":294},[277,1484,553],{"class":287},[277,1486,557],{"class":556},[277,1488,560],{"class":287},[277,1490,1491],{"class":375}," 0xFF6B35",[277,1493,566],{"class":287},[277,1495,410],{"class":294},[277,1497,1498,1500,1503,1505,1507,1509,1511,1513,1515,1517],{"class":279,"line":649},[277,1499,328],{"class":327},[277,1501,1502],{"class":294}," sphere ",[277,1504,334],{"class":287},[277,1506,337],{"class":287},[277,1508,340],{"class":294},[277,1510,343],{"class":287},[277,1512,587],{"class":346},[277,1514,590],{"class":294},[277,1516,379],{"class":287},[277,1518,595],{"class":294},[277,1520,1521,1523,1525,1527],{"class":279,"line":655},[277,1522,612],{"class":294},[277,1524,343],{"class":287},[277,1526,617],{"class":346},[277,1528,1529],{"class":294},"(sphere)\n",[277,1531,1532],{"class":279,"line":670},[277,1533,314],{"emptyLinePlaceholder":39},[277,1535,1536],{"class":279,"line":683},[277,1537,652],{"class":320},[277,1539,1540,1542,1544,1546],{"class":279,"line":705},[277,1541,658],{"class":327},[277,1543,661],{"class":346},[277,1545,664],{"class":287},[277,1547,667],{"class":287},[277,1549,1550,1552,1554,1556],{"class":279,"line":723},[277,1551,673],{"class":346},[277,1553,372],{"class":556},[277,1555,678],{"class":294},[277,1557,410],{"class":556},[277,1559,1560,1562,1564,1566,1568,1570,1572,1574],{"class":279,"line":745},[277,1561,726],{"class":294},[277,1563,343],{"class":287},[277,1565,731],{"class":346},[277,1567,372],{"class":556},[277,1569,612],{"class":294},[277,1571,379],{"class":287},[277,1573,740],{"class":294},[277,1575,410],{"class":556},[277,1577,1578],{"class":279,"line":751},[277,1579,748],{"class":287},[277,1581,1583,1585],{"class":279,"line":1582},27,[277,1584,678],{"class":346},[277,1586,350],{"class":294},[266,1588,1591],{"className":802,"code":1589,"filename":1590,"language":805,"meta":272,"style":272},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas @loop=\"onLoop\">\n    \u003CTresPerspectiveCamera :position=\"[0, 0, 5]\" />\n\n    \u003C!-- Lighting -->\n    \u003CTresAmbientLight :intensity=\"0.5\" />\n    \u003CTresDirectionalLight :position=\"[5, 5, 5]\" />\n\n    \u003C!-- 3D Object -->\n    \u003CTresMesh>\n      \u003CTresSphereGeometry />\n      \u003CTresMeshStandardMaterial color=\"#ff6b35\" />\n    \u003C/TresMesh>\n  \u003C/TresCanvas>\n\u003C/template>\n","TresJS.vue (Declarative)",[274,1592,1593,1613,1631,1639,1643,1651,1669,1687,1691,1696,1717,1737,1741,1746,1754,1763,1783,1791,1799],{"__ignoreMap":272},[277,1594,1595,1597,1599,1601,1603,1605,1607,1609,1611],{"class":279,"line":280},[277,1596,812],{"class":287},[277,1598,815],{"class":556},[277,1600,818],{"class":327},[277,1602,821],{"class":327},[277,1604,334],{"class":287},[277,1606,826],{"class":287},[277,1608,829],{"class":304},[277,1610,826],{"class":287},[277,1612,834],{"class":287},[277,1614,1615,1617,1619,1621,1623,1625,1627,1629],{"class":279,"line":311},[277,1616,284],{"class":283},[277,1618,841],{"class":287},[277,1620,844],{"class":294},[277,1622,566],{"class":287},[277,1624,849],{"class":283},[277,1626,301],{"class":287},[277,1628,805],{"class":304},[277,1630,308],{"class":287},[277,1632,1633,1635,1637],{"class":279,"line":317},[277,1634,984],{"class":287},[277,1636,815],{"class":556},[277,1638,834],{"class":287},[277,1640,1641],{"class":279,"line":324},[277,1642,314],{"emptyLinePlaceholder":39},[277,1644,1645,1647,1649],{"class":279,"line":353},[277,1646,812],{"class":287},[277,1648,999],{"class":556},[277,1650,834],{"class":287},[277,1652,1653,1655,1657,1659,1661,1663,1665,1667],{"class":279,"line":413},[277,1654,1006],{"class":287},[277,1656,1009],{"class":556},[277,1658,1012],{"class":327},[277,1660,334],{"class":287},[277,1662,826],{"class":287},[277,1664,1019],{"class":304},[277,1666,826],{"class":287},[277,1668,834],{"class":287},[277,1670,1671,1673,1675,1677,1679,1681,1683,1685],{"class":279,"line":434},[277,1672,1028],{"class":287},[277,1674,1031],{"class":556},[277,1676,1034],{"class":327},[277,1678,334],{"class":287},[277,1680,826],{"class":287},[277,1682,1041],{"class":304},[277,1684,826],{"class":287},[277,1686,1046],{"class":287},[277,1688,1689],{"class":279,"line":462},[277,1690,314],{"emptyLinePlaceholder":39},[277,1692,1693],{"class":279,"line":486},[277,1694,1695],{"class":320},"    \u003C!-- Lighting -->\n",[277,1697,1698,1700,1703,1706,1708,1710,1713,1715],{"class":279,"line":491},[277,1699,1028],{"class":287},[277,1701,1702],{"class":556},"TresAmbientLight",[277,1704,1705],{"class":327}," :intensity",[277,1707,334],{"class":287},[277,1709,826],{"class":287},[277,1711,1712],{"class":304},"0.5",[277,1714,826],{"class":287},[277,1716,1046],{"class":287},[277,1718,1719,1721,1724,1726,1728,1730,1733,1735],{"class":279,"line":497},[277,1720,1028],{"class":287},[277,1722,1723],{"class":556},"TresDirectionalLight",[277,1725,1034],{"class":327},[277,1727,334],{"class":287},[277,1729,826],{"class":287},[277,1731,1732],{"class":304},"[5, 5, 5]",[277,1734,826],{"class":287},[277,1736,1046],{"class":287},[277,1738,1739],{"class":279,"line":532},[277,1740,314],{"emptyLinePlaceholder":39},[277,1742,1743],{"class":279,"line":571},[277,1744,1745],{"class":320},"    \u003C!-- 3D Object -->\n",[277,1747,1748,1750,1752],{"class":279,"line":598},[277,1749,1028],{"class":287},[277,1751,1053],{"class":556},[277,1753,834],{"class":287},[277,1755,1756,1758,1761],{"class":279,"line":603},[277,1757,1070],{"class":287},[277,1759,1760],{"class":556},"TresSphereGeometry",[277,1762,1046],{"class":287},[277,1764,1765,1767,1770,1772,1774,1776,1779,1781],{"class":279,"line":609},[277,1766,1070],{"class":287},[277,1768,1769],{"class":556},"TresMeshStandardMaterial",[277,1771,557],{"class":327},[277,1773,334],{"class":287},[277,1775,826],{"class":287},[277,1777,1778],{"class":304},"#ff6b35",[277,1780,826],{"class":287},[277,1782,1046],{"class":287},[277,1784,1785,1787,1789],{"class":279,"line":623},[277,1786,1100],{"class":287},[277,1788,1053],{"class":556},[277,1790,834],{"class":287},[277,1792,1793,1795,1797],{"class":279,"line":644},[277,1794,1109],{"class":287},[277,1796,1009],{"class":556},[277,1798,834],{"class":287},[277,1800,1801,1803,1805],{"class":279,"line":649},[277,1802,984],{"class":287},[277,1804,999],{"class":556},[277,1806,834],{"class":287},[757,1808,1810],{"id":1809},"reactive-property-updates","Reactive Property Updates",[1164,1812,1813,1945],{},[266,1814,1818],{"className":1815,"code":1816,"filename":1169,"language":1817,"meta":272,"style":272},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","let currentColor = 0xFF0000\nlet sphere\n\nfunction changeColor() {\n  currentColor = currentColor === 0xFF0000 ? 0x00FF00 : 0xFF0000\n  sphere.material.color.setHex(currentColor)\n}\n\n// Manual event handling\ndocument.addEventListener('click', changeColor)\n","javascript",[274,1819,1820,1833,1840,1844,1855,1881,1908,1912,1916,1921],{"__ignoreMap":272},[277,1821,1822,1825,1828,1830],{"class":279,"line":280},[277,1823,1824],{"class":327},"let",[277,1826,1827],{"class":294}," currentColor ",[277,1829,334],{"class":287},[277,1831,1832],{"class":375}," 0xFF0000\n",[277,1834,1835,1837],{"class":279,"line":311},[277,1836,1824],{"class":327},[277,1838,1839],{"class":294}," sphere\n",[277,1841,1842],{"class":279,"line":317},[277,1843,314],{"emptyLinePlaceholder":39},[277,1845,1846,1848,1851,1853],{"class":279,"line":324},[277,1847,658],{"class":327},[277,1849,1850],{"class":346}," changeColor",[277,1852,664],{"class":287},[277,1854,667],{"class":287},[277,1856,1857,1860,1862,1865,1868,1871,1874,1876,1879],{"class":279,"line":353},[277,1858,1859],{"class":294},"  currentColor",[277,1861,891],{"class":287},[277,1863,1864],{"class":294}," currentColor",[277,1866,1867],{"class":287}," ===",[277,1869,1870],{"class":375}," 0xFF0000",[277,1872,1873],{"class":287}," ?",[277,1875,563],{"class":375},[277,1877,1878],{"class":287}," :",[277,1880,1832],{"class":375},[277,1882,1883,1886,1888,1891,1893,1896,1898,1901,1903,1906],{"class":279,"line":413},[277,1884,1885],{"class":294},"  sphere",[277,1887,343],{"class":287},[277,1889,1890],{"class":294},"material",[277,1892,343],{"class":287},[277,1894,1895],{"class":294},"color",[277,1897,343],{"class":287},[277,1899,1900],{"class":346},"setHex",[277,1902,372],{"class":556},[277,1904,1905],{"class":294},"currentColor",[277,1907,410],{"class":556},[277,1909,1910],{"class":279,"line":434},[277,1911,748],{"class":287},[277,1913,1914],{"class":279,"line":462},[277,1915,314],{"emptyLinePlaceholder":39},[277,1917,1918],{"class":279,"line":486},[277,1919,1920],{"class":320},"// Manual event handling\n",[277,1922,1923,1925,1927,1930,1932,1935,1938,1940,1942],{"class":279,"line":491},[277,1924,465],{"class":294},[277,1926,343],{"class":287},[277,1928,1929],{"class":346},"addEventListener",[277,1931,372],{"class":294},[277,1933,1934],{"class":287},"'",[277,1936,1937],{"class":304},"click",[277,1939,1934],{"class":287},[277,1941,379],{"class":287},[277,1943,1944],{"class":294}," changeColor)\n",[266,1946,1948],{"className":802,"code":1947,"filename":1590,"language":805,"meta":272,"style":272},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\n\nconst isRed = ref(true)\nconst color = computed(() => isRed.value ? '#ff0000' : '#00ff00')\n\nconst toggleColor = () => {\n  isRed.value = !isRed.value\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresMesh @click=\"toggleColor\">\n    \u003CTresSphereGeometry />\n    \u003CTresMeshStandardMaterial :color=\"color\" />\n  \u003C/TresMesh>\n\u003C/template>\n",[274,1949,1950,1970,1988,1992,2011,2059,2063,2079,2101,2105,2113,2117,2125,2145,2153,2172,2180],{"__ignoreMap":272},[277,1951,1952,1954,1956,1958,1960,1962,1964,1966,1968],{"class":279,"line":280},[277,1953,812],{"class":287},[277,1955,815],{"class":556},[277,1957,818],{"class":327},[277,1959,821],{"class":327},[277,1961,334],{"class":287},[277,1963,826],{"class":287},[277,1965,829],{"class":304},[277,1967,826],{"class":287},[277,1969,834],{"class":287},[277,1971,1972,1974,1976,1978,1980,1982,1984,1986],{"class":279,"line":311},[277,1973,284],{"class":283},[277,1975,841],{"class":287},[277,1977,844],{"class":294},[277,1979,566],{"class":287},[277,1981,849],{"class":283},[277,1983,301],{"class":287},[277,1985,805],{"class":304},[277,1987,308],{"class":287},[277,1989,1990],{"class":279,"line":317},[277,1991,314],{"emptyLinePlaceholder":39},[277,1993,1994,1996,1999,2001,2003,2005,2009],{"class":279,"line":324},[277,1995,328],{"class":327},[277,1997,1998],{"class":294}," isRed ",[277,2000,334],{"class":287},[277,2002,844],{"class":346},[277,2004,372],{"class":294},[277,2006,2008],{"class":2007},"sfNiH","true",[277,2010,410],{"class":294},[277,2012,2013,2015,2018,2020,2023,2025,2027,2030,2033,2035,2038,2041,2043,2046,2048,2050,2052,2055,2057],{"class":279,"line":353},[277,2014,328],{"class":327},[277,2016,2017],{"class":294}," color ",[277,2019,334],{"class":287},[277,2021,2022],{"class":346}," computed",[277,2024,372],{"class":294},[277,2026,664],{"class":287},[277,2028,2029],{"class":327}," =>",[277,2031,2032],{"class":294}," isRed",[277,2034,343],{"class":287},[277,2036,2037],{"class":294},"value ",[277,2039,2040],{"class":287},"?",[277,2042,301],{"class":287},[277,2044,2045],{"class":304},"#ff0000",[277,2047,1934],{"class":287},[277,2049,1878],{"class":287},[277,2051,301],{"class":287},[277,2053,2054],{"class":304},"#00ff00",[277,2056,1934],{"class":287},[277,2058,410],{"class":294},[277,2060,2061],{"class":279,"line":413},[277,2062,314],{"emptyLinePlaceholder":39},[277,2064,2065,2067,2070,2072,2075,2077],{"class":279,"line":434},[277,2066,328],{"class":327},[277,2068,2069],{"class":294}," toggleColor ",[277,2071,334],{"class":287},[277,2073,2074],{"class":287}," ()",[277,2076,2029],{"class":327},[277,2078,667],{"class":287},[277,2080,2081,2084,2086,2088,2090,2093,2096,2098],{"class":279,"line":462},[277,2082,2083],{"class":294},"  isRed",[277,2085,343],{"class":287},[277,2087,923],{"class":294},[277,2089,891],{"class":287},[277,2091,2092],{"class":287}," !",[277,2094,2095],{"class":294},"isRed",[277,2097,343],{"class":287},[277,2099,2100],{"class":294},"value\n",[277,2102,2103],{"class":279,"line":486},[277,2104,748],{"class":287},[277,2106,2107,2109,2111],{"class":279,"line":491},[277,2108,984],{"class":287},[277,2110,815],{"class":556},[277,2112,834],{"class":287},[277,2114,2115],{"class":279,"line":497},[277,2116,314],{"emptyLinePlaceholder":39},[277,2118,2119,2121,2123],{"class":279,"line":532},[277,2120,812],{"class":287},[277,2122,999],{"class":556},[277,2124,834],{"class":287},[277,2126,2127,2129,2131,2134,2136,2138,2141,2143],{"class":279,"line":571},[277,2128,1006],{"class":287},[277,2130,1053],{"class":556},[277,2132,2133],{"class":327}," @click",[277,2135,334],{"class":287},[277,2137,826],{"class":287},[277,2139,2140],{"class":304},"toggleColor",[277,2142,826],{"class":287},[277,2144,834],{"class":287},[277,2146,2147,2149,2151],{"class":279,"line":598},[277,2148,1028],{"class":287},[277,2150,1760],{"class":556},[277,2152,1046],{"class":287},[277,2154,2155,2157,2159,2162,2164,2166,2168,2170],{"class":279,"line":603},[277,2156,1028],{"class":287},[277,2158,1769],{"class":556},[277,2160,2161],{"class":327}," :color",[277,2163,334],{"class":287},[277,2165,826],{"class":287},[277,2167,1895],{"class":304},[277,2169,826],{"class":287},[277,2171,1046],{"class":287},[277,2173,2174,2176,2178],{"class":279,"line":609},[277,2175,1109],{"class":287},[277,2177,1053],{"class":556},[277,2179,834],{"class":287},[277,2181,2182,2184,2186],{"class":279,"line":623},[277,2183,984],{"class":287},[277,2185,999],{"class":556},[277,2187,834],{"class":287},[245,2189,2191],{"id":2190},"why-declarative-is-better-for-3d","Why Declarative is Better for 3D",[757,2193,2195,2196],{"id":2194},"_1-predictable-state-management","1. ",[261,2197,2198],{},"Predictable State Management",[250,2200,2201],{},"Vue's reactivity system ensures that 3D objects always reflect the current state of your data.",[757,2203,2205,2206],{"id":2204},"_2-component-reusability","2. ",[261,2207,2208],{},"Component Reusability",[250,2210,2211],{},"Create reusable 3D components that can be easily composed and customized.",[266,2213,2216],{"className":802,"code":2214,"filename":2215,"language":805,"meta":272,"style":272},"\u003Cscript setup lang=\"ts\">\ninterface Props {\n  position?: [number, number, number]\n  color?: string\n  radius?: number\n}\n\nconst props = withDefaults(defineProps\u003CProps>(), {\n  position: () => [0, 0, 0],\n  color: '#ff6b35',\n  radius: 1\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresMesh :position=\"props.position\">\n    \u003CTresSphereGeometry :args=\"[props.radius]\" />\n    \u003CTresMeshStandardMaterial :color=\"props.color\" />\n  \u003C/TresMesh>\n\u003C/template>\n","reusable-sphere.vue",[274,2217,2218,2238,2249,2275,2285,2295,2299,2303,2334,2364,2378,2387,2393,2401,2405,2413,2432,2452,2471,2479],{"__ignoreMap":272},[277,2219,2220,2222,2224,2226,2228,2230,2232,2234,2236],{"class":279,"line":280},[277,2221,812],{"class":287},[277,2223,815],{"class":556},[277,2225,818],{"class":327},[277,2227,821],{"class":327},[277,2229,334],{"class":287},[277,2231,826],{"class":287},[277,2233,829],{"class":304},[277,2235,826],{"class":287},[277,2237,834],{"class":287},[277,2239,2240,2243,2247],{"class":279,"line":311},[277,2241,2242],{"class":327},"interface",[277,2244,2246],{"class":2245},"sBMFI"," Props",[277,2248,667],{"class":287},[277,2250,2251,2254,2257,2260,2263,2265,2268,2270,2272],{"class":279,"line":317},[277,2252,2253],{"class":556},"  position",[277,2255,2256],{"class":287},"?:",[277,2258,2259],{"class":294}," [",[277,2261,2262],{"class":2245},"number",[277,2264,379],{"class":287},[277,2266,2267],{"class":2245}," number",[277,2269,379],{"class":287},[277,2271,2267],{"class":2245},[277,2273,2274],{"class":294},"]\n",[277,2276,2277,2280,2282],{"class":279,"line":324},[277,2278,2279],{"class":556},"  color",[277,2281,2256],{"class":287},[277,2283,2284],{"class":2245}," string\n",[277,2286,2287,2290,2292],{"class":279,"line":353},[277,2288,2289],{"class":556},"  radius",[277,2291,2256],{"class":287},[277,2293,2294],{"class":2245}," number\n",[277,2296,2297],{"class":279,"line":413},[277,2298,748],{"class":287},[277,2300,2301],{"class":279,"line":434},[277,2302,314],{"emptyLinePlaceholder":39},[277,2304,2305,2307,2310,2312,2315,2317,2320,2322,2325,2328,2330,2332],{"class":279,"line":462},[277,2306,328],{"class":327},[277,2308,2309],{"class":294}," props ",[277,2311,334],{"class":287},[277,2313,2314],{"class":346}," withDefaults",[277,2316,372],{"class":294},[277,2318,2319],{"class":346},"defineProps",[277,2321,812],{"class":287},[277,2323,2324],{"class":2245},"Props",[277,2326,2327],{"class":287},">",[277,2329,664],{"class":294},[277,2331,379],{"class":287},[277,2333,667],{"class":287},[277,2335,2336,2338,2340,2342,2344,2346,2349,2351,2354,2356,2358,2361],{"class":279,"line":486},[277,2337,2253],{"class":346},[277,2339,560],{"class":287},[277,2341,2074],{"class":287},[277,2343,2029],{"class":327},[277,2345,2259],{"class":294},[277,2347,2348],{"class":375},"0",[277,2350,379],{"class":287},[277,2352,2353],{"class":375}," 0",[277,2355,379],{"class":287},[277,2357,2353],{"class":375},[277,2359,2360],{"class":294},"]",[277,2362,2363],{"class":287},",\n",[277,2365,2366,2368,2370,2372,2374,2376],{"class":279,"line":491},[277,2367,2279],{"class":556},[277,2369,560],{"class":287},[277,2371,301],{"class":287},[277,2373,1778],{"class":304},[277,2375,1934],{"class":287},[277,2377,2363],{"class":287},[277,2379,2380,2382,2384],{"class":279,"line":497},[277,2381,2289],{"class":556},[277,2383,560],{"class":287},[277,2385,2386],{"class":375}," 1\n",[277,2388,2389,2391],{"class":279,"line":532},[277,2390,888],{"class":287},[277,2392,410],{"class":294},[277,2394,2395,2397,2399],{"class":279,"line":571},[277,2396,984],{"class":287},[277,2398,815],{"class":556},[277,2400,834],{"class":287},[277,2402,2403],{"class":279,"line":598},[277,2404,314],{"emptyLinePlaceholder":39},[277,2406,2407,2409,2411],{"class":279,"line":603},[277,2408,812],{"class":287},[277,2410,999],{"class":556},[277,2412,834],{"class":287},[277,2414,2415,2417,2419,2421,2423,2425,2428,2430],{"class":279,"line":609},[277,2416,1006],{"class":287},[277,2418,1053],{"class":556},[277,2420,1034],{"class":327},[277,2422,334],{"class":287},[277,2424,826],{"class":287},[277,2426,2427],{"class":304},"props.position",[277,2429,826],{"class":287},[277,2431,834],{"class":287},[277,2433,2434,2436,2438,2441,2443,2445,2448,2450],{"class":279,"line":623},[277,2435,1028],{"class":287},[277,2437,1760],{"class":556},[277,2439,2440],{"class":327}," :args",[277,2442,334],{"class":287},[277,2444,826],{"class":287},[277,2446,2447],{"class":304},"[props.radius]",[277,2449,826],{"class":287},[277,2451,1046],{"class":287},[277,2453,2454,2456,2458,2460,2462,2464,2467,2469],{"class":279,"line":644},[277,2455,1028],{"class":287},[277,2457,1769],{"class":556},[277,2459,2161],{"class":327},[277,2461,334],{"class":287},[277,2463,826],{"class":287},[277,2465,2466],{"class":304},"props.color",[277,2468,826],{"class":287},[277,2470,1046],{"class":287},[277,2472,2473,2475,2477],{"class":279,"line":649},[277,2474,1109],{"class":287},[277,2476,1053],{"class":556},[277,2478,834],{"class":287},[277,2480,2481,2483,2485],{"class":279,"line":655},[277,2482,984],{"class":287},[277,2484,999],{"class":556},[277,2486,834],{"class":287},[757,2488,2490,2491],{"id":2489},"_3-easier-debugging","3. ",[261,2492,2493],{},"Easier Debugging",[250,2495,2496,2497,2504],{},"The ",[2498,2499,2503],"a",{"href":2500,"rel":2501},"https://devtools.vuejs.org/",[2502],"nofollow","Vue DevTools"," integration allows you to inspect 3D objects and their states visually.",[757,2506,2508,2509],{"id":2507},"_4-better-developer-experience","4. ",[261,2510,2511],{},"Better Developer Experience",[762,2513,2514,2517,2520],{},[765,2515,2516],{},"Type safety with TypeScript",[765,2518,2519],{},"IDE autocomplete and IntelliSense",[765,2521,2522],{},"Hot module replacement during development (almost every time)",[245,2524,2526],{"id":2525},"best-of-both-worlds","Best of Both Worlds",[250,2528,2529,2530,2533],{},"TresJS doesn't force you to choose between paradigms. You can combine both approaches when needed using the ",[274,2531,2532],{},"primitive"," component for direct Three.js integration:",[266,2535,2538],{"className":802,"code":2536,"filename":2537,"language":805,"meta":272,"style":272},"\u003Cscript setup lang=\"ts\">\nimport { BoxGeometry, Mesh, MeshStandardMaterial } from 'three'\n\n// Create Three.js objects imperatively when needed\nconst customGeometry = new BoxGeometry(2, 2, 2)\nconst customMaterial = new MeshStandardMaterial({\n  color: 0x00FF00,\n  metalness: 0.5,\n  roughness: 0.1\n})\nconst customMesh = new Mesh(customGeometry, customMaterial)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[0, 0, 5]\" />\n    \u003CTresAmbientLight />\n    \u003CTresDirectionalLight :position=\"[5, 5, 5]\" />\n\n    \u003C!-- Declarative approach -->\n    \u003CTresMesh :position=\"[-2, 0, 0]\">\n      \u003CTresBoxGeometry />\n      \u003CTresMeshStandardMaterial color=\"red\" />\n    \u003C/TresMesh>\n\n    \u003C!-- Imperative approach via primitive -->\n    \u003Cprimitive :object=\"customMesh\" :position=\"[2, 0, 0]\" />\n  \u003C/TresCanvas>\n\u003C/template>\n","hybrid-approach.vue",[274,2539,2540,2560,2589,2593,2598,2627,2644,2654,2665,2675,2681,2702,2710,2714,2722,2730,2748,2756,2774,2778,2783,2802,2810,2829,2837,2841,2846,2877,2886],{"__ignoreMap":272},[277,2541,2542,2544,2546,2548,2550,2552,2554,2556,2558],{"class":279,"line":280},[277,2543,812],{"class":287},[277,2545,815],{"class":556},[277,2547,818],{"class":327},[277,2549,821],{"class":327},[277,2551,334],{"class":287},[277,2553,826],{"class":287},[277,2555,829],{"class":304},[277,2557,826],{"class":287},[277,2559,834],{"class":287},[277,2561,2562,2564,2566,2569,2571,2574,2576,2579,2581,2583,2585,2587],{"class":279,"line":311},[277,2563,284],{"class":283},[277,2565,841],{"class":287},[277,2567,2568],{"class":294}," BoxGeometry",[277,2570,379],{"class":287},[277,2572,2573],{"class":294}," Mesh",[277,2575,379],{"class":287},[277,2577,2578],{"class":294}," MeshStandardMaterial",[277,2580,566],{"class":287},[277,2582,849],{"class":283},[277,2584,301],{"class":287},[277,2586,305],{"class":304},[277,2588,308],{"class":287},[277,2590,2591],{"class":279,"line":317},[277,2592,314],{"emptyLinePlaceholder":39},[277,2594,2595],{"class":279,"line":324},[277,2596,2597],{"class":320},"// Create Three.js objects imperatively when needed\n",[277,2599,2600,2602,2605,2607,2609,2611,2613,2616,2618,2621,2623,2625],{"class":279,"line":353},[277,2601,328],{"class":327},[277,2603,2604],{"class":294}," customGeometry ",[277,2606,334],{"class":287},[277,2608,337],{"class":287},[277,2610,2568],{"class":346},[277,2612,372],{"class":294},[277,2614,2615],{"class":375},"2",[277,2617,379],{"class":287},[277,2619,2620],{"class":375}," 2",[277,2622,379],{"class":287},[277,2624,2620],{"class":375},[277,2626,410],{"class":294},[277,2628,2629,2631,2634,2636,2638,2640,2642],{"class":279,"line":413},[277,2630,328],{"class":327},[277,2632,2633],{"class":294}," customMaterial ",[277,2635,334],{"class":287},[277,2637,337],{"class":287},[277,2639,2578],{"class":346},[277,2641,372],{"class":294},[277,2643,929],{"class":287},[277,2645,2646,2648,2650,2652],{"class":279,"line":434},[277,2647,2279],{"class":556},[277,2649,560],{"class":287},[277,2651,563],{"class":375},[277,2653,2363],{"class":287},[277,2655,2656,2659,2661,2663],{"class":279,"line":462},[277,2657,2658],{"class":556},"  metalness",[277,2660,560],{"class":287},[277,2662,1335],{"class":375},[277,2664,2363],{"class":287},[277,2666,2667,2670,2672],{"class":279,"line":486},[277,2668,2669],{"class":556},"  roughness",[277,2671,560],{"class":287},[277,2673,2674],{"class":375}," 0.1\n",[277,2676,2677,2679],{"class":279,"line":491},[277,2678,888],{"class":287},[277,2680,410],{"class":294},[277,2682,2683,2685,2688,2690,2692,2694,2697,2699],{"class":279,"line":497},[277,2684,328],{"class":327},[277,2686,2687],{"class":294}," customMesh ",[277,2689,334],{"class":287},[277,2691,337],{"class":287},[277,2693,2573],{"class":346},[277,2695,2696],{"class":294},"(customGeometry",[277,2698,379],{"class":287},[277,2700,2701],{"class":294}," customMaterial)\n",[277,2703,2704,2706,2708],{"class":279,"line":532},[277,2705,984],{"class":287},[277,2707,815],{"class":556},[277,2709,834],{"class":287},[277,2711,2712],{"class":279,"line":571},[277,2713,314],{"emptyLinePlaceholder":39},[277,2715,2716,2718,2720],{"class":279,"line":598},[277,2717,812],{"class":287},[277,2719,999],{"class":556},[277,2721,834],{"class":287},[277,2723,2724,2726,2728],{"class":279,"line":603},[277,2725,1006],{"class":287},[277,2727,1009],{"class":556},[277,2729,834],{"class":287},[277,2731,2732,2734,2736,2738,2740,2742,2744,2746],{"class":279,"line":609},[277,2733,1028],{"class":287},[277,2735,1031],{"class":556},[277,2737,1034],{"class":327},[277,2739,334],{"class":287},[277,2741,826],{"class":287},[277,2743,1041],{"class":304},[277,2745,826],{"class":287},[277,2747,1046],{"class":287},[277,2749,2750,2752,2754],{"class":279,"line":623},[277,2751,1028],{"class":287},[277,2753,1702],{"class":556},[277,2755,1046],{"class":287},[277,2757,2758,2760,2762,2764,2766,2768,2770,2772],{"class":279,"line":644},[277,2759,1028],{"class":287},[277,2761,1723],{"class":556},[277,2763,1034],{"class":327},[277,2765,334],{"class":287},[277,2767,826],{"class":287},[277,2769,1732],{"class":304},[277,2771,826],{"class":287},[277,2773,1046],{"class":287},[277,2775,2776],{"class":279,"line":649},[277,2777,314],{"emptyLinePlaceholder":39},[277,2779,2780],{"class":279,"line":655},[277,2781,2782],{"class":320},"    \u003C!-- Declarative approach -->\n",[277,2784,2785,2787,2789,2791,2793,2795,2798,2800],{"class":279,"line":670},[277,2786,1028],{"class":287},[277,2788,1053],{"class":556},[277,2790,1034],{"class":327},[277,2792,334],{"class":287},[277,2794,826],{"class":287},[277,2796,2797],{"class":304},"[-2, 0, 0]",[277,2799,826],{"class":287},[277,2801,834],{"class":287},[277,2803,2804,2806,2808],{"class":279,"line":683},[277,2805,1070],{"class":287},[277,2807,1073],{"class":556},[277,2809,1046],{"class":287},[277,2811,2812,2814,2816,2818,2820,2822,2825,2827],{"class":279,"line":705},[277,2813,1070],{"class":287},[277,2815,1769],{"class":556},[277,2817,557],{"class":327},[277,2819,334],{"class":287},[277,2821,826],{"class":287},[277,2823,2824],{"class":304},"red",[277,2826,826],{"class":287},[277,2828,1046],{"class":287},[277,2830,2831,2833,2835],{"class":279,"line":723},[277,2832,1100],{"class":287},[277,2834,1053],{"class":556},[277,2836,834],{"class":287},[277,2838,2839],{"class":279,"line":745},[277,2840,314],{"emptyLinePlaceholder":39},[277,2842,2843],{"class":279,"line":751},[277,2844,2845],{"class":320},"    \u003C!-- Imperative approach via primitive -->\n",[277,2847,2848,2850,2852,2855,2857,2859,2862,2864,2866,2868,2870,2873,2875],{"class":279,"line":1582},[277,2849,1028],{"class":287},[277,2851,2532],{"class":556},[277,2853,2854],{"class":327}," :object",[277,2856,334],{"class":287},[277,2858,826],{"class":287},[277,2860,2861],{"class":304},"customMesh",[277,2863,826],{"class":287},[277,2865,1034],{"class":327},[277,2867,334],{"class":287},[277,2869,826],{"class":287},[277,2871,2872],{"class":304},"[2, 0, 0]",[277,2874,826],{"class":287},[277,2876,1046],{"class":287},[277,2878,2880,2882,2884],{"class":279,"line":2879},28,[277,2881,1109],{"class":287},[277,2883,1009],{"class":556},[277,2885,834],{"class":287},[277,2887,2889,2891,2893],{"class":279,"line":2888},29,[277,2890,984],{"class":287},[277,2892,999],{"class":556},[277,2894,834],{"class":287},[2896,2897,2898],"tip",{},[250,2899,2900,2901,343],{},"This hybrid approach is particularly useful when integrating existing Three.js code or when you need the full power of Three.js for complex operations. Learn more about this in our ",[2498,2902,2903],{"href":167},"Primitives guide",[245,2905,2907],{"id":2906},"key-takeaways","Key Takeaways",[2909,2910,2911,2919,2926,2933],"card-group",{},[2912,2913,2916],"card",{"icon":2914,"title":2915},"i-lucide-lightbulb","Declarative Benefits",[250,2917,2918],{},"Write what you want, not how to achieve it. Let TresJS handle the complex Three.js operations.",[2912,2920,2923],{"icon":2921,"title":2922},"i-lucide-refresh-cw","Reactive by Design",[250,2924,2925],{},"Leverage Vue's reactivity system for automatic updates and seamless state management.",[2912,2927,2930],{"icon":2928,"title":2929},"i-lucide-layers","Component-First",[250,2931,2932],{},"Build reusable 3D components that can be composed and extended like any Vue component.",[2912,2934,2937],{"icon":2935,"title":2936},"i-lucide-settings","Flexible Architecture",[250,2938,2939],{},"Choose the right approach for each use case - declarative for most scenarios, imperative when needed.",[250,2941,2942],{},"The declarative approach in TresJS makes 3D development more accessible and maintainable while preserving the full power of Three.js underneath. This paradigm shift allows developers to focus on creating amazing 3D experiences rather than managing complex imperative code.",[2944,2945,2946],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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);}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":272,"searchDepth":280,"depth":311,"links":2948},[2949,2950,2953,2956,2960,2970,2971],{"id":247,"depth":311,"text":248},{"id":255,"depth":311,"text":256,"children":2951},[2952],{"id":759,"depth":317,"text":760},{"id":791,"depth":311,"text":792,"children":2954},[2955],{"id":1124,"depth":317,"text":1125},{"id":1154,"depth":311,"text":1155,"children":2957},[2958,2959],{"id":1161,"depth":317,"text":1162},{"id":1809,"depth":317,"text":1810},{"id":2190,"depth":311,"text":2191,"children":2961},[2962,2964,2966,2968],{"id":2194,"depth":317,"text":2963},"1. Predictable State Management",{"id":2204,"depth":317,"text":2965},"2. Component Reusability",{"id":2489,"depth":317,"text":2967},"3. Easier Debugging",{"id":2507,"depth":317,"text":2969},"4. Better Developer Experience",{"id":2525,"depth":311,"text":2526},{"id":2906,"depth":311,"text":2907},"Discover how TresJS transforms imperative Three.js code into declarative Vue components, making 3D development more intuitive and maintainable.","md",null,{},{"title":55,"description":2972},"kQMrZI-Pj8SIcy7gpOm5-lFC3rvqUhWVY8tY4zBnqo4",[2979,2981],{"title":44,"path":45,"stem":46,"description":2980,"children":-1},"Discover how TresJS leverages Vue 3's custom renderer API to bridge Vue's reactive component system with Three.js 3D scene management.",{"title":59,"path":60,"stem":61,"description":2982,"children":-1},"Learn how to effectively use Vue's reactivity system with TresJS while maintaining optimal performance in high-frequency render loops.",1782052334819]