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