[{"data":1,"prerenderedAt":1420},["ShallowReactive",2],{"navigation":3,"/api/components/tres-canvas":239,"/api/components/tres-canvas-surround":1415},[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":1409,"extension":1410,"links":1411,"meta":1412,"navigation":39,"path":94,"seo":1413,"stem":95,"__hash__":1414},"docs/3.api/1.components/tres-canvas.md",{"type":242,"value":243,"toc":1396},"minimark",[244,249,256,278,282,465,469,475,480,491,603,607,614,697,700,724,728,1291,1295,1372,1376,1392],[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,838,846,854,880,910,918,955,963,1012,1022,1031,1039,1047],"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":767},"fpsLimit",[250,831,832,753,834,837],{},[487,833,772],{},[253,835,836],{},"undefined"," (unlimited) - Caps the render loop frequency in FPS. Useful for reducing CPU/GPU usage or matching a target update rate.",[732,839,841],{"name":840,"type":735},"logarithmicDepthBuffer",[250,842,843,845],{},[487,844,740],{}," - Whether to use a logarithmic depth buffer. May be necessary for huge differences in scale. Can cause performance decrease.",[732,847,849],{"name":848,"type":735},"preserveDrawingBuffer",[250,850,851,853],{},[487,852,740],{}," - Whether to preserve the buffers until manually cleared or overwritten. Required for screenshots or canvas-to-image conversion.",[732,855,858,870],{"name":856,"type":857},"renderer","(ctx: TresRendererSetupContext) => TresRenderer",[250,859,860,861,866,867,869],{},"Custom ",[717,862,865],{"href":863,"rel":864},"https://threejs.org/docs/#api/en/renderers/WebGLRenderer",[721],"WebGL"," or experimental ",[487,868,170],{}," renderer instance. Allows using a pre-configured renderer instead of creating a new one. Useful for advanced renderer customization.",[871,872,873],"note",{},[250,874,875,876,723],{},"To see how to use the WebGPU renderer, check the example here: ",[487,877,878],{},[717,879,170],{"href":171},[732,881,884,890],{"name":882,"type":883},"renderMode","'always' | 'on-demand' | 'manual'",[250,885,815,886,889],{},[253,887,888],{},"\"always\""," - Controls when the scene renders:",[257,891,892,898,904],{},[260,893,894,897],{},[253,895,896],{},"always"," - Renders every frame continuously",[260,899,900,903],{},[253,901,902],{},"on-demand"," - Renders only when changes are detected",[260,905,906,909],{},[253,907,908],{},"manual"," - Requires explicit render calls",[732,911,913],{"name":912,"type":735},"shadows",[250,914,915,917],{},[487,916,772],{}," - Enable shadow mapping in the renderer. Required for casting and receiving shadows in your 3D scene.",[732,919,922,930],{"name":920,"type":921},"shadowMapType","ShadowMapType",[250,923,924,753,926,929],{},[487,925,772],{},[253,927,928],{},"PCFSoftShadowMap"," - The type of shadow map to use:",[257,931,932,938,944,949],{},[260,933,934,937],{},[253,935,936],{},"BasicShadowMap"," - Basic shadow mapping (fastest, lowest quality)",[260,939,940,943],{},[253,941,942],{},"PCFShadowMap"," - Percentage-Closer Filtering shadows (good quality/performance balance)",[260,945,946,948],{},[253,947,928],{}," - Soft PCF shadows (best quality, slower)",[260,950,951,954],{},[253,952,953],{},"VSMShadowMap"," - Variance Shadow Maps (advanced technique)",[732,956,958],{"name":957,"type":735},"stencil",[250,959,960,962],{},[487,961,740],{}," - Whether the drawing buffer has a stencil buffer of at least 8 bits. Used for advanced rendering techniques.",[732,964,967,975],{"name":965,"type":966},"toneMapping","ToneMapping",[250,968,969,753,971,974],{},[487,970,772],{},[253,972,973],{},"ACESFilmicToneMapping"," - Defines the tone mapping algorithm used by the renderer:",[257,976,977,983,989,995,1001,1006],{},[260,978,979,982],{},[253,980,981],{},"NoToneMapping"," - No tone mapping applied",[260,984,985,988],{},[253,986,987],{},"LinearToneMapping"," - Linear tone mapping",[260,990,991,994],{},[253,992,993],{},"ReinhardToneMapping"," - Reinhard tone mapping",[260,996,997,1000],{},[253,998,999],{},"CineonToneMapping"," - Cineon tone mapping",[260,1002,1003,1005],{},[253,1004,973],{}," - ACES Filmic tone mapping (recommended)",[260,1007,1008,1011],{},[253,1009,1010],{},"CustomToneMapping"," - Custom tone mapping",[732,1013,1015],{"name":1014,"type":767},"toneMappingExposure",[250,1016,1017,753,1019,1021],{},[487,1018,772],{},[253,1020,775],{}," - Exposure level of tone mapping. Controls the brightness/exposure of the rendered image.",[732,1023,1026],{"name":1024,"type":1025},"outputColorSpace","ColorSpace",[250,1027,1028,1030],{},[487,1029,772],{}," - Color space for the output render. Controls how colors are displayed on screen.",[732,1032,1034],{"name":1033,"type":735},"useLegacyLights",[250,1035,1036,1038],{},[487,1037,740],{}," - Whether to use the legacy lighting mode. When false, uses physically correct lighting calculations.",[732,1040,1042],{"name":1041,"type":735},"windowSize",[250,1043,1044,1046],{},[487,1045,772],{}," - Whether the canvas should be sized to the window. When true, canvas will be fixed positioned and full viewport size.",[732,1048,1051,1054,1077],{"name":1049,"type":1050},"customRendererOptions","TresCustomRendererOptions",[250,1052,1053],{},"Configuration options for the TresJS custom renderer:",[257,1055,1056],{},[260,1057,1058,1061,1062,1065,1066,1069,1070,1073,1074,723],{},[253,1059,1060],{},"primitivePrefix"," - Custom prefix for the primitive component name (default: ",[253,1063,1064],{},"\"\"","). For example, setting this to ",[253,1067,1068],{},"\"my\""," allows you to use ",[253,1071,1072],{},"\u003Cmyprimitive>"," instead of ",[253,1075,1076],{},"\u003Cprimitive>",[1078,1079,1080,1227],"code-group",{},[283,1081,1084],{"className":285,"code":1082,"filename":1083,"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,1085,1086,1106,1119,1141,1146,1154,1158,1166,1187,1210,1218],{"__ignoreMap":289},[293,1087,1088,1090,1092,1094,1096,1098,1100,1102,1104],{"class":295,"line":296},[293,1089,300],{"class":299},[293,1091,304],{"class":303},[293,1093,308],{"class":307},[293,1095,311],{"class":307},[293,1097,314],{"class":299},[293,1099,317],{"class":299},[293,1101,321],{"class":320},[293,1103,317],{"class":299},[293,1105,326],{"class":299},[293,1107,1108,1111,1114,1116],{"class":295,"line":329},[293,1109,1110],{"class":307},"const",[293,1112,1113],{"class":339}," customRendererOptions ",[293,1115,314],{"class":299},[293,1117,1118],{"class":299}," {\n",[293,1120,1121,1124,1127,1129,1132,1135,1138],{"class":295,"line":358},[293,1122,1123],{"class":303},"  primitivePrefix",[293,1125,1126],{"class":299},":",[293,1128,349],{"class":299},[293,1130,1131],{"class":320},"my",[293,1133,1134],{"class":299},"'",[293,1136,1137],{"class":299},",",[293,1139,1140],{"class":444}," // Use \u003Cmyprimitive> instead of \u003Cprimitive>\n",[293,1142,1143],{"class":295,"line":368},[293,1144,1145],{"class":299},"}\n",[293,1147,1148,1150,1152],{"class":295,"line":374},[293,1149,361],{"class":299},[293,1151,304],{"class":303},[293,1153,326],{"class":299},[293,1155,1156],{"class":295,"line":384},[293,1157,371],{"emptyLinePlaceholder":39},[293,1159,1160,1162,1164],{"class":295,"line":398},[293,1161,300],{"class":299},[293,1163,379],{"class":303},[293,1165,326],{"class":299},[293,1167,1168,1170,1172,1174,1177,1179,1181,1183,1185],{"class":295,"line":441},[293,1169,387],{"class":299},[293,1171,390],{"class":303},[293,1173,407],{"class":299},[293,1175,1176],{"class":307},"custom-renderer-options",[293,1178,314],{"class":299},[293,1180,317],{"class":299},[293,1182,1049],{"class":339},[293,1184,317],{"class":299},[293,1186,326],{"class":299},[293,1188,1189,1191,1194,1196,1199,1201,1203,1206,1208],{"class":295,"line":448},[293,1190,401],{"class":299},[293,1192,1193],{"class":303},"myprimitive",[293,1195,407],{"class":299},[293,1197,1198],{"class":307},"object",[293,1200,314],{"class":299},[293,1202,317],{"class":299},[293,1204,1205],{"class":339},"myThreeObject",[293,1207,317],{"class":299},[293,1209,438],{"class":299},[293,1211,1212,1214,1216],{"class":295,"line":458},[293,1213,451],{"class":299},[293,1215,390],{"class":303},[293,1217,326],{"class":299},[293,1219,1221,1223,1225],{"class":295,"line":1220},11,[293,1222,361],{"class":299},[293,1224,379],{"class":303},[293,1226,326],{"class":299},[283,1228,1231],{"className":285,"code":1229,"filename":1230,"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,1232,1233,1241,1249,1254,1275,1283],{"__ignoreMap":289},[293,1234,1235,1237,1239],{"class":295,"line":296},[293,1236,300],{"class":299},[293,1238,379],{"class":303},[293,1240,326],{"class":299},[293,1242,1243,1245,1247],{"class":295,"line":329},[293,1244,387],{"class":299},[293,1246,390],{"class":303},[293,1248,326],{"class":299},[293,1250,1251],{"class":295,"line":358},[293,1252,1253],{"class":444},"    \u003C!-- Default primitive component -->\n",[293,1255,1256,1258,1261,1263,1265,1267,1269,1271,1273],{"class":295,"line":368},[293,1257,401],{"class":299},[293,1259,1260],{"class":303},"primitive",[293,1262,407],{"class":299},[293,1264,1198],{"class":307},[293,1266,314],{"class":299},[293,1268,317],{"class":299},[293,1270,1205],{"class":339},[293,1272,317],{"class":299},[293,1274,438],{"class":299},[293,1276,1277,1279,1281],{"class":295,"line":374},[293,1278,451],{"class":299},[293,1280,390],{"class":303},[293,1282,326],{"class":299},[293,1284,1285,1287,1289],{"class":295,"line":384},[293,1286,361],{"class":299},[293,1288,379],{"class":303},[293,1290,326],{"class":299},[476,1292,1294],{"id":1293},"events","Events",[729,1296,1297,1304,1310,1317,1323,1330,1336,1342,1348,1354,1360,1366],{},[732,1298,1301],{"name":1299,"type":1300},"ready","(context: TresContext) => void",[250,1302,1303],{},"Emitted when the TresJS context is fully initialized and ready to use. Provides access to the complete context object.",[732,1305,1307],{"name":1306,"type":1300},"render",[250,1308,1309],{},"Emitted on every frame render. Useful for custom render logic or performance monitoring.",[732,1311,1314],{"name":1312,"type":1313},"beforeLoop","(context: TresContextWithClock) => void",[250,1315,1316],{},"Emitted before each render loop iteration. Includes clock information for time-based animations.",[732,1318,1320],{"name":1319,"type":1313},"loop",[250,1321,1322],{},"Emitted during each render loop iteration. Perfect for custom animation logic.",[732,1324,1327],{"name":1325,"type":1326},"pointermissed","(event: PointerEvent) => void",[250,1328,1329],{},"Emitted when a pointer event doesn't hit any 3D objects in the scene. Useful for deselecting objects or closing menus.",[732,1331,1333],{"name":1332,"type":1326},"pointerover",[250,1334,1335],{},"Emitted when the pointer moves over a 3D object. Supports event bubbling from child objects.",[732,1337,1339],{"name":1338,"type":1326},"pointerout",[250,1340,1341],{},"Emitted when the pointer moves out of a 3D object. Supports event bubbling from child objects.",[732,1343,1345],{"name":1344,"type":1326},"pointerenter",[250,1346,1347],{},"Emitted when the pointer enters a 3D object. Does not bubble from child objects.",[732,1349,1351],{"name":1350,"type":1326},"pointerleave",[250,1352,1353],{},"Emitted when the pointer leaves a 3D object. Does not bubble from child objects.",[732,1355,1357],{"name":1356,"type":1326},"pointerdown",[250,1358,1359],{},"Emitted when a pointer button is pressed down over a 3D object.",[732,1361,1363],{"name":1362,"type":1326},"pointerup",[250,1364,1365],{},"Emitted when a pointer button is released over a 3D object.",[732,1367,1369],{"name":1368,"type":1326},"click",[250,1370,1371],{},"Emitted when a 3D object is clicked. Equivalent to pointerdown followed by pointerup.",[476,1373,1375],{"id":1374},"exposed-properties","Exposed Properties",[729,1377,1378,1385],{},[732,1379,1382],{"name":1380,"type":1381},"context","TresContext | undefined",[250,1383,1384],{},"The complete TresJS context object containing scene, renderer, camera, and other core instances. Available after the component is mounted.",[732,1386,1389],{"name":1387,"type":1388},"dispose","() => void",[250,1390,1391],{},"Method to manually dispose of the WebGL context and clean up resources. Useful for cleanup when dynamically removing canvas instances.",[1393,1394,1395],"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":1397},[1398,1399,1400,1404],{"id":247,"depth":329,"text":248},{"id":280,"depth":329,"text":281},{"id":467,"depth":329,"text":468,"children":1401},[1402,1403],{"id":478,"depth":358,"text":479},{"id":605,"depth":358,"text":606},{"id":699,"depth":329,"text":79,"children":1405},[1406,1407,1408],{"id":726,"depth":358,"text":727},{"id":1293,"depth":358,"text":1294},{"id":1374,"depth":358,"text":1375},"The TresCanvas component is the main component for rendering 3D scenes.","md",null,{},{"title":93,"description":1409},"vSGDlxLaEHFf0co_Ji80dyTAa4YPpO-CxqNpLbjsc8g",[1416,1418],{"title":84,"path":80,"stem":85,"description":1417,"children":-1},"Explore the TresJS components, composables, utilities and more.",{"title":97,"path":98,"stem":99,"description":1419,"children":-1},"Internal context component used by TresCanvas for advanced setups.",1774953658685]