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