[{"data":1,"prerenderedAt":1409},["ShallowReactive",2],{"navigation":3,"/api/components/tres-canvas":239,"/api/components/tres-canvas-surround":1404},[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":93,"body":241,"description":1398,"extension":1399,"links":1400,"meta":1401,"navigation":39,"path":94,"seo":1402,"stem":95,"__hash__":1403},"docs/3.api/1.components/tres-canvas.md",{"type":242,"value":243,"toc":1385},"minimark",[244,249,256,278,282,465,469,475,480,491,603,607,614,697,700,724,728,1280,1284,1361,1365,1381],[245,246,248],"h2",{"id":247},"component-overview","Component Overview",[250,251,252,255],"p",{},[253,254,93],"code",{}," creates the necessary Three.js environment and bridges the gap between Vue's reactivity system and Three.js's imperative rendering approach. It is responsible for:",[257,258,259,263,266,269,272,275],"ul",{},[260,261,262],"li",{},"Creating and configuring the WebGL canvas element",[260,264,265],{},"Setting up the Three.js scene, camera, and renderer",[260,267,268],{},"Establishing the render loop",[260,270,271],{},"Providing the shared context to all child components",[260,273,274],{},"Handling user events through a comprehensive event system",[260,276,277],{},"Managing memory and disposal of Three.js objects",[245,279,281],{"id":280},"usage","Usage",[283,284,290],"pre",{"className":285,"code":286,"filename":287,"language":288,"meta":289,"style":289},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas shadows>\n    \u003CTresPerspectiveCamera :position=\"[5, 5, 5]\" />\n    \u003C!-- Your scene content here -->\n  \u003C/TresCanvas>\n\u003C/template>\n","app.vue","vue","",[253,291,292,327,356,366,372,382,396,439,446,456],{"__ignoreMap":289},[293,294,297,301,305,309,312,315,318,322,324],"span",{"class":295,"line":296},"line",1,[293,298,300],{"class":299},"sMK4o","\u003C",[293,302,304],{"class":303},"swJcz","script",[293,306,308],{"class":307},"spNyl"," setup",[293,310,311],{"class":307}," lang",[293,313,314],{"class":299},"=",[293,316,317],{"class":299},"\"",[293,319,321],{"class":320},"sfazB","ts",[293,323,317],{"class":299},[293,325,326],{"class":299},">\n",[293,328,330,334,337,341,344,347,350,353],{"class":295,"line":329},2,[293,331,333],{"class":332},"s7zQu","import",[293,335,336],{"class":299}," {",[293,338,340],{"class":339},"sTEyZ"," TresCanvas",[293,342,343],{"class":299}," }",[293,345,346],{"class":332}," from",[293,348,349],{"class":299}," '",[293,351,352],{"class":320},"@tresjs/core",[293,354,355],{"class":299},"'\n",[293,357,359,362,364],{"class":295,"line":358},3,[293,360,361],{"class":299},"\u003C/",[293,363,304],{"class":303},[293,365,326],{"class":299},[293,367,369],{"class":295,"line":368},4,[293,370,371],{"emptyLinePlaceholder":39},"\n",[293,373,375,377,380],{"class":295,"line":374},5,[293,376,300],{"class":299},[293,378,379],{"class":303},"template",[293,381,326],{"class":299},[293,383,385,388,391,394],{"class":295,"line":384},6,[293,386,387],{"class":299},"  \u003C",[293,389,390],{"class":303},"TresCanvas",[293,392,393],{"class":307}," shadows",[293,395,326],{"class":299},[293,397,399,402,405,408,411,413,415,418,422,425,427,429,431,434,436],{"class":295,"line":398},7,[293,400,401],{"class":299},"    \u003C",[293,403,404],{"class":303},"TresPerspectiveCamera",[293,406,407],{"class":299}," :",[293,409,410],{"class":307},"position",[293,412,314],{"class":299},[293,414,317],{"class":299},[293,416,417],{"class":299},"[",[293,419,421],{"class":420},"sbssI","5",[293,423,424],{"class":299},", ",[293,426,421],{"class":420},[293,428,424],{"class":299},[293,430,421],{"class":420},[293,432,433],{"class":299},"]",[293,435,317],{"class":299},[293,437,438],{"class":299}," />\n",[293,440,442],{"class":295,"line":441},8,[293,443,445],{"class":444},"sHwdD","    \u003C!-- Your scene content here -->\n",[293,447,449,452,454],{"class":295,"line":448},9,[293,450,451],{"class":299},"  \u003C/",[293,453,390],{"class":303},[293,455,326],{"class":299},[293,457,459,461,463],{"class":295,"line":458},10,[293,460,361],{"class":299},[293,462,379],{"class":303},[293,464,326],{"class":299},[245,466,468],{"id":467},"canvas-size","Canvas Size",[250,470,471,472,474],{},"The ",[253,473,93],{}," component offers flexible sizing options to fit different layout requirements. Understanding how canvas sizing works is crucial for creating responsive 3D experiences.",[476,477,479],"h3",{"id":478},"default-behavior-parent-element-size","Default Behavior: Parent Element Size",[250,481,482,483,485,486,490],{},"By default, ",[253,484,93],{}," automatically adapts to its ",[487,488,489],"strong",{},"parent element's dimensions",". This is the most common and recommended approach as it integrates seamlessly with your existing CSS layout.",[283,492,495],{"className":285,"code":493,"filename":494,"language":288,"meta":289,"style":289},"\u003Ctemplate>\n  \u003Cdiv class=\"w-full aspect-video\">\n    \u003C!-- Canvas automatically fills the container -->\n    \u003CTresCanvas>\n      \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" />\n      \u003C!-- Your 3D scene here -->\n    \u003C/TresCanvas>\n  \u003C/div>\n\u003C/template>\n","parent-sized.vue",[253,496,497,505,526,531,539,573,578,587,595],{"__ignoreMap":289},[293,498,499,501,503],{"class":295,"line":296},[293,500,300],{"class":299},[293,502,379],{"class":303},[293,504,326],{"class":299},[293,506,507,509,512,515,517,519,522,524],{"class":295,"line":329},[293,508,387],{"class":299},[293,510,511],{"class":303},"div",[293,513,514],{"class":307}," class",[293,516,314],{"class":299},[293,518,317],{"class":299},[293,520,521],{"class":320},"w-full aspect-video",[293,523,317],{"class":299},[293,525,326],{"class":299},[293,527,528],{"class":295,"line":358},[293,529,530],{"class":444},"    \u003C!-- Canvas automatically fills the container -->\n",[293,532,533,535,537],{"class":295,"line":368},[293,534,401],{"class":299},[293,536,390],{"class":303},[293,538,326],{"class":299},[293,540,541,544,546,548,550,552,554,556,559,561,563,565,567,569,571],{"class":295,"line":374},[293,542,543],{"class":299},"      \u003C",[293,545,404],{"class":303},[293,547,407],{"class":299},[293,549,410],{"class":307},[293,551,314],{"class":299},[293,553,317],{"class":299},[293,555,417],{"class":299},[293,557,558],{"class":420},"3",[293,560,424],{"class":299},[293,562,558],{"class":420},[293,564,424],{"class":299},[293,566,558],{"class":420},[293,568,433],{"class":299},[293,570,317],{"class":299},[293,572,438],{"class":299},[293,574,575],{"class":295,"line":384},[293,576,577],{"class":444},"      \u003C!-- Your 3D scene here -->\n",[293,579,580,583,585],{"class":295,"line":398},[293,581,582],{"class":299},"    \u003C/",[293,584,390],{"class":303},[293,586,326],{"class":299},[293,588,589,591,593],{"class":295,"line":441},[293,590,451],{"class":299},[293,592,511],{"class":303},[293,594,326],{"class":299},[293,596,597,599,601],{"class":295,"line":448},[293,598,361],{"class":299},[293,600,379],{"class":303},[293,602,326],{"class":299},[476,604,606],{"id":605},"full-window-size","Full Window Size",[250,608,609,610,613],{},"For immersive full-screen 3D experiences, use the ",[253,611,612],{},"window-size"," prop to make the canvas fill the entire browser viewport:",[283,615,618],{"className":285,"code":616,"filename":617,"language":288,"meta":289,"style":289},"\u003Ctemplate>\n  \u003C!-- Canvas automatically fills the entire window -->\n  \u003CTresCanvas window-size>\n    \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" />\n    \u003C!-- Your 3D scene here -->\n  \u003C/TresCanvas>\n\u003C/template>\n","fullscreen.vue",[253,619,620,628,633,644,676,681,689],{"__ignoreMap":289},[293,621,622,624,626],{"class":295,"line":296},[293,623,300],{"class":299},[293,625,379],{"class":303},[293,627,326],{"class":299},[293,629,630],{"class":295,"line":329},[293,631,632],{"class":444},"  \u003C!-- Canvas automatically fills the entire window -->\n",[293,634,635,637,639,642],{"class":295,"line":358},[293,636,387],{"class":299},[293,638,390],{"class":303},[293,640,641],{"class":307}," window-size",[293,643,326],{"class":299},[293,645,646,648,650,652,654,656,658,660,662,664,666,668,670,672,674],{"class":295,"line":368},[293,647,401],{"class":299},[293,649,404],{"class":303},[293,651,407],{"class":299},[293,653,410],{"class":307},[293,655,314],{"class":299},[293,657,317],{"class":299},[293,659,417],{"class":299},[293,661,558],{"class":420},[293,663,424],{"class":299},[293,665,558],{"class":420},[293,667,424],{"class":299},[293,669,558],{"class":420},[293,671,433],{"class":299},[293,673,317],{"class":299},[293,675,438],{"class":299},[293,677,678],{"class":295,"line":374},[293,679,680],{"class":444},"    \u003C!-- Your 3D scene here -->\n",[293,682,683,685,687],{"class":295,"line":384},[293,684,451],{"class":299},[293,686,390],{"class":303},[293,688,326],{"class":299},[293,690,691,693,695],{"class":295,"line":398},[293,692,361],{"class":299},[293,694,379],{"class":303},[293,696,326],{"class":299},[245,698,79],{"id":699},"api",[701,702,703,713],"warning",{},[250,704,705,708,709,712],{},[487,706,707],{},"Not all props are reactive!"," Some props are WebGL context options that are passed to the renderer constructor and ",[487,710,711],{},"cannot be changed"," after the canvas is created. Changing these props would require recreating the entire renderer and canvas context.",[250,714,715,716,723],{},"For detailed technical information about prop reactivity, see ",[717,718,722],"a",{"href":719,"rel":720},"https://github.com/Tresjs/tres/issues/982",[721],"nofollow","GitHub Issue #982",".",[476,725,727],{"id":726},"props","Props",[729,730,731,746,757,764,777,789,797,810,819,827,835,843,869,899,907,944,952,1001,1011,1020,1028,1036],"field-group",{},[732,733,736],"field",{"name":734,"type":735},"alpha","boolean",[250,737,738,741,742,745],{},[487,739,740],{},"🔒 WebGL Context Option"," - Controls the default clear alpha value. When set to ",[253,743,744],{},"true",", the value is 0. Otherwise it's 1. Enables transparency in the canvas.",[732,747,749],{"name":748,"type":735},"antialias",[250,750,751,753,754,756],{},[487,752,740],{}," - Default: ",[253,755,744],{}," - Whether to perform antialiasing. Improves visual quality by smoothing jagged edges.",[732,758,761],{"name":759,"type":760},"camera","TresCamera",[250,762,763],{},"Custom camera instance to use as main camera. If not provided, a default PerspectiveCamera will be created.",[732,765,768],{"name":766,"type":767},"clearAlpha","number",[250,769,770,753,773,776],{},[487,771,772],{},"⚡ Reactive",[253,774,775],{},"1"," - The alpha (transparency) value used when clearing the canvas. Range from 0 (transparent) to 1 (opaque).",[732,778,781],{"name":779,"type":780},"clearColor","string",[250,782,783,753,785,788],{},[487,784,772],{},[253,786,787],{},"\"#000000\""," - The color the renderer will use to clear the canvas. Can be any valid CSS color string.",[732,790,792],{"name":791,"type":735},"depth",[250,793,794,796],{},[487,795,740],{}," - Whether the drawing buffer has a depth buffer of at least 16 bits. Required for depth testing and 3D rendering.",[732,798,801],{"name":799,"type":800},"dpr","number | [number, number]",[250,802,803,805,806,809],{},[487,804,772],{}," - Device Pixel Ratio for the renderer. Can be a single number or a tuple defining a range ",[293,807,808],{},"min, max",". Controls rendering resolution relative to device pixels.",[732,811,813],{"name":812,"type":735},"enableProvideBridge",[250,814,815,816,818],{},"Default: ",[253,817,744],{}," - Whether to enable the provide/inject bridge between Vue and TresJS. When true, Vue's provide/inject will work across the TresJS boundary.",[732,820,822],{"name":821,"type":735},"failIfMajorPerformanceCaveat",[250,823,824,826],{},[487,825,740],{}," - Whether the renderer creation will fail upon low performance detection. See WebGL spec for details.",[732,828,830],{"name":829,"type":735},"logarithmicDepthBuffer",[250,831,832,834],{},[487,833,740],{}," - Whether to use a logarithmic depth buffer. May be necessary for huge differences in scale. Can cause performance decrease.",[732,836,838],{"name":837,"type":735},"preserveDrawingBuffer",[250,839,840,842],{},[487,841,740],{}," - Whether to preserve the buffers until manually cleared or overwritten. Required for screenshots or canvas-to-image conversion.",[732,844,847,859],{"name":845,"type":846},"renderer","(ctx: TresRendererSetupContext) => TresRenderer",[250,848,849,850,855,856,858],{},"Custom ",[717,851,854],{"href":852,"rel":853},"https://threejs.org/docs/#api/en/renderers/WebGLRenderer",[721],"WebGL"," or experimental ",[487,857,170],{}," renderer instance. Allows using a pre-configured renderer instead of creating a new one. Useful for advanced renderer customization.",[860,861,862],"note",{},[250,863,864,865,723],{},"To see how to use the WebGPU renderer, check the example here: ",[487,866,867],{},[717,868,170],{"href":171},[732,870,873,879],{"name":871,"type":872},"renderMode","'always' | 'on-demand' | 'manual'",[250,874,815,875,878],{},[253,876,877],{},"\"always\""," - Controls when the scene renders:",[257,880,881,887,893],{},[260,882,883,886],{},[253,884,885],{},"always"," - Renders every frame continuously",[260,888,889,892],{},[253,890,891],{},"on-demand"," - Renders only when changes are detected",[260,894,895,898],{},[253,896,897],{},"manual"," - Requires explicit render calls",[732,900,902],{"name":901,"type":735},"shadows",[250,903,904,906],{},[487,905,772],{}," - Enable shadow mapping in the renderer. Required for casting and receiving shadows in your 3D scene.",[732,908,911,919],{"name":909,"type":910},"shadowMapType","ShadowMapType",[250,912,913,753,915,918],{},[487,914,772],{},[253,916,917],{},"PCFSoftShadowMap"," - The type of shadow map to use:",[257,920,921,927,933,938],{},[260,922,923,926],{},[253,924,925],{},"BasicShadowMap"," - Basic shadow mapping (fastest, lowest quality)",[260,928,929,932],{},[253,930,931],{},"PCFShadowMap"," - Percentage-Closer Filtering shadows (good quality/performance balance)",[260,934,935,937],{},[253,936,917],{}," - Soft PCF shadows (best quality, slower)",[260,939,940,943],{},[253,941,942],{},"VSMShadowMap"," - Variance Shadow Maps (advanced technique)",[732,945,947],{"name":946,"type":735},"stencil",[250,948,949,951],{},[487,950,740],{}," - Whether the drawing buffer has a stencil buffer of at least 8 bits. Used for advanced rendering techniques.",[732,953,956,964],{"name":954,"type":955},"toneMapping","ToneMapping",[250,957,958,753,960,963],{},[487,959,772],{},[253,961,962],{},"ACESFilmicToneMapping"," - Defines the tone mapping algorithm used by the renderer:",[257,965,966,972,978,984,990,995],{},[260,967,968,971],{},[253,969,970],{},"NoToneMapping"," - No tone mapping applied",[260,973,974,977],{},[253,975,976],{},"LinearToneMapping"," - Linear tone mapping",[260,979,980,983],{},[253,981,982],{},"ReinhardToneMapping"," - Reinhard tone mapping",[260,985,986,989],{},[253,987,988],{},"CineonToneMapping"," - Cineon tone mapping",[260,991,992,994],{},[253,993,962],{}," - ACES Filmic tone mapping (recommended)",[260,996,997,1000],{},[253,998,999],{},"CustomToneMapping"," - Custom tone mapping",[732,1002,1004],{"name":1003,"type":767},"toneMappingExposure",[250,1005,1006,753,1008,1010],{},[487,1007,772],{},[253,1009,775],{}," - Exposure level of tone mapping. Controls the brightness/exposure of the rendered image.",[732,1012,1015],{"name":1013,"type":1014},"outputColorSpace","ColorSpace",[250,1016,1017,1019],{},[487,1018,772],{}," - Color space for the output render. Controls how colors are displayed on screen.",[732,1021,1023],{"name":1022,"type":735},"useLegacyLights",[250,1024,1025,1027],{},[487,1026,740],{}," - Whether to use the legacy lighting mode. When false, uses physically correct lighting calculations.",[732,1029,1031],{"name":1030,"type":735},"windowSize",[250,1032,1033,1035],{},[487,1034,772],{}," - Whether the canvas should be sized to the window. When true, canvas will be fixed positioned and full viewport size.",[732,1037,1040,1043,1066],{"name":1038,"type":1039},"customRendererOptions","TresCustomRendererOptions",[250,1041,1042],{},"Configuration options for the TresJS custom renderer:",[257,1044,1045],{},[260,1046,1047,1050,1051,1054,1055,1058,1059,1062,1063,723],{},[253,1048,1049],{},"primitivePrefix"," - Custom prefix for the primitive component name (default: ",[253,1052,1053],{},"\"\"","). For example, setting this to ",[253,1056,1057],{},"\"my\""," allows you to use ",[253,1060,1061],{},"\u003Cmyprimitive>"," instead of ",[253,1064,1065],{},"\u003Cprimitive>",[1067,1068,1069,1216],"code-group",{},[283,1070,1073],{"className":285,"code":1071,"filename":1072,"language":288,"meta":289,"style":289},"\u003Cscript setup lang=\"ts\">\nconst customRendererOptions = {\n  primitivePrefix: 'my', // Use \u003Cmyprimitive> instead of \u003Cprimitive>\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas :custom-renderer-options=\"customRendererOptions\">\n    \u003Cmyprimitive :object=\"myThreeObject\" />\n  \u003C/TresCanvas>\n\u003C/template>\n","Custom Prefix",[253,1074,1075,1095,1108,1130,1135,1143,1147,1155,1176,1199,1207],{"__ignoreMap":289},[293,1076,1077,1079,1081,1083,1085,1087,1089,1091,1093],{"class":295,"line":296},[293,1078,300],{"class":299},[293,1080,304],{"class":303},[293,1082,308],{"class":307},[293,1084,311],{"class":307},[293,1086,314],{"class":299},[293,1088,317],{"class":299},[293,1090,321],{"class":320},[293,1092,317],{"class":299},[293,1094,326],{"class":299},[293,1096,1097,1100,1103,1105],{"class":295,"line":329},[293,1098,1099],{"class":307},"const",[293,1101,1102],{"class":339}," customRendererOptions ",[293,1104,314],{"class":299},[293,1106,1107],{"class":299}," {\n",[293,1109,1110,1113,1116,1118,1121,1124,1127],{"class":295,"line":358},[293,1111,1112],{"class":303},"  primitivePrefix",[293,1114,1115],{"class":299},":",[293,1117,349],{"class":299},[293,1119,1120],{"class":320},"my",[293,1122,1123],{"class":299},"'",[293,1125,1126],{"class":299},",",[293,1128,1129],{"class":444}," // Use \u003Cmyprimitive> instead of \u003Cprimitive>\n",[293,1131,1132],{"class":295,"line":368},[293,1133,1134],{"class":299},"}\n",[293,1136,1137,1139,1141],{"class":295,"line":374},[293,1138,361],{"class":299},[293,1140,304],{"class":303},[293,1142,326],{"class":299},[293,1144,1145],{"class":295,"line":384},[293,1146,371],{"emptyLinePlaceholder":39},[293,1148,1149,1151,1153],{"class":295,"line":398},[293,1150,300],{"class":299},[293,1152,379],{"class":303},[293,1154,326],{"class":299},[293,1156,1157,1159,1161,1163,1166,1168,1170,1172,1174],{"class":295,"line":441},[293,1158,387],{"class":299},[293,1160,390],{"class":303},[293,1162,407],{"class":299},[293,1164,1165],{"class":307},"custom-renderer-options",[293,1167,314],{"class":299},[293,1169,317],{"class":299},[293,1171,1038],{"class":339},[293,1173,317],{"class":299},[293,1175,326],{"class":299},[293,1177,1178,1180,1183,1185,1188,1190,1192,1195,1197],{"class":295,"line":448},[293,1179,401],{"class":299},[293,1181,1182],{"class":303},"myprimitive",[293,1184,407],{"class":299},[293,1186,1187],{"class":307},"object",[293,1189,314],{"class":299},[293,1191,317],{"class":299},[293,1193,1194],{"class":339},"myThreeObject",[293,1196,317],{"class":299},[293,1198,438],{"class":299},[293,1200,1201,1203,1205],{"class":295,"line":458},[293,1202,451],{"class":299},[293,1204,390],{"class":303},[293,1206,326],{"class":299},[293,1208,1210,1212,1214],{"class":295,"line":1209},11,[293,1211,361],{"class":299},[293,1213,379],{"class":303},[293,1215,326],{"class":299},[283,1217,1220],{"className":285,"code":1218,"filename":1219,"language":288,"meta":289,"style":289},"\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003C!-- Default primitive component -->\n    \u003Cprimitive :object=\"myThreeObject\" />\n  \u003C/TresCanvas>\n\u003C/template>\n","Default (No Prefix)",[253,1221,1222,1230,1238,1243,1264,1272],{"__ignoreMap":289},[293,1223,1224,1226,1228],{"class":295,"line":296},[293,1225,300],{"class":299},[293,1227,379],{"class":303},[293,1229,326],{"class":299},[293,1231,1232,1234,1236],{"class":295,"line":329},[293,1233,387],{"class":299},[293,1235,390],{"class":303},[293,1237,326],{"class":299},[293,1239,1240],{"class":295,"line":358},[293,1241,1242],{"class":444},"    \u003C!-- Default primitive component -->\n",[293,1244,1245,1247,1250,1252,1254,1256,1258,1260,1262],{"class":295,"line":368},[293,1246,401],{"class":299},[293,1248,1249],{"class":303},"primitive",[293,1251,407],{"class":299},[293,1253,1187],{"class":307},[293,1255,314],{"class":299},[293,1257,317],{"class":299},[293,1259,1194],{"class":339},[293,1261,317],{"class":299},[293,1263,438],{"class":299},[293,1265,1266,1268,1270],{"class":295,"line":374},[293,1267,451],{"class":299},[293,1269,390],{"class":303},[293,1271,326],{"class":299},[293,1273,1274,1276,1278],{"class":295,"line":384},[293,1275,361],{"class":299},[293,1277,379],{"class":303},[293,1279,326],{"class":299},[476,1281,1283],{"id":1282},"events","Events",[729,1285,1286,1293,1299,1306,1312,1319,1325,1331,1337,1343,1349,1355],{},[732,1287,1290],{"name":1288,"type":1289},"ready","(context: TresContext) => void",[250,1291,1292],{},"Emitted when the TresJS context is fully initialized and ready to use. Provides access to the complete context object.",[732,1294,1296],{"name":1295,"type":1289},"render",[250,1297,1298],{},"Emitted on every frame render. Useful for custom render logic or performance monitoring.",[732,1300,1303],{"name":1301,"type":1302},"beforeLoop","(context: TresContextWithClock) => void",[250,1304,1305],{},"Emitted before each render loop iteration. Includes clock information for time-based animations.",[732,1307,1309],{"name":1308,"type":1302},"loop",[250,1310,1311],{},"Emitted during each render loop iteration. Perfect for custom animation logic.",[732,1313,1316],{"name":1314,"type":1315},"pointermissed","(event: PointerEvent) => void",[250,1317,1318],{},"Emitted when a pointer event doesn't hit any 3D objects in the scene. Useful for deselecting objects or closing menus.",[732,1320,1322],{"name":1321,"type":1315},"pointerover",[250,1323,1324],{},"Emitted when the pointer moves over a 3D object. Supports event bubbling from child objects.",[732,1326,1328],{"name":1327,"type":1315},"pointerout",[250,1329,1330],{},"Emitted when the pointer moves out of a 3D object. Supports event bubbling from child objects.",[732,1332,1334],{"name":1333,"type":1315},"pointerenter",[250,1335,1336],{},"Emitted when the pointer enters a 3D object. Does not bubble from child objects.",[732,1338,1340],{"name":1339,"type":1315},"pointerleave",[250,1341,1342],{},"Emitted when the pointer leaves a 3D object. Does not bubble from child objects.",[732,1344,1346],{"name":1345,"type":1315},"pointerdown",[250,1347,1348],{},"Emitted when a pointer button is pressed down over a 3D object.",[732,1350,1352],{"name":1351,"type":1315},"pointerup",[250,1353,1354],{},"Emitted when a pointer button is released over a 3D object.",[732,1356,1358],{"name":1357,"type":1315},"click",[250,1359,1360],{},"Emitted when a 3D object is clicked. Equivalent to pointerdown followed by pointerup.",[476,1362,1364],{"id":1363},"exposed-properties","Exposed Properties",[729,1366,1367,1374],{},[732,1368,1371],{"name":1369,"type":1370},"context","TresContext | undefined",[250,1372,1373],{},"The complete TresJS context object containing scene, renderer, camera, and other core instances. Available after the component is mounted.",[732,1375,1378],{"name":1376,"type":1377},"dispose","() => void",[250,1379,1380],{},"Method to manually dispose of the WebGL context and clean up resources. Useful for cleanup when dynamically removing canvas instances.",[1382,1383,1384],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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);}",{"title":289,"searchDepth":296,"depth":329,"links":1386},[1387,1388,1389,1393],{"id":247,"depth":329,"text":248},{"id":280,"depth":329,"text":281},{"id":467,"depth":329,"text":468,"children":1390},[1391,1392],{"id":478,"depth":358,"text":479},{"id":605,"depth":358,"text":606},{"id":699,"depth":329,"text":79,"children":1394},[1395,1396,1397],{"id":726,"depth":358,"text":727},{"id":1282,"depth":358,"text":1283},{"id":1363,"depth":358,"text":1364},"The TresCanvas component is the main component for rendering 3D scenes.","md",null,{},{"title":93,"description":1398},"_JE0TMptgsP5sxmEyQPKoV_ryfji8AjLpM5ahfkX7hM",[1405,1407],{"title":84,"path":80,"stem":85,"description":1406,"children":-1},"Explore the TresJS components, composables, utilities and more.",{"title":97,"path":98,"stem":99,"description":1408,"children":-1},"Internal context component used by TresCanvas for advanced setups.",1773121555282]