[{"data":1,"prerenderedAt":2637},["ShallowReactive",2],{"navigation":3,"/api/composables/use-tres":256,"/api/composables/use-tres-surround":2632},[4,29,78,177,190,222,232,236,240,244,248,252],{"title":5,"path":6,"stem":7,"children":8,"icon":27,"titleTemplate":28},"Getting Started","/getting-started","1.getting-started/1.index",[9,12,17,22],{"title":10,"path":6,"stem":7,"icon":11},"Introduction","i-lucide-house",{"title":13,"path":14,"stem":15,"icon":16},"Installation","/getting-started/installation","1.getting-started/2.installation","i-lucide-download",{"title":18,"path":19,"stem":20,"icon":21},"Your First Scene","/getting-started/your-first-scene","1.getting-started/3.your-first-scene","i-lucide-donut",{"title":23,"path":24,"stem":25,"icon":26},"Upgrade Guide","/getting-started/upgrade-guide","1.getting-started/4.upgrade-guide","i-lucide-circle-arrow-up","i-lucide-rocket","%s · Get Started with TresJS",{"title":30,"path":31,"stem":32,"children":33},"Essentials","/essentials","2.essentials",[34,36,48],{"title":30,"path":31,"stem":35},"2.essentials/index",{"title":37,"icon":38,"open":39,"path":40,"stem":41,"children":42,"page":47},"Core Architecture","i-lucide-cpu",true,"/essentials/core-architecture","2.essentials/1.core-architecture",[43],{"title":44,"path":45,"stem":46},"Custom Vue Renderer","/essentials/core-architecture/custom-vue-renderer","2.essentials/1.core-architecture/2.custom-vue-renderer",false,{"title":49,"icon":50,"open":39,"path":51,"stem":52,"children":53,"page":47},"Key Concepts","i-lucide-medal","/essentials/concepts","2.essentials/2.concepts",[54,58,62,66,70,74],{"title":55,"path":56,"stem":57},"Declarative vs Imperative","/essentials/concepts/declarative-vs-imperative","2.essentials/2.concepts/1.declarative-vs-imperative",{"title":59,"path":60,"stem":61},"Reactivity","/essentials/concepts/reactivity","2.essentials/2.concepts/2.reactivity",{"title":63,"path":64,"stem":65},"Constructor Arguments","/essentials/concepts/constructor-arguments","2.essentials/2.concepts/3.constructor-arguments",{"title":67,"path":68,"stem":69},"Declarative Properties","/essentials/concepts/declarative-properties","2.essentials/2.concepts/4.declarative-properties",{"title":71,"path":72,"stem":73},"Extending the Catalogue","/essentials/concepts/extending-catalogue","2.essentials/2.concepts/5.extending-catalogue",{"title":75,"path":76,"stem":77},"Child Attachments","/essentials/concepts/child-attachments","2.essentials/2.concepts/6.child-attachments",{"title":79,"path":80,"stem":81,"children":82},"API","/api","3.api",[83,86,108,135,145,159],{"title":84,"path":80,"stem":85},"TresJS API Reference","3.api/1.index",{"title":87,"icon":88,"open":39,"path":89,"stem":90,"children":91,"page":47},"Components","i-lucide-box","/api/components","3.api/1.components",[92,96,100,104],{"title":93,"path":94,"stem":95},"\u003CTresCanvas />","/api/components/tres-canvas","3.api/1.components/tres-canvas",{"title":97,"path":98,"stem":99},"\u003CTresCanvasContext />","/api/components/tres-context","3.api/1.components/tres-context",{"title":101,"path":102,"stem":103},"Tres Components","/api/components/tres-objects","3.api/1.components/tres-objects",{"title":105,"path":106,"stem":107},"TresPortal","/api/components/tres-portal","3.api/1.components/tres-portal",{"title":109,"titleTemplate":110,"icon":111,"path":112,"stem":113,"children":114,"page":47},"Composables","%s · TresJS Composables","i-lucide-arrow-right-left","/api/composables","3.api/2.composables",[115,119,123,127,131],{"title":116,"path":117,"stem":118},"useTres","/api/composables/use-tres","3.api/2.composables/1.use-tres",{"title":120,"path":121,"stem":122},"useTresContext","/api/composables/use-tres-context","3.api/2.composables/2.use-tres-context",{"title":124,"path":125,"stem":126},"useLoop","/api/composables/use-loop","3.api/2.composables/3.use-loop",{"title":128,"path":129,"stem":130},"useGraph","/api/composables/use-graph","3.api/2.composables/4.use-graph",{"title":132,"path":133,"stem":134},"useLoader","/api/composables/use-loader","3.api/2.composables/5.use-loader",{"title":136,"icon":137,"path":138,"stem":139,"children":140,"page":47},"Event handling","i-lucide-mouse-pointer-2","/api/events","3.api/3.events",[141],{"title":142,"path":143,"stem":144},"Pointer Events","/api/events/pointer-events","3.api/3.events/1.pointer-events",{"title":146,"icon":147,"path":148,"stem":149,"children":150,"page":47},"Utils","i-lucide-wrench","/api/utils","3.api/4.utils",[151,155],{"title":152,"path":153,"stem":154},"Type Guards","/api/utils/type-guards","3.api/4.utils/1.type-guards",{"title":156,"path":157,"stem":158},"Directives","/api/utils/directives","3.api/4.utils/2.directives",{"title":160,"icon":161,"path":162,"stem":163,"children":164,"page":47},"Advanced","i-lucide-brain-circuit","/api/advanced","3.api/5.advanced",[165,169,173],{"title":166,"path":167,"stem":168},"Scaling Performance 🚀","/api/advanced/performance","3.api/5.advanced/performance",{"title":170,"path":171,"stem":172},"Primitives","/api/advanced/primitives","3.api/5.advanced/primitives",{"title":174,"path":175,"stem":176},"WebGPU","/api/advanced/web-gpu","3.api/5.advanced/web-gpu",{"title":178,"path":179,"stem":180,"children":181,"icon":184,"titleTemplate":189},"CLI","/cli","4.cli/1.index",[182,185],{"title":183,"path":179,"stem":180,"icon":184},"TresJS CLI","i-lucide-terminal",{"title":186,"path":187,"stem":188,"icon":88},"tres gltf","/cli/gltf","4.cli/2.gltf","%s · TresJS CLI",{"title":191,"path":192,"stem":193,"children":194},"Cookbook","/cookbook","5.cookbook",[195,198,202,206,210,214,218],{"title":196,"path":192,"stem":197},"Cookbook 🍳🧑‍🍳","5.cookbook/index",{"title":199,"path":200,"stem":201},"OrbitControls","/cookbook/orbit-controls","5.cookbook/1.orbit-controls",{"title":203,"path":204,"stem":205},"Basic Animations","/cookbook/basic-animations","5.cookbook/2.basic-animations",{"title":207,"path":208,"stem":209},"Model Animation","/cookbook/model-animation","5.cookbook/3.model-animation",{"title":211,"path":212,"stem":213},"Advanced GSAP Animations","/cookbook/advanced-gsap-animations","5.cookbook/4.advanced-gsap-animations",{"title":215,"path":216,"stem":217},"Tweakpane","/cookbook/tweakpane","5.cookbook/5.tweakpane",{"title":219,"path":220,"stem":221},"Dynamic components","/cookbook/transition-dynamic","5.cookbook/6.transition-dynamic",{"title":223,"path":224,"stem":225,"children":226},"Community","/community","6.community/1.index",[227,228],{"title":223,"path":224,"stem":225},{"title":229,"path":230,"stem":231},"Awesome Resources","/community/awesome-resources","6.community/awesome-resources",{"title":233,"path":234,"stem":235},"German Translation","/de","de",{"title":237,"path":238,"stem":239},"Spanish Translation","/es","es",{"title":241,"path":242,"stem":243},"French Translation","/fr","fr",{"title":245,"path":246,"stem":247},"Italian Translation","/it","it",{"title":249,"path":250,"stem":251},"Japanese Translation","/jp","jp",{"title":253,"path":254,"stem":255},"Chinese Translation","/zh","zh",{"id":257,"title":116,"body":258,"description":2626,"extension":2627,"links":2628,"meta":2629,"navigation":39,"path":117,"seo":2630,"stem":118,"__hash__":2631},"docs/3.api/2.composables/1.use-tres.md",{"type":259,"value":260,"toc":2611},"minimark",[261,272,277,297,513,518,1005,1008,1015,1202,1206,1210,1213,1393,1397,1402,1464,1468,1472,1674,1678,1856,1860,2119,2123,2130,2207,2222,2226,2607],[262,263,264,265,268,269,271],"p",{},"The ",[266,267,116],"code",{}," composable provides convenient access to a simplified TresJS context with direct access to core properties like the scene, renderer, camera, and utility functions. It's designed to be more straightforward than ",[266,270,120],{}," while still providing access to essential TresJS functionality.",[273,274,276],"h2",{"id":275},"usage","Usage",[278,279,280],"warning",{},[262,281,282,284,285,291,292,296],{},[266,283,116],{}," can only be used in child components of a ",[286,287,288],"a",{"href":94},[266,289,290],{},"TresCanvas"," component, as its data is provided by ",[286,293,294],{"href":94},[266,295,290],{},".",[298,299,304],"pre",{"className":300,"code":301,"language":302,"meta":303,"style":303},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { useTres } from '@tresjs/core'\n\nconst { scene, renderer, camera, sizes, invalidate, advance } = useTres()\n\n// Access the active camera\nconsole.log('Current camera:', camera.value)\n\n// Get canvas dimensions\nconsole.log('Canvas size:', sizes.width.value, sizes.height.value)\n\n// Trigger a re-render in on-demand mode\ninvalidate()\n","ts","",[266,305,306,339,345,395,400,407,438,443,449,494,499,505],{"__ignoreMap":303},[307,308,311,315,319,323,326,329,332,336],"span",{"class":309,"line":310},"line",1,[307,312,314],{"class":313},"s7zQu","import",[307,316,318],{"class":317},"sMK4o"," {",[307,320,322],{"class":321},"sTEyZ"," useTres",[307,324,325],{"class":317}," }",[307,327,328],{"class":313}," from",[307,330,331],{"class":317}," '",[307,333,335],{"class":334},"sfazB","@tresjs/core",[307,337,338],{"class":317},"'\n",[307,340,342],{"class":309,"line":341},2,[307,343,344],{"emptyLinePlaceholder":39},"\n",[307,346,348,352,354,357,360,363,365,368,370,373,375,378,380,383,386,389,392],{"class":309,"line":347},3,[307,349,351],{"class":350},"spNyl","const",[307,353,318],{"class":317},[307,355,356],{"class":321}," scene",[307,358,359],{"class":317},",",[307,361,362],{"class":321}," renderer",[307,364,359],{"class":317},[307,366,367],{"class":321}," camera",[307,369,359],{"class":317},[307,371,372],{"class":321}," sizes",[307,374,359],{"class":317},[307,376,377],{"class":321}," invalidate",[307,379,359],{"class":317},[307,381,382],{"class":321}," advance ",[307,384,385],{"class":317},"}",[307,387,388],{"class":317}," =",[307,390,322],{"class":391},"s2Zo4",[307,393,394],{"class":321},"()\n",[307,396,398],{"class":309,"line":397},4,[307,399,344],{"emptyLinePlaceholder":39},[307,401,403],{"class":309,"line":402},5,[307,404,406],{"class":405},"sHwdD","// Access the active camera\n",[307,408,410,413,415,418,421,424,427,429,431,433,435],{"class":309,"line":409},6,[307,411,412],{"class":321},"console",[307,414,296],{"class":317},[307,416,417],{"class":391},"log",[307,419,420],{"class":321},"(",[307,422,423],{"class":317},"'",[307,425,426],{"class":334},"Current camera:",[307,428,423],{"class":317},[307,430,359],{"class":317},[307,432,367],{"class":321},[307,434,296],{"class":317},[307,436,437],{"class":321},"value)\n",[307,439,441],{"class":309,"line":440},7,[307,442,344],{"emptyLinePlaceholder":39},[307,444,446],{"class":309,"line":445},8,[307,447,448],{"class":405},"// Get canvas dimensions\n",[307,450,452,454,456,458,460,462,465,467,469,471,473,476,478,481,483,485,487,490,492],{"class":309,"line":451},9,[307,453,412],{"class":321},[307,455,296],{"class":317},[307,457,417],{"class":391},[307,459,420],{"class":321},[307,461,423],{"class":317},[307,463,464],{"class":334},"Canvas size:",[307,466,423],{"class":317},[307,468,359],{"class":317},[307,470,372],{"class":321},[307,472,296],{"class":317},[307,474,475],{"class":321},"width",[307,477,296],{"class":317},[307,479,480],{"class":321},"value",[307,482,359],{"class":317},[307,484,372],{"class":321},[307,486,296],{"class":317},[307,488,489],{"class":321},"height",[307,491,296],{"class":317},[307,493,437],{"class":321},[307,495,497],{"class":309,"line":496},10,[307,498,344],{"emptyLinePlaceholder":39},[307,500,502],{"class":309,"line":501},11,[307,503,504],{"class":405},"// Trigger a re-render in on-demand mode\n",[307,506,508,511],{"class":309,"line":507},12,[307,509,510],{"class":391},"invalidate",[307,512,394],{"class":321},[514,515,517],"h3",{"id":516},"basic-example","Basic Example",[519,520,521,890],"code-group",{},[298,522,527],{"className":523,"code":524,"filename":525,"language":526,"meta":303,"style":303},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { useTres } from '@tresjs/core'\nimport { watchEffect } from 'vue'\n\nconst { camera, sizes, invalidate } = useTres()\n\n// React to camera changes\nwatchEffect(() => {\n  if (camera.value) {\n    console.log('Camera position:', camera.value.position)\n    // Invalidate when camera changes to trigger re-render\n    invalidate()\n  }\n})\n\n// React to size changes\nwatchEffect(() => {\n  console.log(`Canvas resized to: ${sizes.width.value}x${sizes.height.value}`)\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresMesh>\n    \u003CTresBoxGeometry />\n    \u003CTresMeshNormalMaterial />\n  \u003C/TresMesh>\n\u003C/template>\n","MyComponent.vue","vue",[266,528,529,557,575,594,598,623,627,632,648,669,703,708,715,721,728,733,739,752,806,813,823,828,838,849,861,871,881],{"__ignoreMap":303},[307,530,531,534,538,541,544,547,550,552,554],{"class":309,"line":310},[307,532,533],{"class":317},"\u003C",[307,535,537],{"class":536},"swJcz","script",[307,539,540],{"class":350}," setup",[307,542,543],{"class":350}," lang",[307,545,546],{"class":317},"=",[307,548,549],{"class":317},"\"",[307,551,302],{"class":334},[307,553,549],{"class":317},[307,555,556],{"class":317},">\n",[307,558,559,561,563,565,567,569,571,573],{"class":309,"line":341},[307,560,314],{"class":313},[307,562,318],{"class":317},[307,564,322],{"class":321},[307,566,325],{"class":317},[307,568,328],{"class":313},[307,570,331],{"class":317},[307,572,335],{"class":334},[307,574,338],{"class":317},[307,576,577,579,581,584,586,588,590,592],{"class":309,"line":347},[307,578,314],{"class":313},[307,580,318],{"class":317},[307,582,583],{"class":321}," watchEffect",[307,585,325],{"class":317},[307,587,328],{"class":313},[307,589,331],{"class":317},[307,591,526],{"class":334},[307,593,338],{"class":317},[307,595,596],{"class":309,"line":397},[307,597,344],{"emptyLinePlaceholder":39},[307,599,600,602,604,606,608,610,612,615,617,619,621],{"class":309,"line":402},[307,601,351],{"class":350},[307,603,318],{"class":317},[307,605,367],{"class":321},[307,607,359],{"class":317},[307,609,372],{"class":321},[307,611,359],{"class":317},[307,613,614],{"class":321}," invalidate ",[307,616,385],{"class":317},[307,618,388],{"class":317},[307,620,322],{"class":391},[307,622,394],{"class":321},[307,624,625],{"class":309,"line":409},[307,626,344],{"emptyLinePlaceholder":39},[307,628,629],{"class":309,"line":440},[307,630,631],{"class":405},"// React to camera changes\n",[307,633,634,637,639,642,645],{"class":309,"line":445},[307,635,636],{"class":391},"watchEffect",[307,638,420],{"class":321},[307,640,641],{"class":317},"()",[307,643,644],{"class":350}," =>",[307,646,647],{"class":317}," {\n",[307,649,650,653,656,659,661,663,666],{"class":309,"line":451},[307,651,652],{"class":313},"  if",[307,654,655],{"class":536}," (",[307,657,658],{"class":321},"camera",[307,660,296],{"class":317},[307,662,480],{"class":321},[307,664,665],{"class":536},") ",[307,667,668],{"class":317},"{\n",[307,670,671,674,676,678,680,682,685,687,689,691,693,695,697,700],{"class":309,"line":496},[307,672,673],{"class":321},"    console",[307,675,296],{"class":317},[307,677,417],{"class":391},[307,679,420],{"class":536},[307,681,423],{"class":317},[307,683,684],{"class":334},"Camera position:",[307,686,423],{"class":317},[307,688,359],{"class":317},[307,690,367],{"class":321},[307,692,296],{"class":317},[307,694,480],{"class":321},[307,696,296],{"class":317},[307,698,699],{"class":321},"position",[307,701,702],{"class":536},")\n",[307,704,705],{"class":309,"line":501},[307,706,707],{"class":405},"    // Invalidate when camera changes to trigger re-render\n",[307,709,710,713],{"class":309,"line":507},[307,711,712],{"class":391},"    invalidate",[307,714,394],{"class":536},[307,716,718],{"class":309,"line":717},13,[307,719,720],{"class":317},"  }\n",[307,722,724,726],{"class":309,"line":723},14,[307,725,385],{"class":317},[307,727,702],{"class":321},[307,729,731],{"class":309,"line":730},15,[307,732,344],{"emptyLinePlaceholder":39},[307,734,736],{"class":309,"line":735},16,[307,737,738],{"class":405},"// React to size changes\n",[307,740,742,744,746,748,750],{"class":309,"line":741},17,[307,743,636],{"class":391},[307,745,420],{"class":321},[307,747,641],{"class":317},[307,749,644],{"class":350},[307,751,647],{"class":317},[307,753,755,758,760,762,764,767,770,773,776,778,780,782,784,786,789,791,793,795,797,799,801,804],{"class":309,"line":754},18,[307,756,757],{"class":321},"  console",[307,759,296],{"class":317},[307,761,417],{"class":391},[307,763,420],{"class":536},[307,765,766],{"class":317},"`",[307,768,769],{"class":334},"Canvas resized to: ",[307,771,772],{"class":317},"${",[307,774,775],{"class":321},"sizes",[307,777,296],{"class":317},[307,779,475],{"class":321},[307,781,296],{"class":317},[307,783,480],{"class":321},[307,785,385],{"class":317},[307,787,788],{"class":334},"x",[307,790,772],{"class":317},[307,792,775],{"class":321},[307,794,296],{"class":317},[307,796,489],{"class":321},[307,798,296],{"class":317},[307,800,480],{"class":321},[307,802,803],{"class":317},"}`",[307,805,702],{"class":536},[307,807,809,811],{"class":309,"line":808},19,[307,810,385],{"class":317},[307,812,702],{"class":321},[307,814,816,819,821],{"class":309,"line":815},20,[307,817,818],{"class":317},"\u003C/",[307,820,537],{"class":536},[307,822,556],{"class":317},[307,824,826],{"class":309,"line":825},21,[307,827,344],{"emptyLinePlaceholder":39},[307,829,831,833,836],{"class":309,"line":830},22,[307,832,533],{"class":317},[307,834,835],{"class":536},"template",[307,837,556],{"class":317},[307,839,841,844,847],{"class":309,"line":840},23,[307,842,843],{"class":317},"  \u003C",[307,845,846],{"class":536},"TresMesh",[307,848,556],{"class":317},[307,850,852,855,858],{"class":309,"line":851},24,[307,853,854],{"class":317},"    \u003C",[307,856,857],{"class":536},"TresBoxGeometry",[307,859,860],{"class":317}," />\n",[307,862,864,866,869],{"class":309,"line":863},25,[307,865,854],{"class":317},[307,867,868],{"class":536},"TresMeshNormalMaterial",[307,870,860],{"class":317},[307,872,874,877,879],{"class":309,"line":873},26,[307,875,876],{"class":317},"  \u003C/",[307,878,846],{"class":536},[307,880,556],{"class":317},[307,882,884,886,888],{"class":309,"line":883},27,[307,885,818],{"class":317},[307,887,835],{"class":536},[307,889,556],{"class":317},[298,891,894],{"className":523,"code":892,"filename":893,"language":526,"meta":303,"style":303},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport MyComponent from './MyComponent.vue'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CMyComponent />\n  \u003C/TresCanvas>\n\u003C/template>\n","App.vue",[266,895,896,916,935,952,960,964,972,980,989,997],{"__ignoreMap":303},[307,897,898,900,902,904,906,908,910,912,914],{"class":309,"line":310},[307,899,533],{"class":317},[307,901,537],{"class":536},[307,903,540],{"class":350},[307,905,543],{"class":350},[307,907,546],{"class":317},[307,909,549],{"class":317},[307,911,302],{"class":334},[307,913,549],{"class":317},[307,915,556],{"class":317},[307,917,918,920,922,925,927,929,931,933],{"class":309,"line":341},[307,919,314],{"class":313},[307,921,318],{"class":317},[307,923,924],{"class":321}," TresCanvas",[307,926,325],{"class":317},[307,928,328],{"class":313},[307,930,331],{"class":317},[307,932,335],{"class":334},[307,934,338],{"class":317},[307,936,937,939,942,945,947,950],{"class":309,"line":347},[307,938,314],{"class":313},[307,940,941],{"class":321}," MyComponent ",[307,943,944],{"class":313},"from",[307,946,331],{"class":317},[307,948,949],{"class":334},"./MyComponent.vue",[307,951,338],{"class":317},[307,953,954,956,958],{"class":309,"line":397},[307,955,818],{"class":317},[307,957,537],{"class":536},[307,959,556],{"class":317},[307,961,962],{"class":309,"line":402},[307,963,344],{"emptyLinePlaceholder":39},[307,965,966,968,970],{"class":309,"line":409},[307,967,533],{"class":317},[307,969,835],{"class":536},[307,971,556],{"class":317},[307,973,974,976,978],{"class":309,"line":440},[307,975,843],{"class":317},[307,977,290],{"class":536},[307,979,556],{"class":317},[307,981,982,984,987],{"class":309,"line":445},[307,983,854],{"class":317},[307,985,986],{"class":536},"MyComponent",[307,988,860],{"class":317},[307,990,991,993,995],{"class":309,"line":451},[307,992,876],{"class":317},[307,994,290],{"class":536},[307,996,556],{"class":317},[307,998,999,1001,1003],{"class":309,"line":496},[307,1000,818],{"class":317},[307,1002,835],{"class":536},[307,1004,556],{"class":317},[514,1006,71],{"id":1007},"extending-the-catalogue",[262,1009,1010,1011,1014],{},"Use the ",[266,1012,1013],{},"extend"," function to add custom Three.js objects to the TresJS catalogue:",[298,1016,1018],{"className":523,"code":1017,"language":526,"meta":303,"style":303},"\u003Cscript setup lang=\"ts\">\nimport { useTres } from '@tresjs/core'\nimport { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry'\nimport { FontLoader } from 'three/examples/jsm/loaders/FontLoader'\n\nconst { extend } = useTres()\n\n// Extend TresJS with custom geometries\nextend({ TextGeometry })\n\n// Now you can use \u003CTresTextGeometry> in your template\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresTextGeometry :args=\"['Hello TresJS!', { font: myFont, size: 1 }]\" />\n\u003C/template>\n",[266,1019,1020,1040,1058,1078,1098,1102,1119,1123,1128,1144,1148,1153,1161,1165,1173,1194],{"__ignoreMap":303},[307,1021,1022,1024,1026,1028,1030,1032,1034,1036,1038],{"class":309,"line":310},[307,1023,533],{"class":317},[307,1025,537],{"class":536},[307,1027,540],{"class":350},[307,1029,543],{"class":350},[307,1031,546],{"class":317},[307,1033,549],{"class":317},[307,1035,302],{"class":334},[307,1037,549],{"class":317},[307,1039,556],{"class":317},[307,1041,1042,1044,1046,1048,1050,1052,1054,1056],{"class":309,"line":341},[307,1043,314],{"class":313},[307,1045,318],{"class":317},[307,1047,322],{"class":321},[307,1049,325],{"class":317},[307,1051,328],{"class":313},[307,1053,331],{"class":317},[307,1055,335],{"class":334},[307,1057,338],{"class":317},[307,1059,1060,1062,1064,1067,1069,1071,1073,1076],{"class":309,"line":347},[307,1061,314],{"class":313},[307,1063,318],{"class":317},[307,1065,1066],{"class":321}," TextGeometry",[307,1068,325],{"class":317},[307,1070,328],{"class":313},[307,1072,331],{"class":317},[307,1074,1075],{"class":334},"three/examples/jsm/geometries/TextGeometry",[307,1077,338],{"class":317},[307,1079,1080,1082,1084,1087,1089,1091,1093,1096],{"class":309,"line":397},[307,1081,314],{"class":313},[307,1083,318],{"class":317},[307,1085,1086],{"class":321}," FontLoader",[307,1088,325],{"class":317},[307,1090,328],{"class":313},[307,1092,331],{"class":317},[307,1094,1095],{"class":334},"three/examples/jsm/loaders/FontLoader",[307,1097,338],{"class":317},[307,1099,1100],{"class":309,"line":402},[307,1101,344],{"emptyLinePlaceholder":39},[307,1103,1104,1106,1108,1111,1113,1115,1117],{"class":309,"line":409},[307,1105,351],{"class":350},[307,1107,318],{"class":317},[307,1109,1110],{"class":321}," extend ",[307,1112,385],{"class":317},[307,1114,388],{"class":317},[307,1116,322],{"class":391},[307,1118,394],{"class":321},[307,1120,1121],{"class":309,"line":440},[307,1122,344],{"emptyLinePlaceholder":39},[307,1124,1125],{"class":309,"line":445},[307,1126,1127],{"class":405},"// Extend TresJS with custom geometries\n",[307,1129,1130,1132,1134,1137,1140,1142],{"class":309,"line":451},[307,1131,1013],{"class":391},[307,1133,420],{"class":321},[307,1135,1136],{"class":317},"{",[307,1138,1139],{"class":321}," TextGeometry ",[307,1141,385],{"class":317},[307,1143,702],{"class":321},[307,1145,1146],{"class":309,"line":496},[307,1147,344],{"emptyLinePlaceholder":39},[307,1149,1150],{"class":309,"line":501},[307,1151,1152],{"class":405},"// Now you can use \u003CTresTextGeometry> in your template\n",[307,1154,1155,1157,1159],{"class":309,"line":507},[307,1156,818],{"class":317},[307,1158,537],{"class":536},[307,1160,556],{"class":317},[307,1162,1163],{"class":309,"line":717},[307,1164,344],{"emptyLinePlaceholder":39},[307,1166,1167,1169,1171],{"class":309,"line":723},[307,1168,533],{"class":317},[307,1170,835],{"class":536},[307,1172,556],{"class":317},[307,1174,1175,1177,1180,1183,1185,1187,1190,1192],{"class":309,"line":730},[307,1176,843],{"class":317},[307,1178,1179],{"class":536},"TresTextGeometry",[307,1181,1182],{"class":350}," :args",[307,1184,546],{"class":317},[307,1186,549],{"class":317},[307,1188,1189],{"class":334},"['Hello TresJS!', { font: myFont, size: 1 }]",[307,1191,549],{"class":317},[307,1193,860],{"class":317},[307,1195,1196,1198,1200],{"class":309,"line":735},[307,1197,818],{"class":317},[307,1199,835],{"class":536},[307,1201,556],{"class":317},[1203,1204],"read-more",{"to":1205},"/api/components/tres-objects#extending-the-catalogue",[514,1207,1209],{"id":1208},"manual-rendering-control","Manual Rendering Control",[262,1211,1212],{},"For precise control over when frames are rendered:",[298,1214,1216],{"className":523,"code":1215,"language":526,"meta":303,"style":303},"\u003Cscript setup lang=\"ts\">\nimport { useTres } from '@tresjs/core'\n\nconst { advance, invalidate } = useTres()\n\nconst handleUserInteraction = () => {\n  // In manual render mode, advance one frame\n  if (renderMode === 'manual') {\n    advance()\n  }\n  // In on-demand mode, mark for re-render\n  else if (renderMode === 'on-demand') {\n    invalidate()\n  }\n}\n\u003C/script>\n",[266,1217,1218,1238,1256,1260,1281,1285,1301,1306,1329,1336,1340,1345,1370,1376,1380,1385],{"__ignoreMap":303},[307,1219,1220,1222,1224,1226,1228,1230,1232,1234,1236],{"class":309,"line":310},[307,1221,533],{"class":317},[307,1223,537],{"class":536},[307,1225,540],{"class":350},[307,1227,543],{"class":350},[307,1229,546],{"class":317},[307,1231,549],{"class":317},[307,1233,302],{"class":334},[307,1235,549],{"class":317},[307,1237,556],{"class":317},[307,1239,1240,1242,1244,1246,1248,1250,1252,1254],{"class":309,"line":341},[307,1241,314],{"class":313},[307,1243,318],{"class":317},[307,1245,322],{"class":321},[307,1247,325],{"class":317},[307,1249,328],{"class":313},[307,1251,331],{"class":317},[307,1253,335],{"class":334},[307,1255,338],{"class":317},[307,1257,1258],{"class":309,"line":347},[307,1259,344],{"emptyLinePlaceholder":39},[307,1261,1262,1264,1266,1269,1271,1273,1275,1277,1279],{"class":309,"line":397},[307,1263,351],{"class":350},[307,1265,318],{"class":317},[307,1267,1268],{"class":321}," advance",[307,1270,359],{"class":317},[307,1272,614],{"class":321},[307,1274,385],{"class":317},[307,1276,388],{"class":317},[307,1278,322],{"class":391},[307,1280,394],{"class":321},[307,1282,1283],{"class":309,"line":402},[307,1284,344],{"emptyLinePlaceholder":39},[307,1286,1287,1289,1292,1294,1297,1299],{"class":309,"line":409},[307,1288,351],{"class":350},[307,1290,1291],{"class":321}," handleUserInteraction ",[307,1293,546],{"class":317},[307,1295,1296],{"class":317}," ()",[307,1298,644],{"class":350},[307,1300,647],{"class":317},[307,1302,1303],{"class":309,"line":440},[307,1304,1305],{"class":405},"  // In manual render mode, advance one frame\n",[307,1307,1308,1310,1312,1315,1318,1320,1323,1325,1327],{"class":309,"line":445},[307,1309,652],{"class":313},[307,1311,655],{"class":536},[307,1313,1314],{"class":321},"renderMode",[307,1316,1317],{"class":317}," ===",[307,1319,331],{"class":317},[307,1321,1322],{"class":334},"manual",[307,1324,423],{"class":317},[307,1326,665],{"class":536},[307,1328,668],{"class":317},[307,1330,1331,1334],{"class":309,"line":451},[307,1332,1333],{"class":391},"    advance",[307,1335,394],{"class":536},[307,1337,1338],{"class":309,"line":496},[307,1339,720],{"class":317},[307,1341,1342],{"class":309,"line":501},[307,1343,1344],{"class":405},"  // In on-demand mode, mark for re-render\n",[307,1346,1347,1350,1353,1355,1357,1359,1361,1364,1366,1368],{"class":309,"line":507},[307,1348,1349],{"class":313},"  else",[307,1351,1352],{"class":313}," if",[307,1354,655],{"class":536},[307,1356,1314],{"class":321},[307,1358,1317],{"class":317},[307,1360,331],{"class":317},[307,1362,1363],{"class":334},"on-demand",[307,1365,423],{"class":317},[307,1367,665],{"class":536},[307,1369,668],{"class":317},[307,1371,1372,1374],{"class":309,"line":717},[307,1373,712],{"class":391},[307,1375,394],{"class":536},[307,1377,1378],{"class":309,"line":723},[307,1379,720],{"class":317},[307,1381,1382],{"class":309,"line":730},[307,1383,1384],{"class":317},"}\n",[307,1386,1387,1389,1391],{"class":309,"line":735},[307,1388,818],{"class":317},[307,1390,537],{"class":536},[307,1392,556],{"class":317},[273,1394,1396],{"id":1395},"properties","Properties",[262,1398,264,1399,1401],{},[266,1400,116],{}," composable returns an object with the following properties:",[1403,1404,1405,1413,1420,1426,1432,1439,1445,1452,1458],"field-group",{},[1406,1407,1410],"field",{"name":1408,"type":1409},"scene","ShallowRef\u003CTresScene>",[262,1411,1412],{},"The Three.js scene object containing all 3D objects in your scene.",[1406,1414,1417],{"name":1415,"type":1416},"renderer","TresRenderer",[262,1418,1419],{},"The Three.js WebGL renderer instance. Direct access to renderer methods and properties.",[1406,1421,1423],{"name":658,"type":1422},"ComputedRef\u003CCamera | undefined>",[262,1424,1425],{},"The currently active camera in the scene. Reactive reference that updates when the active camera changes.",[1406,1427,1429],{"name":775,"type":1428},"SizesType",[262,1430,1431],{},"Reactive size information including canvas width, height, aspect ratio, and pixel ratio.",[1406,1433,1436],{"name":1434,"type":1435},"controls","Ref\u003CTresControl | null>",[262,1437,1438],{},"Reference to the current camera controls instance (e.g., OrbitControls, FlyControls).",[1406,1440,1442],{"name":1013,"type":1441},"(objects: any) => void",[262,1443,1444],{},"Function to extend the TresJS component catalogue with custom Three.js objects.",[1406,1446,1449],{"name":1447,"type":1448},"events","EventManager",[262,1450,1451],{},"The event manager instance for handling pointer interactions with 3D objects.",[1406,1453,1455],{"name":510,"type":1454},"() => void",[262,1456,1457],{},"Function to mark the scene as needing an update in the next frame. Essential for on-demand rendering mode.",[1406,1459,1461],{"name":1460,"type":1454},"advance",[262,1462,1463],{},"Function to manually advance the render loop by one frame. Required for manual rendering mode.",[273,1465,1467],{"id":1466},"practical-examples","Practical Examples",[514,1469,1471],{"id":1470},"responsive-camera-setup","Responsive Camera Setup",[298,1473,1475],{"className":523,"code":1474,"language":526,"meta":303,"style":303},"\u003Cscript setup lang=\"ts\">\nimport { useTres } from '@tresjs/core'\nimport { watchEffect } from 'vue'\n\nconst { camera, sizes } = useTres()\n\n// Update camera aspect ratio when canvas resizes\nwatchEffect(() => {\n  if (camera.value && 'aspect' in camera.value) {\n    camera.value.aspect = sizes.aspectRatio.value\n    camera.value.updateProjectionMatrix()\n  }\n})\n\u003C/script>\n",[266,1476,1477,1497,1515,1533,1537,1558,1562,1567,1579,1614,1641,1656,1660,1666],{"__ignoreMap":303},[307,1478,1479,1481,1483,1485,1487,1489,1491,1493,1495],{"class":309,"line":310},[307,1480,533],{"class":317},[307,1482,537],{"class":536},[307,1484,540],{"class":350},[307,1486,543],{"class":350},[307,1488,546],{"class":317},[307,1490,549],{"class":317},[307,1492,302],{"class":334},[307,1494,549],{"class":317},[307,1496,556],{"class":317},[307,1498,1499,1501,1503,1505,1507,1509,1511,1513],{"class":309,"line":341},[307,1500,314],{"class":313},[307,1502,318],{"class":317},[307,1504,322],{"class":321},[307,1506,325],{"class":317},[307,1508,328],{"class":313},[307,1510,331],{"class":317},[307,1512,335],{"class":334},[307,1514,338],{"class":317},[307,1516,1517,1519,1521,1523,1525,1527,1529,1531],{"class":309,"line":347},[307,1518,314],{"class":313},[307,1520,318],{"class":317},[307,1522,583],{"class":321},[307,1524,325],{"class":317},[307,1526,328],{"class":313},[307,1528,331],{"class":317},[307,1530,526],{"class":334},[307,1532,338],{"class":317},[307,1534,1535],{"class":309,"line":397},[307,1536,344],{"emptyLinePlaceholder":39},[307,1538,1539,1541,1543,1545,1547,1550,1552,1554,1556],{"class":309,"line":402},[307,1540,351],{"class":350},[307,1542,318],{"class":317},[307,1544,367],{"class":321},[307,1546,359],{"class":317},[307,1548,1549],{"class":321}," sizes ",[307,1551,385],{"class":317},[307,1553,388],{"class":317},[307,1555,322],{"class":391},[307,1557,394],{"class":321},[307,1559,1560],{"class":309,"line":409},[307,1561,344],{"emptyLinePlaceholder":39},[307,1563,1564],{"class":309,"line":440},[307,1565,1566],{"class":405},"// Update camera aspect ratio when canvas resizes\n",[307,1568,1569,1571,1573,1575,1577],{"class":309,"line":445},[307,1570,636],{"class":391},[307,1572,420],{"class":321},[307,1574,641],{"class":317},[307,1576,644],{"class":350},[307,1578,647],{"class":317},[307,1580,1581,1583,1585,1587,1589,1591,1594,1596,1599,1601,1604,1606,1608,1610,1612],{"class":309,"line":451},[307,1582,652],{"class":313},[307,1584,655],{"class":536},[307,1586,658],{"class":321},[307,1588,296],{"class":317},[307,1590,480],{"class":321},[307,1592,1593],{"class":317}," &&",[307,1595,331],{"class":317},[307,1597,1598],{"class":334},"aspect",[307,1600,423],{"class":317},[307,1602,1603],{"class":317}," in",[307,1605,367],{"class":321},[307,1607,296],{"class":317},[307,1609,480],{"class":321},[307,1611,665],{"class":536},[307,1613,668],{"class":317},[307,1615,1616,1619,1621,1623,1625,1627,1629,1631,1633,1636,1638],{"class":309,"line":496},[307,1617,1618],{"class":321},"    camera",[307,1620,296],{"class":317},[307,1622,480],{"class":321},[307,1624,296],{"class":317},[307,1626,1598],{"class":321},[307,1628,388],{"class":317},[307,1630,372],{"class":321},[307,1632,296],{"class":317},[307,1634,1635],{"class":321},"aspectRatio",[307,1637,296],{"class":317},[307,1639,1640],{"class":321},"value\n",[307,1642,1643,1645,1647,1649,1651,1654],{"class":309,"line":501},[307,1644,1618],{"class":321},[307,1646,296],{"class":317},[307,1648,480],{"class":321},[307,1650,296],{"class":317},[307,1652,1653],{"class":391},"updateProjectionMatrix",[307,1655,394],{"class":536},[307,1657,1658],{"class":309,"line":507},[307,1659,720],{"class":317},[307,1661,1662,1664],{"class":309,"line":717},[307,1663,385],{"class":317},[307,1665,702],{"class":321},[307,1667,1668,1670,1672],{"class":309,"line":723},[307,1669,818],{"class":317},[307,1671,537],{"class":536},[307,1673,556],{"class":317},[514,1675,1677],{"id":1676},"custom-render-pipeline","Custom Render Pipeline",[298,1679,1681],{"className":523,"code":1680,"language":526,"meta":303,"style":303},"\u003Cscript setup lang=\"ts\">\nimport { useTres } from '@tresjs/core'\nimport { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer'\n\nconst { renderer, scene, camera } = useTres()\n\n// Setup custom post-processing\nconst composer = new EffectComposer(renderer)\n// Add your custom passes here\n\n// Access to renderer for custom configuration\nrenderer.shadowMap.enabled = true\nrenderer.shadowMap.type = PCFSoftShadowMap\n\u003C/script>\n",[266,1682,1683,1703,1721,1741,1745,1770,1774,1779,1796,1801,1805,1810,1830,1848],{"__ignoreMap":303},[307,1684,1685,1687,1689,1691,1693,1695,1697,1699,1701],{"class":309,"line":310},[307,1686,533],{"class":317},[307,1688,537],{"class":536},[307,1690,540],{"class":350},[307,1692,543],{"class":350},[307,1694,546],{"class":317},[307,1696,549],{"class":317},[307,1698,302],{"class":334},[307,1700,549],{"class":317},[307,1702,556],{"class":317},[307,1704,1705,1707,1709,1711,1713,1715,1717,1719],{"class":309,"line":341},[307,1706,314],{"class":313},[307,1708,318],{"class":317},[307,1710,322],{"class":321},[307,1712,325],{"class":317},[307,1714,328],{"class":313},[307,1716,331],{"class":317},[307,1718,335],{"class":334},[307,1720,338],{"class":317},[307,1722,1723,1725,1727,1730,1732,1734,1736,1739],{"class":309,"line":347},[307,1724,314],{"class":313},[307,1726,318],{"class":317},[307,1728,1729],{"class":321}," EffectComposer",[307,1731,325],{"class":317},[307,1733,328],{"class":313},[307,1735,331],{"class":317},[307,1737,1738],{"class":334},"three/examples/jsm/postprocessing/EffectComposer",[307,1740,338],{"class":317},[307,1742,1743],{"class":309,"line":397},[307,1744,344],{"emptyLinePlaceholder":39},[307,1746,1747,1749,1751,1753,1755,1757,1759,1762,1764,1766,1768],{"class":309,"line":402},[307,1748,351],{"class":350},[307,1750,318],{"class":317},[307,1752,362],{"class":321},[307,1754,359],{"class":317},[307,1756,356],{"class":321},[307,1758,359],{"class":317},[307,1760,1761],{"class":321}," camera ",[307,1763,385],{"class":317},[307,1765,388],{"class":317},[307,1767,322],{"class":391},[307,1769,394],{"class":321},[307,1771,1772],{"class":309,"line":409},[307,1773,344],{"emptyLinePlaceholder":39},[307,1775,1776],{"class":309,"line":440},[307,1777,1778],{"class":405},"// Setup custom post-processing\n",[307,1780,1781,1783,1786,1788,1791,1793],{"class":309,"line":445},[307,1782,351],{"class":350},[307,1784,1785],{"class":321}," composer ",[307,1787,546],{"class":317},[307,1789,1790],{"class":317}," new",[307,1792,1729],{"class":391},[307,1794,1795],{"class":321},"(renderer)\n",[307,1797,1798],{"class":309,"line":451},[307,1799,1800],{"class":405},"// Add your custom passes here\n",[307,1802,1803],{"class":309,"line":496},[307,1804,344],{"emptyLinePlaceholder":39},[307,1806,1807],{"class":309,"line":501},[307,1808,1809],{"class":405},"// Access to renderer for custom configuration\n",[307,1811,1812,1814,1816,1819,1821,1824,1826],{"class":309,"line":507},[307,1813,1415],{"class":321},[307,1815,296],{"class":317},[307,1817,1818],{"class":321},"shadowMap",[307,1820,296],{"class":317},[307,1822,1823],{"class":321},"enabled ",[307,1825,546],{"class":317},[307,1827,1829],{"class":1828},"sfNiH"," true\n",[307,1831,1832,1834,1836,1838,1840,1843,1845],{"class":309,"line":717},[307,1833,1415],{"class":321},[307,1835,296],{"class":317},[307,1837,1818],{"class":321},[307,1839,296],{"class":317},[307,1841,1842],{"class":321},"type ",[307,1844,546],{"class":317},[307,1846,1847],{"class":321}," PCFSoftShadowMap\n",[307,1849,1850,1852,1854],{"class":309,"line":723},[307,1851,818],{"class":317},[307,1853,537],{"class":536},[307,1855,556],{"class":317},[514,1857,1859],{"id":1858},"dynamic-scene-management","Dynamic Scene Management",[298,1861,1863],{"className":523,"code":1862,"language":526,"meta":303,"style":303},"\u003Cscript setup lang=\"ts\">\nimport { useTres } from '@tresjs/core'\nimport { BoxGeometry, Mesh, MeshBasicMaterial } from 'three'\n\nconst { scene, invalidate } = useTres()\n\nconst addDynamicObject = () => {\n  const geometry = new BoxGeometry(1, 1, 1)\n  const material = new MeshBasicMaterial({ color: 0x00FF00 })\n  const cube = new Mesh(geometry, material)\n\n  // Add directly to the scene\n  scene.value.add(cube)\n\n  // Trigger re-render in on-demand mode\n  invalidate()\n}\n\u003C/script>\n",[266,1864,1865,1885,1903,1933,1937,1957,1961,1976,2007,2037,2061,2065,2070,2091,2095,2100,2107,2111],{"__ignoreMap":303},[307,1866,1867,1869,1871,1873,1875,1877,1879,1881,1883],{"class":309,"line":310},[307,1868,533],{"class":317},[307,1870,537],{"class":536},[307,1872,540],{"class":350},[307,1874,543],{"class":350},[307,1876,546],{"class":317},[307,1878,549],{"class":317},[307,1880,302],{"class":334},[307,1882,549],{"class":317},[307,1884,556],{"class":317},[307,1886,1887,1889,1891,1893,1895,1897,1899,1901],{"class":309,"line":341},[307,1888,314],{"class":313},[307,1890,318],{"class":317},[307,1892,322],{"class":321},[307,1894,325],{"class":317},[307,1896,328],{"class":313},[307,1898,331],{"class":317},[307,1900,335],{"class":334},[307,1902,338],{"class":317},[307,1904,1905,1907,1909,1912,1914,1917,1919,1922,1924,1926,1928,1931],{"class":309,"line":347},[307,1906,314],{"class":313},[307,1908,318],{"class":317},[307,1910,1911],{"class":321}," BoxGeometry",[307,1913,359],{"class":317},[307,1915,1916],{"class":321}," Mesh",[307,1918,359],{"class":317},[307,1920,1921],{"class":321}," MeshBasicMaterial",[307,1923,325],{"class":317},[307,1925,328],{"class":313},[307,1927,331],{"class":317},[307,1929,1930],{"class":334},"three",[307,1932,338],{"class":317},[307,1934,1935],{"class":309,"line":397},[307,1936,344],{"emptyLinePlaceholder":39},[307,1938,1939,1941,1943,1945,1947,1949,1951,1953,1955],{"class":309,"line":402},[307,1940,351],{"class":350},[307,1942,318],{"class":317},[307,1944,356],{"class":321},[307,1946,359],{"class":317},[307,1948,614],{"class":321},[307,1950,385],{"class":317},[307,1952,388],{"class":317},[307,1954,322],{"class":391},[307,1956,394],{"class":321},[307,1958,1959],{"class":309,"line":409},[307,1960,344],{"emptyLinePlaceholder":39},[307,1962,1963,1965,1968,1970,1972,1974],{"class":309,"line":440},[307,1964,351],{"class":350},[307,1966,1967],{"class":321}," addDynamicObject ",[307,1969,546],{"class":317},[307,1971,1296],{"class":317},[307,1973,644],{"class":350},[307,1975,647],{"class":317},[307,1977,1978,1981,1984,1986,1988,1990,1992,1996,1998,2001,2003,2005],{"class":309,"line":445},[307,1979,1980],{"class":350},"  const",[307,1982,1983],{"class":321}," geometry",[307,1985,388],{"class":317},[307,1987,1790],{"class":317},[307,1989,1911],{"class":391},[307,1991,420],{"class":536},[307,1993,1995],{"class":1994},"sbssI","1",[307,1997,359],{"class":317},[307,1999,2000],{"class":1994}," 1",[307,2002,359],{"class":317},[307,2004,2000],{"class":1994},[307,2006,702],{"class":536},[307,2008,2009,2011,2014,2016,2018,2020,2022,2024,2027,2030,2033,2035],{"class":309,"line":451},[307,2010,1980],{"class":350},[307,2012,2013],{"class":321}," material",[307,2015,388],{"class":317},[307,2017,1790],{"class":317},[307,2019,1921],{"class":391},[307,2021,420],{"class":536},[307,2023,1136],{"class":317},[307,2025,2026],{"class":536}," color",[307,2028,2029],{"class":317},":",[307,2031,2032],{"class":1994}," 0x00FF00",[307,2034,325],{"class":317},[307,2036,702],{"class":536},[307,2038,2039,2041,2044,2046,2048,2050,2052,2055,2057,2059],{"class":309,"line":496},[307,2040,1980],{"class":350},[307,2042,2043],{"class":321}," cube",[307,2045,388],{"class":317},[307,2047,1790],{"class":317},[307,2049,1916],{"class":391},[307,2051,420],{"class":536},[307,2053,2054],{"class":321},"geometry",[307,2056,359],{"class":317},[307,2058,2013],{"class":321},[307,2060,702],{"class":536},[307,2062,2063],{"class":309,"line":501},[307,2064,344],{"emptyLinePlaceholder":39},[307,2066,2067],{"class":309,"line":507},[307,2068,2069],{"class":405},"  // Add directly to the scene\n",[307,2071,2072,2075,2077,2079,2081,2084,2086,2089],{"class":309,"line":717},[307,2073,2074],{"class":321},"  scene",[307,2076,296],{"class":317},[307,2078,480],{"class":321},[307,2080,296],{"class":317},[307,2082,2083],{"class":391},"add",[307,2085,420],{"class":536},[307,2087,2088],{"class":321},"cube",[307,2090,702],{"class":536},[307,2092,2093],{"class":309,"line":723},[307,2094,344],{"emptyLinePlaceholder":39},[307,2096,2097],{"class":309,"line":730},[307,2098,2099],{"class":405},"  // Trigger re-render in on-demand mode\n",[307,2101,2102,2105],{"class":309,"line":735},[307,2103,2104],{"class":391},"  invalidate",[307,2106,394],{"class":536},[307,2108,2109],{"class":309,"line":741},[307,2110,1384],{"class":317},[307,2112,2113,2115,2117],{"class":309,"line":754},[307,2114,818],{"class":317},[307,2116,537],{"class":536},[307,2118,556],{"class":317},[273,2120,2122],{"id":2121},"difference-from-usetrescontext","Difference from useTresContext",[262,2124,2125,2127,2128,2029],{},[266,2126,116],{}," provides a simplified interface compared to ",[266,2129,120],{},[2131,2132,2133,2147],"table",{},[2134,2135,2136],"thead",{},[2137,2138,2139,2143,2145],"tr",{},[2140,2141,2142],"th",{},"Feature",[2140,2144,116],{},[2140,2146,120],{},[2148,2149,2150,2168,2181,2194],"tbody",{},[2137,2151,2152,2159,2165],{},[2153,2154,2155],"td",{},[2156,2157,2158],"strong",{},"Renderer",[2153,2160,2161,2162,2164],{},"Direct ",[266,2163,1416],{}," instance",[2153,2166,2167],{},"Renderer manager with additional methods",[2137,2169,2170,2175,2178],{},[2153,2171,2172],{},[2156,2173,2174],{},"Camera",[2153,2176,2177],{},"Active camera reference",[2153,2179,2180],{},"Full camera management system",[2137,2182,2183,2188,2191],{},[2153,2184,2185],{},[2156,2186,2187],{},"Complexity",[2153,2189,2190],{},"Simplified, focused API",[2153,2192,2193],{},"Complete context with all internal details",[2137,2195,2196,2201,2204],{},[2153,2197,2198],{},[2156,2199,2200],{},"Use Case",[2153,2202,2203],{},"Most common scenarios",[2153,2205,2206],{},"Advanced use cases, internal operations",[2208,2209,2210],"tip",{},[262,2211,2212,2215,2216,2218,2219,2221],{},[2156,2213,2214],{},"Developer Tip:","\nChoose ",[266,2217,116],{}," for typical 3D scene interactions, and ",[266,2220,120],{}," when you need access to the complete internal context.",[273,2223,2225],{"id":2224},"type","Type",[298,2227,2230],{"className":300,"code":2228,"filename":2229,"language":302,"meta":303,"style":303},"function useTres(): TresPartialContext\n\ninterface TresPartialContext {\n  /** The Three.js scene object containing all 3D objects */\n  scene: ShallowRef\u003CTresScene>\n  /** The Three.js WebGL renderer instance */\n  renderer: TresRenderer\n  /** The currently active camera */\n  camera: ComputedRef\u003CCamera | undefined>\n  /** Reactive size information for the canvas */\n  sizes: SizesType\n  /** Reference to current camera controls */\n  controls: Ref\u003CTresControl | null>\n  /** TresJS extension function for adding custom objects */\n  extend: (objects: any) => void\n  /** Event manager for pointer interactions */\n  events: EventManager\n  /** Mark scene for re-render in on-demand mode */\n  invalidate: () => void\n  /** Manually advance one frame in manual mode */\n  advance: () => void\n}\n\ninterface SizesType {\n  /** Canvas width in pixels */\n  width: Ref\u003Cnumber>\n  /** Canvas height in pixels */\n  height: Ref\u003Cnumber>\n  /** Canvas aspect ratio (width / height) */\n  aspectRatio: Ref\u003Cnumber>\n  /** Device pixel ratio */\n  pixelRatio: Ref\u003Cnumber>\n}\n\ntype TresRenderer = WebGLRenderer | Renderer\ntype TresControl = any // Camera controls instance\ntype EventManager = any // Event manager instance\n","Signature",[266,2231,2232,2246,2250,2260,2265,2281,2286,2296,2301,2323,2328,2338,2343,2365,2370,2396,2401,2411,2416,2428,2433,2446,2450,2454,2463,2468,2484,2489,2505,2511,2527,2533,2549,2554,2559,2577,2592],{"__ignoreMap":303},[307,2233,2234,2237,2239,2242],{"class":309,"line":310},[307,2235,2236],{"class":350},"function",[307,2238,322],{"class":391},[307,2240,2241],{"class":317},"():",[307,2243,2245],{"class":2244},"sBMFI"," TresPartialContext\n",[307,2247,2248],{"class":309,"line":341},[307,2249,344],{"emptyLinePlaceholder":39},[307,2251,2252,2255,2258],{"class":309,"line":347},[307,2253,2254],{"class":350},"interface",[307,2256,2257],{"class":2244}," TresPartialContext",[307,2259,647],{"class":317},[307,2261,2262],{"class":309,"line":397},[307,2263,2264],{"class":405},"  /** The Three.js scene object containing all 3D objects */\n",[307,2266,2267,2269,2271,2274,2276,2279],{"class":309,"line":402},[307,2268,2074],{"class":536},[307,2270,2029],{"class":317},[307,2272,2273],{"class":2244}," ShallowRef",[307,2275,533],{"class":317},[307,2277,2278],{"class":2244},"TresScene",[307,2280,556],{"class":317},[307,2282,2283],{"class":309,"line":409},[307,2284,2285],{"class":405},"  /** The Three.js WebGL renderer instance */\n",[307,2287,2288,2291,2293],{"class":309,"line":440},[307,2289,2290],{"class":536},"  renderer",[307,2292,2029],{"class":317},[307,2294,2295],{"class":2244}," TresRenderer\n",[307,2297,2298],{"class":309,"line":445},[307,2299,2300],{"class":405},"  /** The currently active camera */\n",[307,2302,2303,2306,2308,2311,2313,2315,2318,2321],{"class":309,"line":451},[307,2304,2305],{"class":536},"  camera",[307,2307,2029],{"class":317},[307,2309,2310],{"class":2244}," ComputedRef",[307,2312,533],{"class":317},[307,2314,2174],{"class":2244},[307,2316,2317],{"class":317}," |",[307,2319,2320],{"class":2244}," undefined",[307,2322,556],{"class":317},[307,2324,2325],{"class":309,"line":496},[307,2326,2327],{"class":405},"  /** Reactive size information for the canvas */\n",[307,2329,2330,2333,2335],{"class":309,"line":501},[307,2331,2332],{"class":536},"  sizes",[307,2334,2029],{"class":317},[307,2336,2337],{"class":2244}," SizesType\n",[307,2339,2340],{"class":309,"line":507},[307,2341,2342],{"class":405},"  /** Reference to current camera controls */\n",[307,2344,2345,2348,2350,2353,2355,2358,2360,2363],{"class":309,"line":717},[307,2346,2347],{"class":536},"  controls",[307,2349,2029],{"class":317},[307,2351,2352],{"class":2244}," Ref",[307,2354,533],{"class":317},[307,2356,2357],{"class":2244},"TresControl",[307,2359,2317],{"class":317},[307,2361,2362],{"class":2244}," null",[307,2364,556],{"class":317},[307,2366,2367],{"class":309,"line":723},[307,2368,2369],{"class":405},"  /** TresJS extension function for adding custom objects */\n",[307,2371,2372,2375,2377,2379,2383,2385,2388,2391,2393],{"class":309,"line":730},[307,2373,2374],{"class":536},"  extend",[307,2376,2029],{"class":317},[307,2378,655],{"class":317},[307,2380,2382],{"class":2381},"sHdIc","objects",[307,2384,2029],{"class":317},[307,2386,2387],{"class":2244}," any",[307,2389,2390],{"class":317},")",[307,2392,644],{"class":350},[307,2394,2395],{"class":2244}," void\n",[307,2397,2398],{"class":309,"line":735},[307,2399,2400],{"class":405},"  /** Event manager for pointer interactions */\n",[307,2402,2403,2406,2408],{"class":309,"line":741},[307,2404,2405],{"class":536},"  events",[307,2407,2029],{"class":317},[307,2409,2410],{"class":2244}," EventManager\n",[307,2412,2413],{"class":309,"line":754},[307,2414,2415],{"class":405},"  /** Mark scene for re-render in on-demand mode */\n",[307,2417,2418,2420,2422,2424,2426],{"class":309,"line":808},[307,2419,2104],{"class":536},[307,2421,2029],{"class":317},[307,2423,1296],{"class":317},[307,2425,644],{"class":350},[307,2427,2395],{"class":2244},[307,2429,2430],{"class":309,"line":815},[307,2431,2432],{"class":405},"  /** Manually advance one frame in manual mode */\n",[307,2434,2435,2438,2440,2442,2444],{"class":309,"line":825},[307,2436,2437],{"class":536},"  advance",[307,2439,2029],{"class":317},[307,2441,1296],{"class":317},[307,2443,644],{"class":350},[307,2445,2395],{"class":2244},[307,2447,2448],{"class":309,"line":830},[307,2449,1384],{"class":317},[307,2451,2452],{"class":309,"line":840},[307,2453,344],{"emptyLinePlaceholder":39},[307,2455,2456,2458,2461],{"class":309,"line":851},[307,2457,2254],{"class":350},[307,2459,2460],{"class":2244}," SizesType",[307,2462,647],{"class":317},[307,2464,2465],{"class":309,"line":863},[307,2466,2467],{"class":405},"  /** Canvas width in pixels */\n",[307,2469,2470,2473,2475,2477,2479,2482],{"class":309,"line":873},[307,2471,2472],{"class":536},"  width",[307,2474,2029],{"class":317},[307,2476,2352],{"class":2244},[307,2478,533],{"class":317},[307,2480,2481],{"class":2244},"number",[307,2483,556],{"class":317},[307,2485,2486],{"class":309,"line":883},[307,2487,2488],{"class":405},"  /** Canvas height in pixels */\n",[307,2490,2492,2495,2497,2499,2501,2503],{"class":309,"line":2491},28,[307,2493,2494],{"class":536},"  height",[307,2496,2029],{"class":317},[307,2498,2352],{"class":2244},[307,2500,533],{"class":317},[307,2502,2481],{"class":2244},[307,2504,556],{"class":317},[307,2506,2508],{"class":309,"line":2507},29,[307,2509,2510],{"class":405},"  /** Canvas aspect ratio (width / height) */\n",[307,2512,2514,2517,2519,2521,2523,2525],{"class":309,"line":2513},30,[307,2515,2516],{"class":536},"  aspectRatio",[307,2518,2029],{"class":317},[307,2520,2352],{"class":2244},[307,2522,533],{"class":317},[307,2524,2481],{"class":2244},[307,2526,556],{"class":317},[307,2528,2530],{"class":309,"line":2529},31,[307,2531,2532],{"class":405},"  /** Device pixel ratio */\n",[307,2534,2536,2539,2541,2543,2545,2547],{"class":309,"line":2535},32,[307,2537,2538],{"class":536},"  pixelRatio",[307,2540,2029],{"class":317},[307,2542,2352],{"class":2244},[307,2544,533],{"class":317},[307,2546,2481],{"class":2244},[307,2548,556],{"class":317},[307,2550,2552],{"class":309,"line":2551},33,[307,2553,1384],{"class":317},[307,2555,2557],{"class":309,"line":2556},34,[307,2558,344],{"emptyLinePlaceholder":39},[307,2560,2562,2564,2567,2569,2572,2574],{"class":309,"line":2561},35,[307,2563,2224],{"class":350},[307,2565,2566],{"class":2244}," TresRenderer",[307,2568,388],{"class":317},[307,2570,2571],{"class":2244}," WebGLRenderer",[307,2573,2317],{"class":317},[307,2575,2576],{"class":2244}," Renderer\n",[307,2578,2580,2582,2585,2587,2589],{"class":309,"line":2579},36,[307,2581,2224],{"class":350},[307,2583,2584],{"class":2244}," TresControl",[307,2586,388],{"class":317},[307,2588,2387],{"class":2244},[307,2590,2591],{"class":405}," // Camera controls instance\n",[307,2593,2595,2597,2600,2602,2604],{"class":309,"line":2594},37,[307,2596,2224],{"class":350},[307,2598,2599],{"class":2244}," EventManager",[307,2601,388],{"class":317},[307,2603,2387],{"class":2244},[307,2605,2606],{"class":405}," // Event manager instance\n",[2608,2609,2610],"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 .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 .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 .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 .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":303,"searchDepth":310,"depth":341,"links":2612},[2613,2618,2619,2624,2625],{"id":275,"depth":341,"text":276,"children":2614},[2615,2616,2617],{"id":516,"depth":347,"text":517},{"id":1007,"depth":347,"text":71},{"id":1208,"depth":347,"text":1209},{"id":1395,"depth":341,"text":1396},{"id":1466,"depth":341,"text":1467,"children":2620},[2621,2622,2623],{"id":1470,"depth":347,"text":1471},{"id":1676,"depth":347,"text":1677},{"id":1858,"depth":347,"text":1859},{"id":2121,"depth":341,"text":2122},{"id":2224,"depth":341,"text":2225},"useTres provides a convenient access to a simplified TresJS context.","md",null,{},{"title":116,"description":2626},"tHJiN91HCj0_lkp8sCpX2hEUEtcdFEsWtjHUx0I259M",[2633,2635],{"title":105,"path":106,"stem":107,"description":2634,"children":-1},"Reparent declarative children into any Object3D or Scene target.",{"title":120,"path":121,"stem":122,"description":2636,"children":-1},"useTresContext provides a complete access to the TresJS context.",1785417170606]