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