[{"data":1,"prerenderedAt":1390},["ShallowReactive",2],{"navigation":3,"/api/components/tres-canvas":256,"/api/components/tres-canvas-surround":1385},[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":1379,"extension":1380,"links":1381,"meta":1382,"navigation":39,"path":94,"seo":1383,"stem":95,"__hash__":1384},"docs/3.api/1.components/tres-canvas.md",{"type":259,"value":260,"toc":1366},"minimark",[261,266,273,295,299,463,467,473,478,489,587,591,598,667,670,694,698,1261,1265,1342,1346,1362],[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,931,939,988,998,1007,1015,1023],"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,904],{"name":890,"type":891},"shadowMapType","ShadowMapType",[267,893,894,723,896,899,900,903],{},[485,895,742],{},[270,897,898],{},"PCFShadowMap"," on WebGL, ",[270,901,902],{},"PCFSoftShadowMap"," on WebGPU - The type of shadow map to use:",[274,905,906,912,917,925],{},[277,907,908,911],{},[270,909,910],{},"BasicShadowMap"," - Basic shadow mapping (fastest, lowest quality)",[277,913,914,916],{},[270,915,898],{}," - Percentage-Closer Filtering shadows (good quality/performance balance)",[277,918,919,921,922,924],{},[270,920,902],{}," - Deprecated on WebGL, three falls back to ",[270,923,898],{}," and logs a warning. Still supported on WebGPU.",[277,926,927,930],{},[270,928,929],{},"VSMShadowMap"," - Variance Shadow Maps (advanced technique)",[702,932,934],{"name":933,"type":705},"stencil",[267,935,936,938],{},[485,937,710],{}," - Whether the drawing buffer has a stencil buffer of at least 8 bits. Used for advanced rendering techniques.",[702,940,943,951],{"name":941,"type":942},"toneMapping","ToneMapping",[267,944,945,723,947,950],{},[485,946,742],{},[270,948,949],{},"ACESFilmicToneMapping"," - Defines the tone mapping algorithm used by the renderer:",[274,952,953,959,965,971,977,982],{},[277,954,955,958],{},[270,956,957],{},"NoToneMapping"," - No tone mapping applied",[277,960,961,964],{},[270,962,963],{},"LinearToneMapping"," - Linear tone mapping",[277,966,967,970],{},[270,968,969],{},"ReinhardToneMapping"," - Reinhard tone mapping",[277,972,973,976],{},[270,974,975],{},"CineonToneMapping"," - Cineon tone mapping",[277,978,979,981],{},[270,980,949],{}," - ACES Filmic tone mapping (recommended)",[277,983,984,987],{},[270,985,986],{},"CustomToneMapping"," - Custom tone mapping",[702,989,991],{"name":990,"type":737},"toneMappingExposure",[267,992,993,723,995,997],{},[485,994,742],{},[270,996,745],{}," - Exposure level of tone mapping. Controls the brightness/exposure of the rendered image.",[702,999,1002],{"name":1000,"type":1001},"outputColorSpace","ColorSpace",[267,1003,1004,1006],{},[485,1005,742],{}," - Color space for the output render. Controls how colors are displayed on screen.",[702,1008,1010],{"name":1009,"type":705},"useLegacyLights",[267,1011,1012,1014],{},[485,1013,710],{}," - Whether to use the legacy lighting mode. When false, uses physically correct lighting calculations.",[702,1016,1018],{"name":1017,"type":705},"windowSize",[267,1019,1020,1022],{},[485,1021,742],{}," - Whether the canvas should be sized to the window. When true, canvas will be fixed positioned and full viewport size.",[702,1024,1027,1030,1053],{"name":1025,"type":1026},"customRendererOptions","TresCustomRendererOptions",[267,1028,1029],{},"Configuration options for the TresJS custom renderer:",[274,1031,1032],{},[277,1033,1034,1037,1038,1041,1042,1045,1046,1049,1050,693],{},[270,1035,1036],{},"primitivePrefix"," - Custom prefix for the primitive component name (default: ",[270,1039,1040],{},"\"\"","). For example, setting this to ",[270,1043,1044],{},"\"my\""," allows you to use ",[270,1047,1048],{},"\u003Cmyprimitive>"," instead of ",[270,1051,1052],{},"\u003Cprimitive>",[1054,1055,1056,1199],"code-group",{},[300,1057,1060],{"className":302,"code":1058,"filename":1059,"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,1061,1062,1082,1095,1117,1122,1130,1134,1142,1161,1182,1190],{"__ignoreMap":306},[310,1063,1064,1066,1068,1070,1072,1074,1076,1078,1080],{"class":312,"line":313},[310,1065,317],{"class":316},[310,1067,321],{"class":320},[310,1069,325],{"class":324},[310,1071,328],{"class":324},[310,1073,331],{"class":316},[310,1075,334],{"class":316},[310,1077,338],{"class":337},[310,1079,334],{"class":316},[310,1081,343],{"class":316},[310,1083,1084,1087,1090,1092],{"class":312,"line":346},[310,1085,1086],{"class":324},"const",[310,1088,1089],{"class":356}," customRendererOptions ",[310,1091,331],{"class":316},[310,1093,1094],{"class":316}," {\n",[310,1096,1097,1100,1103,1105,1108,1111,1114],{"class":312,"line":375},[310,1098,1099],{"class":320},"  primitivePrefix",[310,1101,1102],{"class":316},":",[310,1104,366],{"class":316},[310,1106,1107],{"class":337},"my",[310,1109,1110],{"class":316},"'",[310,1112,1113],{"class":316},",",[310,1115,1116],{"class":442}," // Use \u003Cmyprimitive> instead of \u003Cprimitive>\n",[310,1118,1119],{"class":312,"line":385},[310,1120,1121],{"class":316},"}\n",[310,1123,1124,1126,1128],{"class":312,"line":391},[310,1125,378],{"class":316},[310,1127,321],{"class":320},[310,1129,343],{"class":316},[310,1131,1132],{"class":312,"line":401},[310,1133,388],{"emptyLinePlaceholder":39},[310,1135,1136,1138,1140],{"class":312,"line":415},[310,1137,317],{"class":316},[310,1139,396],{"class":320},[310,1141,343],{"class":316},[310,1143,1144,1146,1148,1151,1153,1155,1157,1159],{"class":312,"line":439},[310,1145,404],{"class":316},[310,1147,407],{"class":320},[310,1149,1150],{"class":324}," :custom-renderer-options",[310,1152,331],{"class":316},[310,1154,334],{"class":316},[310,1156,1025],{"class":337},[310,1158,334],{"class":316},[310,1160,343],{"class":316},[310,1162,1163,1165,1168,1171,1173,1175,1178,1180],{"class":312,"line":446},[310,1164,418],{"class":316},[310,1166,1167],{"class":320},"myprimitive",[310,1169,1170],{"class":324}," :object",[310,1172,331],{"class":316},[310,1174,334],{"class":316},[310,1176,1177],{"class":337},"myThreeObject",[310,1179,334],{"class":316},[310,1181,436],{"class":316},[310,1183,1184,1186,1188],{"class":312,"line":456},[310,1185,449],{"class":316},[310,1187,407],{"class":320},[310,1189,343],{"class":316},[310,1191,1193,1195,1197],{"class":312,"line":1192},11,[310,1194,378],{"class":316},[310,1196,396],{"class":320},[310,1198,343],{"class":316},[300,1200,1203],{"className":302,"code":1201,"filename":1202,"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,1204,1205,1213,1221,1226,1245,1253],{"__ignoreMap":306},[310,1206,1207,1209,1211],{"class":312,"line":313},[310,1208,317],{"class":316},[310,1210,396],{"class":320},[310,1212,343],{"class":316},[310,1214,1215,1217,1219],{"class":312,"line":346},[310,1216,404],{"class":316},[310,1218,407],{"class":320},[310,1220,343],{"class":316},[310,1222,1223],{"class":312,"line":375},[310,1224,1225],{"class":442},"    \u003C!-- Default primitive component -->\n",[310,1227,1228,1230,1233,1235,1237,1239,1241,1243],{"class":312,"line":385},[310,1229,418],{"class":316},[310,1231,1232],{"class":320},"primitive",[310,1234,1170],{"class":324},[310,1236,331],{"class":316},[310,1238,334],{"class":316},[310,1240,1177],{"class":337},[310,1242,334],{"class":316},[310,1244,436],{"class":316},[310,1246,1247,1249,1251],{"class":312,"line":391},[310,1248,449],{"class":316},[310,1250,407],{"class":320},[310,1252,343],{"class":316},[310,1254,1255,1257,1259],{"class":312,"line":401},[310,1256,378],{"class":316},[310,1258,396],{"class":320},[310,1260,343],{"class":316},[474,1262,1264],{"id":1263},"events","Events",[699,1266,1267,1274,1280,1287,1293,1300,1306,1312,1318,1324,1330,1336],{},[702,1268,1271],{"name":1269,"type":1270},"ready","(context: TresContext) => void",[267,1272,1273],{},"Emitted when the TresJS context is fully initialized and ready to use. Provides access to the complete context object.",[702,1275,1277],{"name":1276,"type":1270},"render",[267,1278,1279],{},"Emitted on every frame render. Useful for custom render logic or performance monitoring.",[702,1281,1284],{"name":1282,"type":1283},"beforeLoop","(context: TresContextWithClock) => void",[267,1285,1286],{},"Emitted before each render loop iteration. Includes clock information for time-based animations.",[702,1288,1290],{"name":1289,"type":1283},"loop",[267,1291,1292],{},"Emitted during each render loop iteration. Perfect for custom animation logic.",[702,1294,1297],{"name":1295,"type":1296},"pointermissed","(event: PointerEvent) => void",[267,1298,1299],{},"Emitted when a pointer event doesn't hit any 3D objects in the scene. Useful for deselecting objects or closing menus.",[702,1301,1303],{"name":1302,"type":1296},"pointerover",[267,1304,1305],{},"Emitted when the pointer moves over a 3D object. Supports event bubbling from child objects.",[702,1307,1309],{"name":1308,"type":1296},"pointerout",[267,1310,1311],{},"Emitted when the pointer moves out of a 3D object. Supports event bubbling from child objects.",[702,1313,1315],{"name":1314,"type":1296},"pointerenter",[267,1316,1317],{},"Emitted when the pointer enters a 3D object. Does not bubble from child objects.",[702,1319,1321],{"name":1320,"type":1296},"pointerleave",[267,1322,1323],{},"Emitted when the pointer leaves a 3D object. Does not bubble from child objects.",[702,1325,1327],{"name":1326,"type":1296},"pointerdown",[267,1328,1329],{},"Emitted when a pointer button is pressed down over a 3D object.",[702,1331,1333],{"name":1332,"type":1296},"pointerup",[267,1334,1335],{},"Emitted when a pointer button is released over a 3D object.",[702,1337,1339],{"name":1338,"type":1296},"click",[267,1340,1341],{},"Emitted when a 3D object is clicked. Equivalent to pointerdown followed by pointerup.",[474,1343,1345],{"id":1344},"exposed-properties","Exposed Properties",[699,1347,1348,1355],{},[702,1349,1352],{"name":1350,"type":1351},"context","TresContext | undefined",[267,1353,1354],{},"The complete TresJS context object containing scene, renderer, camera, and other core instances. Available after the component is mounted.",[702,1356,1359],{"name":1357,"type":1358},"dispose","() => void",[267,1360,1361],{},"Method to manually dispose of the WebGL context and clean up resources. Useful for cleanup when dynamically removing canvas instances.",[1363,1364,1365],"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":1367},[1368,1369,1370,1374],{"id":264,"depth":346,"text":265},{"id":297,"depth":346,"text":298},{"id":465,"depth":346,"text":466,"children":1371},[1372,1373],{"id":476,"depth":375,"text":477},{"id":589,"depth":375,"text":590},{"id":669,"depth":346,"text":79,"children":1375},[1376,1377,1378],{"id":696,"depth":375,"text":697},{"id":1263,"depth":375,"text":1264},{"id":1344,"depth":375,"text":1345},"The TresCanvas component is the main component for rendering 3D scenes.","md",null,{},{"title":93,"description":1379},"GDOWMeZG8GUz7x68xJmaBWv_codRLamE4E27jKoTrFU",[1386,1388],{"title":84,"path":80,"stem":85,"description":1387,"children":-1},"Explore the TresJS components, composables, utilities and more.",{"title":97,"path":98,"stem":99,"description":1389,"children":-1},"Internal context component used by TresCanvas for advanced setups.",1789116505406]