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