[{"data":1,"prerenderedAt":2655},["ShallowReactive",2],{"navigation":3,"/api/composables/use-tres":239,"/api/composables/use-tres-surround":2650},[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":2644,"extension":2645,"links":2646,"meta":2647,"navigation":39,"path":113,"seo":2648,"stem":114,"__hash__":2649},"docs/3.api/2.composables/1.use-tres.md",{"type":242,"value":243,"toc":2629},"minimark",[244,255,260,280,496,501,988,991,998,1222,1226,1230,1233,1413,1417,1422,1484,1488,1492,1694,1698,1876,1880,2137,2141,2148,2225,2240,2244,2625],[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,1214],{"__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,1169,1171,1173,1176,1178,1181,1183,1186,1189,1192,1195,1198,1201,1203,1207,1210,1212],{"class":292,"line":713},[290,1159,826],{"class":300},[290,1161,1162],{"class":519},"TresTextGeometry",[290,1164,1165],{"class":300}," :",[290,1167,1168],{"class":333},"args",[290,1170,529],{"class":300},[290,1172,532],{"class":300},[290,1174,1175],{"class":300},"[",[290,1177,406],{"class":300},[290,1179,1180],{"class":317},"Hello TresJS!",[290,1182,406],{"class":300},[290,1184,1185],{"class":300},", { ",[290,1187,1188],{"class":519},"font",[290,1190,1191],{"class":300},": ",[290,1193,1194],{"class":304},"myFont",[290,1196,1197],{"class":300},", ",[290,1199,1200],{"class":519},"size",[290,1202,1191],{"class":300},[290,1204,1206],{"class":1205},"sbssI","1",[290,1208,1209],{"class":300}," }]",[290,1211,532],{"class":300},[290,1213,843],{"class":300},[290,1215,1216,1218,1220],{"class":292,"line":718},[290,1217,801],{"class":300},[290,1219,818],{"class":519},[290,1221,539],{"class":300},[1223,1224],"read-more",{"to":1225},"/api/components/tres-objects#extending-the-catalogue",[497,1227,1229],{"id":1228},"manual-rendering-control","Manual Rendering Control",[245,1231,1232],{},"For precise control over when frames are rendered:",[281,1234,1236],{"className":506,"code":1235,"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,1237,1238,1258,1276,1280,1301,1305,1321,1326,1349,1356,1360,1365,1390,1396,1400,1405],{"__ignoreMap":286},[290,1239,1240,1242,1244,1246,1248,1250,1252,1254,1256],{"class":292,"line":293},[290,1241,516],{"class":300},[290,1243,520],{"class":519},[290,1245,523],{"class":333},[290,1247,526],{"class":333},[290,1249,529],{"class":300},[290,1251,532],{"class":300},[290,1253,285],{"class":317},[290,1255,532],{"class":300},[290,1257,539],{"class":300},[290,1259,1260,1262,1264,1266,1268,1270,1272,1274],{"class":292,"line":324},[290,1261,297],{"class":296},[290,1263,301],{"class":300},[290,1265,305],{"class":304},[290,1267,308],{"class":300},[290,1269,311],{"class":296},[290,1271,314],{"class":300},[290,1273,318],{"class":317},[290,1275,321],{"class":300},[290,1277,1278],{"class":292,"line":330},[290,1279,327],{"emptyLinePlaceholder":39},[290,1281,1282,1284,1286,1289,1291,1293,1295,1297,1299],{"class":292,"line":380},[290,1283,334],{"class":333},[290,1285,301],{"class":300},[290,1287,1288],{"class":304}," advance",[290,1290,342],{"class":300},[290,1292,597],{"class":304},[290,1294,368],{"class":300},[290,1296,371],{"class":300},[290,1298,305],{"class":374},[290,1300,377],{"class":304},[290,1302,1303],{"class":292,"line":385},[290,1304,327],{"emptyLinePlaceholder":39},[290,1306,1307,1309,1312,1314,1317,1319],{"class":292,"line":392},[290,1308,334],{"class":333},[290,1310,1311],{"class":304}," handleUserInteraction ",[290,1313,529],{"class":300},[290,1315,1316],{"class":300}," ()",[290,1318,627],{"class":333},[290,1320,630],{"class":300},[290,1322,1323],{"class":292,"line":423},[290,1324,1325],{"class":388},"  // In manual render mode, advance one frame\n",[290,1327,1328,1330,1332,1335,1338,1340,1343,1345,1347],{"class":292,"line":428},[290,1329,635],{"class":296},[290,1331,638],{"class":519},[290,1333,1334],{"class":304},"renderMode",[290,1336,1337],{"class":300}," ===",[290,1339,314],{"class":300},[290,1341,1342],{"class":317},"manual",[290,1344,406],{"class":300},[290,1346,648],{"class":519},[290,1348,651],{"class":300},[290,1350,1351,1354],{"class":292,"line":434},[290,1352,1353],{"class":374},"    advance",[290,1355,377],{"class":519},[290,1357,1358],{"class":292,"line":479},[290,1359,703],{"class":300},[290,1361,1362],{"class":292,"line":484},[290,1363,1364],{"class":388},"  // In on-demand mode, mark for re-render\n",[290,1366,1367,1370,1373,1375,1377,1379,1381,1384,1386,1388],{"class":292,"line":490},[290,1368,1369],{"class":296},"  else",[290,1371,1372],{"class":296}," if",[290,1374,638],{"class":519},[290,1376,1334],{"class":304},[290,1378,1337],{"class":300},[290,1380,314],{"class":300},[290,1382,1383],{"class":317},"on-demand",[290,1385,406],{"class":300},[290,1387,648],{"class":519},[290,1389,651],{"class":300},[290,1391,1392,1394],{"class":292,"line":700},[290,1393,695],{"class":374},[290,1395,377],{"class":519},[290,1397,1398],{"class":292,"line":706},[290,1399,703],{"class":300},[290,1401,1402],{"class":292,"line":713},[290,1403,1404],{"class":300},"}\n",[290,1406,1407,1409,1411],{"class":292,"line":718},[290,1408,801],{"class":300},[290,1410,520],{"class":519},[290,1412,539],{"class":300},[256,1414,1416],{"id":1415},"properties","Properties",[245,1418,247,1419,1421],{},[249,1420,112],{}," composable returns an object with the following properties:",[1423,1424,1425,1433,1440,1446,1452,1459,1465,1472,1478],"field-group",{},[1426,1427,1430],"field",{"name":1428,"type":1429},"scene","ShallowRef\u003CTresScene>",[245,1431,1432],{},"The Three.js scene object containing all 3D objects in your scene.",[1426,1434,1437],{"name":1435,"type":1436},"renderer","TresRenderer",[245,1438,1439],{},"The Three.js WebGL renderer instance. Direct access to renderer methods and properties.",[1426,1441,1443],{"name":641,"type":1442},"ComputedRef\u003CCamera | undefined>",[245,1444,1445],{},"The currently active camera in the scene. Reactive reference that updates when the active camera changes.",[1426,1447,1449],{"name":758,"type":1448},"SizesType",[245,1450,1451],{},"Reactive size information including canvas width, height, aspect ratio, and pixel ratio.",[1426,1453,1456],{"name":1454,"type":1455},"controls","Ref\u003CTresControl | null>",[245,1457,1458],{},"Reference to the current camera controls instance (e.g., OrbitControls, FlyControls).",[1426,1460,1462],{"name":996,"type":1461},"(objects: any) => void",[245,1463,1464],{},"Function to extend the TresJS component catalogue with custom Three.js objects.",[1426,1466,1469],{"name":1467,"type":1468},"events","EventManager",[245,1470,1471],{},"The event manager instance for handling pointer interactions with 3D objects.",[1426,1473,1475],{"name":493,"type":1474},"() => void",[245,1476,1477],{},"Function to mark the scene as needing an update in the next frame. Essential for on-demand rendering mode.",[1426,1479,1481],{"name":1480,"type":1474},"advance",[245,1482,1483],{},"Function to manually advance the render loop by one frame. Required for manual rendering mode.",[256,1485,1487],{"id":1486},"practical-examples","Practical Examples",[497,1489,1491],{"id":1490},"responsive-camera-setup","Responsive Camera Setup",[281,1493,1495],{"className":506,"code":1494,"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,1496,1497,1517,1535,1553,1557,1578,1582,1587,1599,1634,1661,1676,1680,1686],{"__ignoreMap":286},[290,1498,1499,1501,1503,1505,1507,1509,1511,1513,1515],{"class":292,"line":293},[290,1500,516],{"class":300},[290,1502,520],{"class":519},[290,1504,523],{"class":333},[290,1506,526],{"class":333},[290,1508,529],{"class":300},[290,1510,532],{"class":300},[290,1512,285],{"class":317},[290,1514,532],{"class":300},[290,1516,539],{"class":300},[290,1518,1519,1521,1523,1525,1527,1529,1531,1533],{"class":292,"line":324},[290,1520,297],{"class":296},[290,1522,301],{"class":300},[290,1524,305],{"class":304},[290,1526,308],{"class":300},[290,1528,311],{"class":296},[290,1530,314],{"class":300},[290,1532,318],{"class":317},[290,1534,321],{"class":300},[290,1536,1537,1539,1541,1543,1545,1547,1549,1551],{"class":292,"line":330},[290,1538,297],{"class":296},[290,1540,301],{"class":300},[290,1542,566],{"class":304},[290,1544,308],{"class":300},[290,1546,311],{"class":296},[290,1548,314],{"class":300},[290,1550,509],{"class":317},[290,1552,321],{"class":300},[290,1554,1555],{"class":292,"line":380},[290,1556,327],{"emptyLinePlaceholder":39},[290,1558,1559,1561,1563,1565,1567,1570,1572,1574,1576],{"class":292,"line":385},[290,1560,334],{"class":333},[290,1562,301],{"class":300},[290,1564,350],{"class":304},[290,1566,342],{"class":300},[290,1568,1569],{"class":304}," sizes ",[290,1571,368],{"class":300},[290,1573,371],{"class":300},[290,1575,305],{"class":374},[290,1577,377],{"class":304},[290,1579,1580],{"class":292,"line":392},[290,1581,327],{"emptyLinePlaceholder":39},[290,1583,1584],{"class":292,"line":423},[290,1585,1586],{"class":388},"// Update camera aspect ratio when canvas resizes\n",[290,1588,1589,1591,1593,1595,1597],{"class":292,"line":428},[290,1590,619],{"class":374},[290,1592,403],{"class":304},[290,1594,624],{"class":300},[290,1596,627],{"class":333},[290,1598,630],{"class":300},[290,1600,1601,1603,1605,1607,1609,1611,1614,1616,1619,1621,1624,1626,1628,1630,1632],{"class":292,"line":434},[290,1602,635],{"class":296},[290,1604,638],{"class":519},[290,1606,641],{"class":304},[290,1608,279],{"class":300},[290,1610,463],{"class":304},[290,1612,1613],{"class":300}," &&",[290,1615,314],{"class":300},[290,1617,1618],{"class":317},"aspect",[290,1620,406],{"class":300},[290,1622,1623],{"class":300}," in",[290,1625,350],{"class":304},[290,1627,279],{"class":300},[290,1629,463],{"class":304},[290,1631,648],{"class":519},[290,1633,651],{"class":300},[290,1635,1636,1639,1641,1643,1645,1647,1649,1651,1653,1656,1658],{"class":292,"line":479},[290,1637,1638],{"class":304},"    camera",[290,1640,279],{"class":300},[290,1642,463],{"class":304},[290,1644,279],{"class":300},[290,1646,1618],{"class":304},[290,1648,371],{"class":300},[290,1650,355],{"class":304},[290,1652,279],{"class":300},[290,1654,1655],{"class":304},"aspectRatio",[290,1657,279],{"class":300},[290,1659,1660],{"class":304},"value\n",[290,1662,1663,1665,1667,1669,1671,1674],{"class":292,"line":484},[290,1664,1638],{"class":304},[290,1666,279],{"class":300},[290,1668,463],{"class":304},[290,1670,279],{"class":300},[290,1672,1673],{"class":374},"updateProjectionMatrix",[290,1675,377],{"class":519},[290,1677,1678],{"class":292,"line":490},[290,1679,703],{"class":300},[290,1681,1682,1684],{"class":292,"line":700},[290,1683,368],{"class":300},[290,1685,685],{"class":304},[290,1687,1688,1690,1692],{"class":292,"line":706},[290,1689,801],{"class":300},[290,1691,520],{"class":519},[290,1693,539],{"class":300},[497,1695,1697],{"id":1696},"custom-render-pipeline","Custom Render Pipeline",[281,1699,1701],{"className":506,"code":1700,"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,1702,1703,1723,1741,1761,1765,1790,1794,1799,1816,1821,1825,1830,1850,1868],{"__ignoreMap":286},[290,1704,1705,1707,1709,1711,1713,1715,1717,1719,1721],{"class":292,"line":293},[290,1706,516],{"class":300},[290,1708,520],{"class":519},[290,1710,523],{"class":333},[290,1712,526],{"class":333},[290,1714,529],{"class":300},[290,1716,532],{"class":300},[290,1718,285],{"class":317},[290,1720,532],{"class":300},[290,1722,539],{"class":300},[290,1724,1725,1727,1729,1731,1733,1735,1737,1739],{"class":292,"line":324},[290,1726,297],{"class":296},[290,1728,301],{"class":300},[290,1730,305],{"class":304},[290,1732,308],{"class":300},[290,1734,311],{"class":296},[290,1736,314],{"class":300},[290,1738,318],{"class":317},[290,1740,321],{"class":300},[290,1742,1743,1745,1747,1750,1752,1754,1756,1759],{"class":292,"line":330},[290,1744,297],{"class":296},[290,1746,301],{"class":300},[290,1748,1749],{"class":304}," EffectComposer",[290,1751,308],{"class":300},[290,1753,311],{"class":296},[290,1755,314],{"class":300},[290,1757,1758],{"class":317},"three/examples/jsm/postprocessing/EffectComposer",[290,1760,321],{"class":300},[290,1762,1763],{"class":292,"line":380},[290,1764,327],{"emptyLinePlaceholder":39},[290,1766,1767,1769,1771,1773,1775,1777,1779,1782,1784,1786,1788],{"class":292,"line":385},[290,1768,334],{"class":333},[290,1770,301],{"class":300},[290,1772,345],{"class":304},[290,1774,342],{"class":300},[290,1776,339],{"class":304},[290,1778,342],{"class":300},[290,1780,1781],{"class":304}," camera ",[290,1783,368],{"class":300},[290,1785,371],{"class":300},[290,1787,305],{"class":374},[290,1789,377],{"class":304},[290,1791,1792],{"class":292,"line":392},[290,1793,327],{"emptyLinePlaceholder":39},[290,1795,1796],{"class":292,"line":423},[290,1797,1798],{"class":388},"// Setup custom post-processing\n",[290,1800,1801,1803,1806,1808,1811,1813],{"class":292,"line":428},[290,1802,334],{"class":333},[290,1804,1805],{"class":304}," composer ",[290,1807,529],{"class":300},[290,1809,1810],{"class":300}," new",[290,1812,1749],{"class":374},[290,1814,1815],{"class":304},"(renderer)\n",[290,1817,1818],{"class":292,"line":434},[290,1819,1820],{"class":388},"// Add your custom passes here\n",[290,1822,1823],{"class":292,"line":479},[290,1824,327],{"emptyLinePlaceholder":39},[290,1826,1827],{"class":292,"line":484},[290,1828,1829],{"class":388},"// Access to renderer for custom configuration\n",[290,1831,1832,1834,1836,1839,1841,1844,1846],{"class":292,"line":490},[290,1833,1435],{"class":304},[290,1835,279],{"class":300},[290,1837,1838],{"class":304},"shadowMap",[290,1840,279],{"class":300},[290,1842,1843],{"class":304},"enabled ",[290,1845,529],{"class":300},[290,1847,1849],{"class":1848},"sfNiH"," true\n",[290,1851,1852,1854,1856,1858,1860,1863,1865],{"class":292,"line":700},[290,1853,1435],{"class":304},[290,1855,279],{"class":300},[290,1857,1838],{"class":304},[290,1859,279],{"class":300},[290,1861,1862],{"class":304},"type ",[290,1864,529],{"class":300},[290,1866,1867],{"class":304}," PCFSoftShadowMap\n",[290,1869,1870,1872,1874],{"class":292,"line":706},[290,1871,801],{"class":300},[290,1873,520],{"class":519},[290,1875,539],{"class":300},[497,1877,1879],{"id":1878},"dynamic-scene-management","Dynamic Scene Management",[281,1881,1883],{"className":506,"code":1882,"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,1884,1885,1905,1923,1953,1957,1977,1981,1996,2025,2055,2079,2083,2088,2109,2113,2118,2125,2129],{"__ignoreMap":286},[290,1886,1887,1889,1891,1893,1895,1897,1899,1901,1903],{"class":292,"line":293},[290,1888,516],{"class":300},[290,1890,520],{"class":519},[290,1892,523],{"class":333},[290,1894,526],{"class":333},[290,1896,529],{"class":300},[290,1898,532],{"class":300},[290,1900,285],{"class":317},[290,1902,532],{"class":300},[290,1904,539],{"class":300},[290,1906,1907,1909,1911,1913,1915,1917,1919,1921],{"class":292,"line":324},[290,1908,297],{"class":296},[290,1910,301],{"class":300},[290,1912,305],{"class":304},[290,1914,308],{"class":300},[290,1916,311],{"class":296},[290,1918,314],{"class":300},[290,1920,318],{"class":317},[290,1922,321],{"class":300},[290,1924,1925,1927,1929,1932,1934,1937,1939,1942,1944,1946,1948,1951],{"class":292,"line":330},[290,1926,297],{"class":296},[290,1928,301],{"class":300},[290,1930,1931],{"class":304}," BoxGeometry",[290,1933,342],{"class":300},[290,1935,1936],{"class":304}," Mesh",[290,1938,342],{"class":300},[290,1940,1941],{"class":304}," MeshBasicMaterial",[290,1943,308],{"class":300},[290,1945,311],{"class":296},[290,1947,314],{"class":300},[290,1949,1950],{"class":317},"three",[290,1952,321],{"class":300},[290,1954,1955],{"class":292,"line":380},[290,1956,327],{"emptyLinePlaceholder":39},[290,1958,1959,1961,1963,1965,1967,1969,1971,1973,1975],{"class":292,"line":385},[290,1960,334],{"class":333},[290,1962,301],{"class":300},[290,1964,339],{"class":304},[290,1966,342],{"class":300},[290,1968,597],{"class":304},[290,1970,368],{"class":300},[290,1972,371],{"class":300},[290,1974,305],{"class":374},[290,1976,377],{"class":304},[290,1978,1979],{"class":292,"line":392},[290,1980,327],{"emptyLinePlaceholder":39},[290,1982,1983,1985,1988,1990,1992,1994],{"class":292,"line":423},[290,1984,334],{"class":333},[290,1986,1987],{"class":304}," addDynamicObject ",[290,1989,529],{"class":300},[290,1991,1316],{"class":300},[290,1993,627],{"class":333},[290,1995,630],{"class":300},[290,1997,1998,2001,2004,2006,2008,2010,2012,2014,2016,2019,2021,2023],{"class":292,"line":428},[290,1999,2000],{"class":333},"  const",[290,2002,2003],{"class":304}," geometry",[290,2005,371],{"class":300},[290,2007,1810],{"class":300},[290,2009,1931],{"class":374},[290,2011,403],{"class":519},[290,2013,1206],{"class":1205},[290,2015,342],{"class":300},[290,2017,2018],{"class":1205}," 1",[290,2020,342],{"class":300},[290,2022,2018],{"class":1205},[290,2024,685],{"class":519},[290,2026,2027,2029,2032,2034,2036,2038,2040,2042,2045,2048,2051,2053],{"class":292,"line":434},[290,2028,2000],{"class":333},[290,2030,2031],{"class":304}," material",[290,2033,371],{"class":300},[290,2035,1810],{"class":300},[290,2037,1941],{"class":374},[290,2039,403],{"class":519},[290,2041,1119],{"class":300},[290,2043,2044],{"class":519}," color",[290,2046,2047],{"class":300},":",[290,2049,2050],{"class":1205}," 0x00FF00",[290,2052,308],{"class":300},[290,2054,685],{"class":519},[290,2056,2057,2059,2062,2064,2066,2068,2070,2073,2075,2077],{"class":292,"line":479},[290,2058,2000],{"class":333},[290,2060,2061],{"class":304}," cube",[290,2063,371],{"class":300},[290,2065,1810],{"class":300},[290,2067,1936],{"class":374},[290,2069,403],{"class":519},[290,2071,2072],{"class":304},"geometry",[290,2074,342],{"class":300},[290,2076,2031],{"class":304},[290,2078,685],{"class":519},[290,2080,2081],{"class":292,"line":484},[290,2082,327],{"emptyLinePlaceholder":39},[290,2084,2085],{"class":292,"line":490},[290,2086,2087],{"class":388},"  // Add directly to the scene\n",[290,2089,2090,2093,2095,2097,2099,2102,2104,2107],{"class":292,"line":700},[290,2091,2092],{"class":304},"  scene",[290,2094,279],{"class":300},[290,2096,463],{"class":304},[290,2098,279],{"class":300},[290,2100,2101],{"class":374},"add",[290,2103,403],{"class":519},[290,2105,2106],{"class":304},"cube",[290,2108,685],{"class":519},[290,2110,2111],{"class":292,"line":706},[290,2112,327],{"emptyLinePlaceholder":39},[290,2114,2115],{"class":292,"line":713},[290,2116,2117],{"class":388},"  // Trigger re-render in on-demand mode\n",[290,2119,2120,2123],{"class":292,"line":718},[290,2121,2122],{"class":374},"  invalidate",[290,2124,377],{"class":519},[290,2126,2127],{"class":292,"line":724},[290,2128,1404],{"class":300},[290,2130,2131,2133,2135],{"class":292,"line":737},[290,2132,801],{"class":300},[290,2134,520],{"class":519},[290,2136,539],{"class":300},[256,2138,2140],{"id":2139},"difference-from-usetrescontext","Difference from useTresContext",[245,2142,2143,2145,2146,2047],{},[249,2144,112],{}," provides a simplified interface compared to ",[249,2147,116],{},[2149,2150,2151,2165],"table",{},[2152,2153,2154],"thead",{},[2155,2156,2157,2161,2163],"tr",{},[2158,2159,2160],"th",{},"Feature",[2158,2162,112],{},[2158,2164,116],{},[2166,2167,2168,2186,2199,2212],"tbody",{},[2155,2169,2170,2177,2183],{},[2171,2172,2173],"td",{},[2174,2175,2176],"strong",{},"Renderer",[2171,2178,2179,2180,2182],{},"Direct ",[249,2181,1436],{}," instance",[2171,2184,2185],{},"Renderer manager with additional methods",[2155,2187,2188,2193,2196],{},[2171,2189,2190],{},[2174,2191,2192],{},"Camera",[2171,2194,2195],{},"Active camera reference",[2171,2197,2198],{},"Full camera management system",[2155,2200,2201,2206,2209],{},[2171,2202,2203],{},[2174,2204,2205],{},"Complexity",[2171,2207,2208],{},"Simplified, focused API",[2171,2210,2211],{},"Complete context with all internal details",[2155,2213,2214,2219,2222],{},[2171,2215,2216],{},[2174,2217,2218],{},"Use Case",[2171,2220,2221],{},"Most common scenarios",[2171,2223,2224],{},"Advanced use cases, internal operations",[2226,2227,2228],"tip",{},[245,2229,2230,2233,2234,2236,2237,2239],{},[2174,2231,2232],{},"Developer Tip:","\nChoose ",[249,2235,112],{}," for typical 3D scene interactions, and ",[249,2238,116],{}," when you need access to the complete internal context.",[256,2241,2243],{"id":2242},"type","Type",[281,2245,2248],{"className":283,"code":2246,"filename":2247,"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,2249,2250,2264,2268,2278,2283,2299,2304,2314,2319,2341,2346,2356,2361,2383,2388,2414,2419,2429,2434,2446,2451,2464,2468,2472,2481,2486,2502,2507,2523,2529,2545,2551,2567,2572,2577,2595,2610],{"__ignoreMap":286},[290,2251,2252,2255,2257,2260],{"class":292,"line":293},[290,2253,2254],{"class":333},"function",[290,2256,305],{"class":374},[290,2258,2259],{"class":300},"():",[290,2261,2263],{"class":2262},"sBMFI"," TresPartialContext\n",[290,2265,2266],{"class":292,"line":324},[290,2267,327],{"emptyLinePlaceholder":39},[290,2269,2270,2273,2276],{"class":292,"line":330},[290,2271,2272],{"class":333},"interface",[290,2274,2275],{"class":2262}," TresPartialContext",[290,2277,630],{"class":300},[290,2279,2280],{"class":292,"line":380},[290,2281,2282],{"class":388},"  /** The Three.js scene object containing all 3D objects */\n",[290,2284,2285,2287,2289,2292,2294,2297],{"class":292,"line":385},[290,2286,2092],{"class":519},[290,2288,2047],{"class":300},[290,2290,2291],{"class":2262}," ShallowRef",[290,2293,516],{"class":300},[290,2295,2296],{"class":2262},"TresScene",[290,2298,539],{"class":300},[290,2300,2301],{"class":292,"line":392},[290,2302,2303],{"class":388},"  /** The Three.js WebGL renderer instance */\n",[290,2305,2306,2309,2311],{"class":292,"line":423},[290,2307,2308],{"class":519},"  renderer",[290,2310,2047],{"class":300},[290,2312,2313],{"class":2262}," TresRenderer\n",[290,2315,2316],{"class":292,"line":428},[290,2317,2318],{"class":388},"  /** The currently active camera */\n",[290,2320,2321,2324,2326,2329,2331,2333,2336,2339],{"class":292,"line":434},[290,2322,2323],{"class":519},"  camera",[290,2325,2047],{"class":300},[290,2327,2328],{"class":2262}," ComputedRef",[290,2330,516],{"class":300},[290,2332,2192],{"class":2262},[290,2334,2335],{"class":300}," |",[290,2337,2338],{"class":2262}," undefined",[290,2340,539],{"class":300},[290,2342,2343],{"class":292,"line":479},[290,2344,2345],{"class":388},"  /** Reactive size information for the canvas */\n",[290,2347,2348,2351,2353],{"class":292,"line":484},[290,2349,2350],{"class":519},"  sizes",[290,2352,2047],{"class":300},[290,2354,2355],{"class":2262}," SizesType\n",[290,2357,2358],{"class":292,"line":490},[290,2359,2360],{"class":388},"  /** Reference to current camera controls */\n",[290,2362,2363,2366,2368,2371,2373,2376,2378,2381],{"class":292,"line":700},[290,2364,2365],{"class":519},"  controls",[290,2367,2047],{"class":300},[290,2369,2370],{"class":2262}," Ref",[290,2372,516],{"class":300},[290,2374,2375],{"class":2262},"TresControl",[290,2377,2335],{"class":300},[290,2379,2380],{"class":2262}," null",[290,2382,539],{"class":300},[290,2384,2385],{"class":292,"line":706},[290,2386,2387],{"class":388},"  /** TresJS extension function for adding custom objects */\n",[290,2389,2390,2393,2395,2397,2401,2403,2406,2409,2411],{"class":292,"line":713},[290,2391,2392],{"class":519},"  extend",[290,2394,2047],{"class":300},[290,2396,638],{"class":300},[290,2398,2400],{"class":2399},"sHdIc","objects",[290,2402,2047],{"class":300},[290,2404,2405],{"class":2262}," any",[290,2407,2408],{"class":300},")",[290,2410,627],{"class":333},[290,2412,2413],{"class":2262}," void\n",[290,2415,2416],{"class":292,"line":718},[290,2417,2418],{"class":388},"  /** Event manager for pointer interactions */\n",[290,2420,2421,2424,2426],{"class":292,"line":724},[290,2422,2423],{"class":519},"  events",[290,2425,2047],{"class":300},[290,2427,2428],{"class":2262}," EventManager\n",[290,2430,2431],{"class":292,"line":737},[290,2432,2433],{"class":388},"  /** Mark scene for re-render in on-demand mode */\n",[290,2435,2436,2438,2440,2442,2444],{"class":292,"line":791},[290,2437,2122],{"class":519},[290,2439,2047],{"class":300},[290,2441,1316],{"class":300},[290,2443,627],{"class":333},[290,2445,2413],{"class":2262},[290,2447,2448],{"class":292,"line":798},[290,2449,2450],{"class":388},"  /** Manually advance one frame in manual mode */\n",[290,2452,2453,2456,2458,2460,2462],{"class":292,"line":808},[290,2454,2455],{"class":519},"  advance",[290,2457,2047],{"class":300},[290,2459,1316],{"class":300},[290,2461,627],{"class":333},[290,2463,2413],{"class":2262},[290,2465,2466],{"class":292,"line":813},[290,2467,1404],{"class":300},[290,2469,2470],{"class":292,"line":823},[290,2471,327],{"emptyLinePlaceholder":39},[290,2473,2474,2476,2479],{"class":292,"line":834},[290,2475,2272],{"class":333},[290,2477,2478],{"class":2262}," SizesType",[290,2480,630],{"class":300},[290,2482,2483],{"class":292,"line":846},[290,2484,2485],{"class":388},"  /** Canvas width in pixels */\n",[290,2487,2488,2491,2493,2495,2497,2500],{"class":292,"line":856},[290,2489,2490],{"class":519},"  width",[290,2492,2047],{"class":300},[290,2494,2370],{"class":2262},[290,2496,516],{"class":300},[290,2498,2499],{"class":2262},"number",[290,2501,539],{"class":300},[290,2503,2504],{"class":292,"line":866},[290,2505,2506],{"class":388},"  /** Canvas height in pixels */\n",[290,2508,2510,2513,2515,2517,2519,2521],{"class":292,"line":2509},28,[290,2511,2512],{"class":519},"  height",[290,2514,2047],{"class":300},[290,2516,2370],{"class":2262},[290,2518,516],{"class":300},[290,2520,2499],{"class":2262},[290,2522,539],{"class":300},[290,2524,2526],{"class":292,"line":2525},29,[290,2527,2528],{"class":388},"  /** Canvas aspect ratio (width / height) */\n",[290,2530,2532,2535,2537,2539,2541,2543],{"class":292,"line":2531},30,[290,2533,2534],{"class":519},"  aspectRatio",[290,2536,2047],{"class":300},[290,2538,2370],{"class":2262},[290,2540,516],{"class":300},[290,2542,2499],{"class":2262},[290,2544,539],{"class":300},[290,2546,2548],{"class":292,"line":2547},31,[290,2549,2550],{"class":388},"  /** Device pixel ratio */\n",[290,2552,2554,2557,2559,2561,2563,2565],{"class":292,"line":2553},32,[290,2555,2556],{"class":519},"  pixelRatio",[290,2558,2047],{"class":300},[290,2560,2370],{"class":2262},[290,2562,516],{"class":300},[290,2564,2499],{"class":2262},[290,2566,539],{"class":300},[290,2568,2570],{"class":292,"line":2569},33,[290,2571,1404],{"class":300},[290,2573,2575],{"class":292,"line":2574},34,[290,2576,327],{"emptyLinePlaceholder":39},[290,2578,2580,2582,2585,2587,2590,2592],{"class":292,"line":2579},35,[290,2581,2242],{"class":333},[290,2583,2584],{"class":2262}," TresRenderer",[290,2586,371],{"class":300},[290,2588,2589],{"class":2262}," WebGLRenderer",[290,2591,2335],{"class":300},[290,2593,2594],{"class":2262}," Renderer\n",[290,2596,2598,2600,2603,2605,2607],{"class":292,"line":2597},36,[290,2599,2242],{"class":333},[290,2601,2602],{"class":2262}," TresControl",[290,2604,371],{"class":300},[290,2606,2405],{"class":2262},[290,2608,2609],{"class":388}," // Camera controls instance\n",[290,2611,2613,2615,2618,2620,2622],{"class":292,"line":2612},37,[290,2614,2242],{"class":333},[290,2616,2617],{"class":2262}," EventManager",[290,2619,371],{"class":300},[290,2621,2405],{"class":2262},[290,2623,2624],{"class":388}," // Event manager instance\n",[2626,2627,2628],"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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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":2630},[2631,2636,2637,2642,2643],{"id":258,"depth":324,"text":259,"children":2632},[2633,2634,2635],{"id":499,"depth":330,"text":500},{"id":990,"depth":330,"text":71},{"id":1228,"depth":330,"text":1229},{"id":1415,"depth":324,"text":1416},{"id":1486,"depth":324,"text":1487,"children":2638},[2639,2640,2641],{"id":1490,"depth":330,"text":1491},{"id":1696,"depth":330,"text":1697},{"id":1878,"depth":330,"text":1879},{"id":2139,"depth":324,"text":2140},{"id":2242,"depth":324,"text":2243},"useTres provides a convenient access to a simplified TresJS context.","md",null,{},{"title":112,"description":2644},"mgfvapKyt-I3TeVVvGgkovjyOGqIUsp0lwpH8GM_w6I",[2651,2653],{"title":101,"path":102,"stem":103,"description":2652,"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":2654,"children":-1},"useTresContext provides a complete access to the TresJS context.",1774953659207]