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