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