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