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