[{"data":1,"prerenderedAt":1690},["ShallowReactive",2],{"navigation":3,"/api/events/pointer-events":239,"/api/events/pointer-events-surround":1685},[4,29,78,173,205,215,219,223,227,231,235],{"title":5,"path":6,"stem":7,"children":8,"icon":27,"titleTemplate":28},"Getting Started","/getting-started","1.getting-started/1.index",[9,12,17,22],{"title":10,"path":6,"stem":7,"icon":11},"Introduction","i-lucide-house",{"title":13,"path":14,"stem":15,"icon":16},"Installation","/getting-started/installation","1.getting-started/2.installation","i-lucide-download",{"title":18,"path":19,"stem":20,"icon":21},"Your First Scene","/getting-started/your-first-scene","1.getting-started/3.your-first-scene","i-lucide-donut",{"title":23,"path":24,"stem":25,"icon":26},"Upgrade Guide","/getting-started/upgrade-guide","1.getting-started/4.upgrade-guide","i-lucide-circle-arrow-up","i-lucide-rocket","%s · Get Started with TresJS",{"title":30,"path":31,"stem":32,"children":33},"Essentials","/essentials","2.essentials",[34,36,48],{"title":30,"path":31,"stem":35},"2.essentials/index",{"title":37,"icon":38,"open":39,"path":40,"stem":41,"children":42,"page":47},"Core Architecture","i-lucide-cpu",true,"/essentials/core-architecture","2.essentials/1.core-architecture",[43],{"title":44,"path":45,"stem":46},"Custom Vue Renderer","/essentials/core-architecture/custom-vue-renderer","2.essentials/1.core-architecture/2.custom-vue-renderer",false,{"title":49,"icon":50,"open":39,"path":51,"stem":52,"children":53,"page":47},"Key Concepts","i-lucide-medal","/essentials/concepts","2.essentials/2.concepts",[54,58,62,66,70,74],{"title":55,"path":56,"stem":57},"Declarative vs Imperative","/essentials/concepts/declarative-vs-imperative","2.essentials/2.concepts/1.declarative-vs-imperative",{"title":59,"path":60,"stem":61},"Reactivity","/essentials/concepts/reactivity","2.essentials/2.concepts/2.reactivity",{"title":63,"path":64,"stem":65},"Constructor Arguments","/essentials/concepts/constructor-arguments","2.essentials/2.concepts/3.constructor-arguments",{"title":67,"path":68,"stem":69},"Declarative Properties","/essentials/concepts/declarative-properties","2.essentials/2.concepts/4.declarative-properties",{"title":71,"path":72,"stem":73},"Extending the Catalogue","/essentials/concepts/extending-catalogue","2.essentials/2.concepts/5.extending-catalogue",{"title":75,"path":76,"stem":77},"Child Attachments","/essentials/concepts/child-attachments","2.essentials/2.concepts/6.child-attachments",{"title":79,"path":80,"stem":81,"children":82},"API","/api","3.api",[83,86,104,131,141,155],{"title":84,"path":80,"stem":85},"TresJS API Reference","3.api/1.index",{"title":87,"icon":88,"open":39,"path":89,"stem":90,"children":91,"page":47},"Components","i-lucide-box","/api/components","3.api/1.components",[92,96,100],{"title":93,"path":94,"stem":95},"\u003CTresCanvas />","/api/components/tres-canvas","3.api/1.components/tres-canvas",{"title":97,"path":98,"stem":99},"\u003CTresCanvasContext />","/api/components/tres-context","3.api/1.components/tres-context",{"title":101,"path":102,"stem":103},"Tres Components","/api/components/tres-objects","3.api/1.components/tres-objects",{"title":105,"titleTemplate":106,"icon":107,"path":108,"stem":109,"children":110,"page":47},"Composables","%s · TresJS Composables","i-lucide-arrow-right-left","/api/composables","3.api/2.composables",[111,115,119,123,127],{"title":112,"path":113,"stem":114},"useTres","/api/composables/use-tres","3.api/2.composables/1.use-tres",{"title":116,"path":117,"stem":118},"useTresContext","/api/composables/use-tres-context","3.api/2.composables/2.use-tres-context",{"title":120,"path":121,"stem":122},"useLoop","/api/composables/use-loop","3.api/2.composables/3.use-loop",{"title":124,"path":125,"stem":126},"useGraph","/api/composables/use-graph","3.api/2.composables/4.use-graph",{"title":128,"path":129,"stem":130},"useLoader","/api/composables/use-loader","3.api/2.composables/5.use-loader",{"title":132,"icon":133,"path":134,"stem":135,"children":136,"page":47},"Event handling","i-lucide-mouse-pointer-2","/api/events","3.api/3.events",[137],{"title":138,"path":139,"stem":140},"Pointer Events","/api/events/pointer-events","3.api/3.events/1.pointer-events",{"title":142,"icon":143,"path":144,"stem":145,"children":146,"page":47},"Utils","i-lucide-wrench","/api/utils","3.api/4.utils",[147,151],{"title":148,"path":149,"stem":150},"Type Guards","/api/utils/type-guards","3.api/4.utils/1.type-guards",{"title":152,"path":153,"stem":154},"Directives","/api/utils/directives","3.api/4.utils/2.directives",{"title":156,"icon":157,"path":158,"stem":159,"children":160,"page":47},"Advanced","i-lucide-brain-circuit","/api/advanced","3.api/5.advanced",[161,165,169],{"title":162,"path":163,"stem":164},"Scaling Performance 🚀","/api/advanced/performance","3.api/5.advanced/performance",{"title":166,"path":167,"stem":168},"Primitives","/api/advanced/primitives","3.api/5.advanced/primitives",{"title":170,"path":171,"stem":172},"WebGPU","/api/advanced/web-gpu","3.api/5.advanced/web-gpu",{"title":174,"path":175,"stem":176,"children":177},"Cookbook","/cookbook","4.cookbook",[178,181,185,189,193,197,201],{"title":179,"path":175,"stem":180},"Cookbook 🍳🧑‍🍳","4.cookbook/index",{"title":182,"path":183,"stem":184},"OrbitControls","/cookbook/orbit-controls","4.cookbook/1.orbit-controls",{"title":186,"path":187,"stem":188},"Basic Animations","/cookbook/basic-animations","4.cookbook/2.basic-animations",{"title":190,"path":191,"stem":192},"Model Animation","/cookbook/model-animation","4.cookbook/3.model-animation",{"title":194,"path":195,"stem":196},"Advanced GSAP Animations","/cookbook/advanced-gsap-animations","4.cookbook/4.advanced-gsap-animations",{"title":198,"path":199,"stem":200},"Tweakpane","/cookbook/tweakpane","4.cookbook/5.tweakpane",{"title":202,"path":203,"stem":204},"Dynamic components","/cookbook/transition-dynamic","4.cookbook/6.transition-dynamic",{"title":206,"path":207,"stem":208,"children":209},"Community","/community","5.community/1.index",[210,211],{"title":206,"path":207,"stem":208},{"title":212,"path":213,"stem":214},"Awesome Resources","/community/awesome-resources","5.community/awesome-resources",{"title":216,"path":217,"stem":218},"German Translation","/de","de",{"title":220,"path":221,"stem":222},"Spanish Translation","/es","es",{"title":224,"path":225,"stem":226},"French Translation","/fr","fr",{"title":228,"path":229,"stem":230},"Italian Translation","/it","it",{"title":232,"path":233,"stem":234},"Japanese Translation","/jp","jp",{"title":236,"path":237,"stem":238},"Chinese Translation","/zh","zh",{"id":240,"title":138,"body":241,"description":1679,"extension":1680,"links":1681,"meta":1682,"navigation":39,"path":139,"seo":1683,"stem":140,"__hash__":1684},"docs/3.api/3.events/1.pointer-events.md",{"type":242,"value":243,"toc":1666},"minimark",[244,259,264,271,274,675,679,682,687,721,725,757,761,769,773,780,1092,1096,1106,1269,1273,1276,1279,1502,1506,1524,1528,1531,1662],[245,246,247,248,258],"p",{},"TresJS provides a comprehensive pointer events system that allows you to interact with 3D objects using mouse, touch, and other pointer devices. The event system is built on top of the powerful ",[249,250,254],"a",{"href":251,"rel":252},"https://www.npmjs.com/package/@pmndrs/pointer-events",[253],"nofollow",[255,256,257],"code",{},"@pmndrs/pointer-events"," package, providing framework-agnostic pointer event handling for Three.js objects.",[260,261,263],"h2",{"id":262},"basic-usage","Basic Usage",[245,265,266,267,270],{},"Pointer events are automatically enabled in ",[255,268,269],{},"TresCanvas"," and work seamlessly with all 3D objects. Simply add event listeners directly to your TresJS components:",[272,273],"examples-pointer-events",{},[275,276,281],"pre",{"className":277,"code":278,"language":279,"meta":280,"style":280},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\n\nconst boxRef = ref()\n\nfunction onPointerEnter() {\n  console.log('Pointer entered the box!')\n}\n\nfunction onPointerLeave() {\n  console.log('Pointer left the box!')\n}\n\nfunction onClick() {\n  console.log('Box clicked!')\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresMesh\n      ref=\"boxRef\"\n      @pointerenter=\"onPointerEnter\"\n      @pointerleave=\"onPointerLeave\"\n      @click=\"onClick\"\n    >\n      \u003CTresBoxGeometry />\n      \u003CTresMeshNormalMaterial />\n    \u003C/TresMesh>\n  \u003C/TresCanvas>\n\u003C/template>\n","vue","",[255,282,283,318,346,352,369,374,389,415,421,426,438,458,463,468,480,500,505,515,520,530,540,549,565,583,600,617,623,635,645,656,666],{"__ignoreMap":280},[284,285,288,292,296,300,303,306,309,313,315],"span",{"class":286,"line":287},"line",1,[284,289,291],{"class":290},"sMK4o","\u003C",[284,293,295],{"class":294},"swJcz","script",[284,297,299],{"class":298},"spNyl"," setup",[284,301,302],{"class":298}," lang",[284,304,305],{"class":290},"=",[284,307,308],{"class":290},"\"",[284,310,312],{"class":311},"sfazB","ts",[284,314,308],{"class":290},[284,316,317],{"class":290},">\n",[284,319,321,325,328,332,335,338,341,343],{"class":286,"line":320},2,[284,322,324],{"class":323},"s7zQu","import",[284,326,327],{"class":290}," {",[284,329,331],{"class":330},"sTEyZ"," ref",[284,333,334],{"class":290}," }",[284,336,337],{"class":323}," from",[284,339,340],{"class":290}," '",[284,342,279],{"class":311},[284,344,345],{"class":290},"'\n",[284,347,349],{"class":286,"line":348},3,[284,350,351],{"emptyLinePlaceholder":39},"\n",[284,353,355,358,361,363,366],{"class":286,"line":354},4,[284,356,357],{"class":298},"const",[284,359,360],{"class":330}," boxRef ",[284,362,305],{"class":290},[284,364,331],{"class":365},"s2Zo4",[284,367,368],{"class":330},"()\n",[284,370,372],{"class":286,"line":371},5,[284,373,351],{"emptyLinePlaceholder":39},[284,375,377,380,383,386],{"class":286,"line":376},6,[284,378,379],{"class":298},"function",[284,381,382],{"class":365}," onPointerEnter",[284,384,385],{"class":290},"()",[284,387,388],{"class":290}," {\n",[284,390,392,395,398,401,404,407,410,412],{"class":286,"line":391},7,[284,393,394],{"class":330},"  console",[284,396,397],{"class":290},".",[284,399,400],{"class":365},"log",[284,402,403],{"class":294},"(",[284,405,406],{"class":290},"'",[284,408,409],{"class":311},"Pointer entered the box!",[284,411,406],{"class":290},[284,413,414],{"class":294},")\n",[284,416,418],{"class":286,"line":417},8,[284,419,420],{"class":290},"}\n",[284,422,424],{"class":286,"line":423},9,[284,425,351],{"emptyLinePlaceholder":39},[284,427,429,431,434,436],{"class":286,"line":428},10,[284,430,379],{"class":298},[284,432,433],{"class":365}," onPointerLeave",[284,435,385],{"class":290},[284,437,388],{"class":290},[284,439,441,443,445,447,449,451,454,456],{"class":286,"line":440},11,[284,442,394],{"class":330},[284,444,397],{"class":290},[284,446,400],{"class":365},[284,448,403],{"class":294},[284,450,406],{"class":290},[284,452,453],{"class":311},"Pointer left the box!",[284,455,406],{"class":290},[284,457,414],{"class":294},[284,459,461],{"class":286,"line":460},12,[284,462,420],{"class":290},[284,464,466],{"class":286,"line":465},13,[284,467,351],{"emptyLinePlaceholder":39},[284,469,471,473,476,478],{"class":286,"line":470},14,[284,472,379],{"class":298},[284,474,475],{"class":365}," onClick",[284,477,385],{"class":290},[284,479,388],{"class":290},[284,481,483,485,487,489,491,493,496,498],{"class":286,"line":482},15,[284,484,394],{"class":330},[284,486,397],{"class":290},[284,488,400],{"class":365},[284,490,403],{"class":294},[284,492,406],{"class":290},[284,494,495],{"class":311},"Box clicked!",[284,497,406],{"class":290},[284,499,414],{"class":294},[284,501,503],{"class":286,"line":502},16,[284,504,420],{"class":290},[284,506,508,511,513],{"class":286,"line":507},17,[284,509,510],{"class":290},"\u003C/",[284,512,295],{"class":294},[284,514,317],{"class":290},[284,516,518],{"class":286,"line":517},18,[284,519,351],{"emptyLinePlaceholder":39},[284,521,523,525,528],{"class":286,"line":522},19,[284,524,291],{"class":290},[284,526,527],{"class":294},"template",[284,529,317],{"class":290},[284,531,533,536,538],{"class":286,"line":532},20,[284,534,535],{"class":290},"  \u003C",[284,537,269],{"class":294},[284,539,317],{"class":290},[284,541,543,546],{"class":286,"line":542},21,[284,544,545],{"class":290},"    \u003C",[284,547,548],{"class":294},"TresMesh\n",[284,550,552,555,557,559,562],{"class":286,"line":551},22,[284,553,554],{"class":298},"      ref",[284,556,305],{"class":290},[284,558,308],{"class":290},[284,560,561],{"class":311},"boxRef",[284,563,564],{"class":290},"\"\n",[284,566,568,571,574,576,578,581],{"class":286,"line":567},23,[284,569,570],{"class":290},"      @",[284,572,573],{"class":298},"pointerenter",[284,575,305],{"class":290},[284,577,308],{"class":290},[284,579,580],{"class":330},"onPointerEnter",[284,582,564],{"class":290},[284,584,586,588,591,593,595,598],{"class":286,"line":585},24,[284,587,570],{"class":290},[284,589,590],{"class":298},"pointerleave",[284,592,305],{"class":290},[284,594,308],{"class":290},[284,596,597],{"class":330},"onPointerLeave",[284,599,564],{"class":290},[284,601,603,605,608,610,612,615],{"class":286,"line":602},25,[284,604,570],{"class":290},[284,606,607],{"class":298},"click",[284,609,305],{"class":290},[284,611,308],{"class":290},[284,613,614],{"class":330},"onClick",[284,616,564],{"class":290},[284,618,620],{"class":286,"line":619},26,[284,621,622],{"class":290},"    >\n",[284,624,626,629,632],{"class":286,"line":625},27,[284,627,628],{"class":290},"      \u003C",[284,630,631],{"class":294},"TresBoxGeometry",[284,633,634],{"class":290}," />\n",[284,636,638,640,643],{"class":286,"line":637},28,[284,639,628],{"class":290},[284,641,642],{"class":294},"TresMeshNormalMaterial",[284,644,634],{"class":290},[284,646,648,651,654],{"class":286,"line":647},29,[284,649,650],{"class":290},"    \u003C/",[284,652,653],{"class":294},"TresMesh",[284,655,317],{"class":290},[284,657,659,662,664],{"class":286,"line":658},30,[284,660,661],{"class":290},"  \u003C/",[284,663,269],{"class":294},[284,665,317],{"class":290},[284,667,669,671,673],{"class":286,"line":668},31,[284,670,510],{"class":290},[284,672,527],{"class":294},[284,674,317],{"class":290},[260,676,678],{"id":677},"available-events","Available Events",[245,680,681],{},"TresJS supports all standard pointer events that you can listen to on any 3D object:",[683,684,686],"h3",{"id":685},"mouse-events","Mouse Events",[688,689,690,697,703,709,715],"ul",{},[691,692,693,696],"li",{},[255,694,695],{},"@click"," - Fired when the object is clicked",[691,698,699,702],{},[255,700,701],{},"@doubleclick"," - Fired when the object is double-clicked",[691,704,705,708],{},[255,706,707],{},"@contextmenu"," - Fired when right-clicking the object",[691,710,711,714],{},[255,712,713],{},"@pointerdown"," - Fired when pointer is pressed down on the object",[691,716,717,720],{},[255,718,719],{},"@pointerup"," - Fired when pointer is released over the object",[683,722,724],{"id":723},"hover-events","Hover Events",[688,726,727,733,739,745,751],{},[691,728,729,732],{},[255,730,731],{},"@pointerenter"," - Fired when pointer enters the object's bounds",[691,734,735,738],{},[255,736,737],{},"@pointerleave"," - Fired when pointer leaves the object's bounds",[691,740,741,744],{},[255,742,743],{},"@pointerover"," - Fired when pointer is over the object",[691,746,747,750],{},[255,748,749],{},"@pointerout"," - Fired when pointer moves away from the object",[691,752,753,756],{},[255,754,755],{},"@pointermove"," - Fired when pointer moves while over the object",[683,758,760],{"id":759},"drag-events","Drag Events",[688,762,763],{},[691,764,765,768],{},[255,766,767],{},"@pointercancel"," - Fired when pointer interaction is cancelled",[260,770,772],{"id":771},"event-objects","Event Objects",[245,774,775,776,779],{},"Event handlers receive a ",[255,777,778],{},"PointerEvent"," object with useful information:",[275,781,783],{"className":277,"code":782,"language":279,"meta":280,"style":280},"\u003Cscript setup lang=\"ts\">\nfunction onPointerMove(event) {\n  console.log('Pointer position:', event.point) // 3D world position\n  console.log('Screen coordinates:', event.xy) // 2D screen coordinates\n  console.log('Object hit:', event.object) // The Three.js object that was hit\n  console.log('Distance:', event.distance) // Distance from camera to hit point\n  console.log('Face:', event.face) // The face that was intersected\n  console.log('UV coordinates:', event.uv) // UV coordinates at hit point\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresMesh @pointermove=\"onPointerMove\">\n    \u003CTresBoxGeometry />\n    \u003CTresMeshNormalMaterial />\n  \u003C/TresMesh>\n\u003C/template>\n",[255,784,785,805,823,858,889,920,951,982,1013,1017,1025,1029,1037,1060,1068,1076,1084],{"__ignoreMap":280},[284,786,787,789,791,793,795,797,799,801,803],{"class":286,"line":287},[284,788,291],{"class":290},[284,790,295],{"class":294},[284,792,299],{"class":298},[284,794,302],{"class":298},[284,796,305],{"class":290},[284,798,308],{"class":290},[284,800,312],{"class":311},[284,802,308],{"class":290},[284,804,317],{"class":290},[284,806,807,809,812,814,818,821],{"class":286,"line":320},[284,808,379],{"class":298},[284,810,811],{"class":365}," onPointerMove",[284,813,403],{"class":290},[284,815,817],{"class":816},"sHdIc","event",[284,819,820],{"class":290},")",[284,822,388],{"class":290},[284,824,825,827,829,831,833,835,838,840,843,846,848,851,854],{"class":286,"line":348},[284,826,394],{"class":330},[284,828,397],{"class":290},[284,830,400],{"class":365},[284,832,403],{"class":294},[284,834,406],{"class":290},[284,836,837],{"class":311},"Pointer position:",[284,839,406],{"class":290},[284,841,842],{"class":290},",",[284,844,845],{"class":330}," event",[284,847,397],{"class":290},[284,849,850],{"class":330},"point",[284,852,853],{"class":294},") ",[284,855,857],{"class":856},"sHwdD","// 3D world position\n",[284,859,860,862,864,866,868,870,873,875,877,879,881,884,886],{"class":286,"line":354},[284,861,394],{"class":330},[284,863,397],{"class":290},[284,865,400],{"class":365},[284,867,403],{"class":294},[284,869,406],{"class":290},[284,871,872],{"class":311},"Screen coordinates:",[284,874,406],{"class":290},[284,876,842],{"class":290},[284,878,845],{"class":330},[284,880,397],{"class":290},[284,882,883],{"class":330},"xy",[284,885,853],{"class":294},[284,887,888],{"class":856},"// 2D screen coordinates\n",[284,890,891,893,895,897,899,901,904,906,908,910,912,915,917],{"class":286,"line":371},[284,892,394],{"class":330},[284,894,397],{"class":290},[284,896,400],{"class":365},[284,898,403],{"class":294},[284,900,406],{"class":290},[284,902,903],{"class":311},"Object hit:",[284,905,406],{"class":290},[284,907,842],{"class":290},[284,909,845],{"class":330},[284,911,397],{"class":290},[284,913,914],{"class":330},"object",[284,916,853],{"class":294},[284,918,919],{"class":856},"// The Three.js object that was hit\n",[284,921,922,924,926,928,930,932,935,937,939,941,943,946,948],{"class":286,"line":376},[284,923,394],{"class":330},[284,925,397],{"class":290},[284,927,400],{"class":365},[284,929,403],{"class":294},[284,931,406],{"class":290},[284,933,934],{"class":311},"Distance:",[284,936,406],{"class":290},[284,938,842],{"class":290},[284,940,845],{"class":330},[284,942,397],{"class":290},[284,944,945],{"class":330},"distance",[284,947,853],{"class":294},[284,949,950],{"class":856},"// Distance from camera to hit point\n",[284,952,953,955,957,959,961,963,966,968,970,972,974,977,979],{"class":286,"line":391},[284,954,394],{"class":330},[284,956,397],{"class":290},[284,958,400],{"class":365},[284,960,403],{"class":294},[284,962,406],{"class":290},[284,964,965],{"class":311},"Face:",[284,967,406],{"class":290},[284,969,842],{"class":290},[284,971,845],{"class":330},[284,973,397],{"class":290},[284,975,976],{"class":330},"face",[284,978,853],{"class":294},[284,980,981],{"class":856},"// The face that was intersected\n",[284,983,984,986,988,990,992,994,997,999,1001,1003,1005,1008,1010],{"class":286,"line":417},[284,985,394],{"class":330},[284,987,397],{"class":290},[284,989,400],{"class":365},[284,991,403],{"class":294},[284,993,406],{"class":290},[284,995,996],{"class":311},"UV coordinates:",[284,998,406],{"class":290},[284,1000,842],{"class":290},[284,1002,845],{"class":330},[284,1004,397],{"class":290},[284,1006,1007],{"class":330},"uv",[284,1009,853],{"class":294},[284,1011,1012],{"class":856},"// UV coordinates at hit point\n",[284,1014,1015],{"class":286,"line":423},[284,1016,420],{"class":290},[284,1018,1019,1021,1023],{"class":286,"line":428},[284,1020,510],{"class":290},[284,1022,295],{"class":294},[284,1024,317],{"class":290},[284,1026,1027],{"class":286,"line":440},[284,1028,351],{"emptyLinePlaceholder":39},[284,1030,1031,1033,1035],{"class":286,"line":460},[284,1032,291],{"class":290},[284,1034,527],{"class":294},[284,1036,317],{"class":290},[284,1038,1039,1041,1043,1046,1049,1051,1053,1056,1058],{"class":286,"line":465},[284,1040,535],{"class":290},[284,1042,653],{"class":294},[284,1044,1045],{"class":290}," @",[284,1047,1048],{"class":298},"pointermove",[284,1050,305],{"class":290},[284,1052,308],{"class":290},[284,1054,1055],{"class":330},"onPointerMove",[284,1057,308],{"class":290},[284,1059,317],{"class":290},[284,1061,1062,1064,1066],{"class":286,"line":470},[284,1063,545],{"class":290},[284,1065,631],{"class":294},[284,1067,634],{"class":290},[284,1069,1070,1072,1074],{"class":286,"line":482},[284,1071,545],{"class":290},[284,1073,642],{"class":294},[284,1075,634],{"class":290},[284,1077,1078,1080,1082],{"class":286,"line":502},[284,1079,661],{"class":290},[284,1081,653],{"class":294},[284,1083,317],{"class":290},[284,1085,1086,1088,1090],{"class":286,"line":507},[284,1087,510],{"class":290},[284,1089,527],{"class":294},[284,1091,317],{"class":290},[260,1093,1095],{"id":1094},"pointer-missed-events","Pointer Missed Events",[245,1097,1098,1099,1102,1103,1105],{},"You can listen for events when the pointer misses all objects (clicks on empty space) by adding the ",[255,1100,1101],{},"@pointermissed"," event directly to the ",[255,1104,269],{}," component:",[275,1107,1109],{"className":277,"code":1108,"language":279,"meta":280,"style":280},"\u003Cscript setup lang=\"ts\">\nfunction onPointerMissed(event) {\n  console.log('Clicked on empty space')\n  // Useful for deselecting objects, closing menus, etc.\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas @pointermissed=\"onPointerMissed\">\n    \u003C!-- Your 3D objects here -->\n    \u003CTresMesh>\n      \u003CTresBoxGeometry />\n      \u003CTresMeshNormalMaterial />\n    \u003C/TresMesh>\n  \u003C/TresCanvas>\n\u003C/template>\n",[255,1110,1111,1131,1146,1165,1170,1174,1182,1186,1194,1216,1221,1229,1237,1245,1253,1261],{"__ignoreMap":280},[284,1112,1113,1115,1117,1119,1121,1123,1125,1127,1129],{"class":286,"line":287},[284,1114,291],{"class":290},[284,1116,295],{"class":294},[284,1118,299],{"class":298},[284,1120,302],{"class":298},[284,1122,305],{"class":290},[284,1124,308],{"class":290},[284,1126,312],{"class":311},[284,1128,308],{"class":290},[284,1130,317],{"class":290},[284,1132,1133,1135,1138,1140,1142,1144],{"class":286,"line":320},[284,1134,379],{"class":298},[284,1136,1137],{"class":365}," onPointerMissed",[284,1139,403],{"class":290},[284,1141,817],{"class":816},[284,1143,820],{"class":290},[284,1145,388],{"class":290},[284,1147,1148,1150,1152,1154,1156,1158,1161,1163],{"class":286,"line":348},[284,1149,394],{"class":330},[284,1151,397],{"class":290},[284,1153,400],{"class":365},[284,1155,403],{"class":294},[284,1157,406],{"class":290},[284,1159,1160],{"class":311},"Clicked on empty space",[284,1162,406],{"class":290},[284,1164,414],{"class":294},[284,1166,1167],{"class":286,"line":354},[284,1168,1169],{"class":856},"  // Useful for deselecting objects, closing menus, etc.\n",[284,1171,1172],{"class":286,"line":371},[284,1173,420],{"class":290},[284,1175,1176,1178,1180],{"class":286,"line":376},[284,1177,510],{"class":290},[284,1179,295],{"class":294},[284,1181,317],{"class":290},[284,1183,1184],{"class":286,"line":391},[284,1185,351],{"emptyLinePlaceholder":39},[284,1187,1188,1190,1192],{"class":286,"line":417},[284,1189,291],{"class":290},[284,1191,527],{"class":294},[284,1193,317],{"class":290},[284,1195,1196,1198,1200,1202,1205,1207,1209,1212,1214],{"class":286,"line":423},[284,1197,535],{"class":290},[284,1199,269],{"class":294},[284,1201,1045],{"class":290},[284,1203,1204],{"class":298},"pointermissed",[284,1206,305],{"class":290},[284,1208,308],{"class":290},[284,1210,1211],{"class":330},"onPointerMissed",[284,1213,308],{"class":290},[284,1215,317],{"class":290},[284,1217,1218],{"class":286,"line":428},[284,1219,1220],{"class":856},"    \u003C!-- Your 3D objects here -->\n",[284,1222,1223,1225,1227],{"class":286,"line":440},[284,1224,545],{"class":290},[284,1226,653],{"class":294},[284,1228,317],{"class":290},[284,1230,1231,1233,1235],{"class":286,"line":460},[284,1232,628],{"class":290},[284,1234,631],{"class":294},[284,1236,634],{"class":290},[284,1238,1239,1241,1243],{"class":286,"line":465},[284,1240,628],{"class":290},[284,1242,642],{"class":294},[284,1244,634],{"class":290},[284,1246,1247,1249,1251],{"class":286,"line":470},[284,1248,650],{"class":290},[284,1250,653],{"class":294},[284,1252,317],{"class":290},[284,1254,1255,1257,1259],{"class":286,"line":482},[284,1256,661],{"class":290},[284,1258,269],{"class":294},[284,1260,317],{"class":290},[284,1262,1263,1265,1267],{"class":286,"line":502},[284,1264,510],{"class":290},[284,1266,527],{"class":294},[284,1268,317],{"class":290},[260,1270,1272],{"id":1271},"event-propagation","Event Propagation",[245,1274,1275],{},"Events bubble up through the 3D object hierarchy. You can stop propagation using the standard event methods:",[1277,1278],"examples-pointer-events-propagation",{},[275,1280,1282],{"className":277,"code":1281,"language":279,"meta":280,"style":280},"\u003Cscript setup lang=\"ts\">\nfunction onChildClick(event) {\n  event.stopPropagation() // Prevents parent from receiving the event\n  console.log('Child clicked!')\n}\n\nfunction onParentClick() {\n  console.log('Parent clicked!') // Won't fire if child stops propagation\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresGroup @click=\"onParentClick\">\n    \u003CTresMesh @click=\"onChildClick\">\n      \u003CTresBoxGeometry />\n      \u003CTresMeshNormalMaterial />\n    \u003C/TresMesh>\n  \u003C/TresGroup>\n\u003C/template>\n",[255,1283,1284,1304,1319,1335,1354,1358,1362,1373,1395,1399,1407,1411,1419,1441,1462,1470,1478,1486,1494],{"__ignoreMap":280},[284,1285,1286,1288,1290,1292,1294,1296,1298,1300,1302],{"class":286,"line":287},[284,1287,291],{"class":290},[284,1289,295],{"class":294},[284,1291,299],{"class":298},[284,1293,302],{"class":298},[284,1295,305],{"class":290},[284,1297,308],{"class":290},[284,1299,312],{"class":311},[284,1301,308],{"class":290},[284,1303,317],{"class":290},[284,1305,1306,1308,1311,1313,1315,1317],{"class":286,"line":320},[284,1307,379],{"class":298},[284,1309,1310],{"class":365}," onChildClick",[284,1312,403],{"class":290},[284,1314,817],{"class":816},[284,1316,820],{"class":290},[284,1318,388],{"class":290},[284,1320,1321,1324,1326,1329,1332],{"class":286,"line":348},[284,1322,1323],{"class":330},"  event",[284,1325,397],{"class":290},[284,1327,1328],{"class":365},"stopPropagation",[284,1330,1331],{"class":294},"() ",[284,1333,1334],{"class":856},"// Prevents parent from receiving the event\n",[284,1336,1337,1339,1341,1343,1345,1347,1350,1352],{"class":286,"line":354},[284,1338,394],{"class":330},[284,1340,397],{"class":290},[284,1342,400],{"class":365},[284,1344,403],{"class":294},[284,1346,406],{"class":290},[284,1348,1349],{"class":311},"Child clicked!",[284,1351,406],{"class":290},[284,1353,414],{"class":294},[284,1355,1356],{"class":286,"line":371},[284,1357,420],{"class":290},[284,1359,1360],{"class":286,"line":376},[284,1361,351],{"emptyLinePlaceholder":39},[284,1363,1364,1366,1369,1371],{"class":286,"line":391},[284,1365,379],{"class":298},[284,1367,1368],{"class":365}," onParentClick",[284,1370,385],{"class":290},[284,1372,388],{"class":290},[284,1374,1375,1377,1379,1381,1383,1385,1388,1390,1392],{"class":286,"line":417},[284,1376,394],{"class":330},[284,1378,397],{"class":290},[284,1380,400],{"class":365},[284,1382,403],{"class":294},[284,1384,406],{"class":290},[284,1386,1387],{"class":311},"Parent clicked!",[284,1389,406],{"class":290},[284,1391,853],{"class":294},[284,1393,1394],{"class":856},"// Won't fire if child stops propagation\n",[284,1396,1397],{"class":286,"line":423},[284,1398,420],{"class":290},[284,1400,1401,1403,1405],{"class":286,"line":428},[284,1402,510],{"class":290},[284,1404,295],{"class":294},[284,1406,317],{"class":290},[284,1408,1409],{"class":286,"line":440},[284,1410,351],{"emptyLinePlaceholder":39},[284,1412,1413,1415,1417],{"class":286,"line":460},[284,1414,291],{"class":290},[284,1416,527],{"class":294},[284,1418,317],{"class":290},[284,1420,1421,1423,1426,1428,1430,1432,1434,1437,1439],{"class":286,"line":465},[284,1422,535],{"class":290},[284,1424,1425],{"class":294},"TresGroup",[284,1427,1045],{"class":290},[284,1429,607],{"class":298},[284,1431,305],{"class":290},[284,1433,308],{"class":290},[284,1435,1436],{"class":330},"onParentClick",[284,1438,308],{"class":290},[284,1440,317],{"class":290},[284,1442,1443,1445,1447,1449,1451,1453,1455,1458,1460],{"class":286,"line":470},[284,1444,545],{"class":290},[284,1446,653],{"class":294},[284,1448,1045],{"class":290},[284,1450,607],{"class":298},[284,1452,305],{"class":290},[284,1454,308],{"class":290},[284,1456,1457],{"class":330},"onChildClick",[284,1459,308],{"class":290},[284,1461,317],{"class":290},[284,1463,1464,1466,1468],{"class":286,"line":482},[284,1465,628],{"class":290},[284,1467,631],{"class":294},[284,1469,634],{"class":290},[284,1471,1472,1474,1476],{"class":286,"line":502},[284,1473,628],{"class":290},[284,1475,642],{"class":294},[284,1477,634],{"class":290},[284,1479,1480,1482,1484],{"class":286,"line":507},[284,1481,650],{"class":290},[284,1483,653],{"class":294},[284,1485,317],{"class":290},[284,1487,1488,1490,1492],{"class":286,"line":517},[284,1489,661],{"class":290},[284,1491,1425],{"class":294},[284,1493,317],{"class":290},[284,1495,1496,1498,1500],{"class":286,"line":522},[284,1497,510],{"class":290},[284,1499,527],{"class":294},[284,1501,317],{"class":290},[260,1503,1505],{"id":1504},"performance-considerations","Performance Considerations",[688,1507,1508,1511,1514,1521],{},[691,1509,1510],{},"Events are automatically optimized using raycasting",[691,1512,1513],{},"Only objects with event listeners are tested for intersections",[691,1515,1516,1517,1520],{},"Use ",[255,1518,1519],{},"pointer-events: none"," in CSS to disable interaction on specific objects",[691,1522,1523],{},"Consider using object pooling for scenes with many interactive objects",[260,1525,1527],{"id":1526},"typescript-support","TypeScript Support",[245,1529,1530],{},"TresJS provides full TypeScript support for pointer events:",[275,1532,1535],{"className":1533,"code":1534,"language":312,"meta":280,"style":280},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import type { PointerEvent } from '@pmndrs/pointer-events'\n\nfunction handlePointerEvent(event: PointerEvent\u003CMouseEvent>) {\n  // Full type safety for event properties\n  console.log(event.point) // Vector3\n  console.log(event.object) // Object3D\n  console.log(event.xy) // [number, number]\n}\n",[255,1536,1537,1559,1563,1590,1595,1616,1637,1658],{"__ignoreMap":280},[284,1538,1539,1541,1544,1546,1549,1551,1553,1555,1557],{"class":286,"line":287},[284,1540,324],{"class":323},[284,1542,1543],{"class":323}," type",[284,1545,327],{"class":290},[284,1547,1548],{"class":330}," PointerEvent",[284,1550,334],{"class":290},[284,1552,337],{"class":323},[284,1554,340],{"class":290},[284,1556,257],{"class":311},[284,1558,345],{"class":290},[284,1560,1561],{"class":286,"line":320},[284,1562,351],{"emptyLinePlaceholder":39},[284,1564,1565,1567,1570,1572,1574,1577,1580,1582,1585,1588],{"class":286,"line":348},[284,1566,379],{"class":298},[284,1568,1569],{"class":365}," handlePointerEvent",[284,1571,403],{"class":290},[284,1573,817],{"class":816},[284,1575,1576],{"class":290},":",[284,1578,1548],{"class":1579},"sBMFI",[284,1581,291],{"class":290},[284,1583,1584],{"class":1579},"MouseEvent",[284,1586,1587],{"class":290},">)",[284,1589,388],{"class":290},[284,1591,1592],{"class":286,"line":354},[284,1593,1594],{"class":856},"  // Full type safety for event properties\n",[284,1596,1597,1599,1601,1603,1605,1607,1609,1611,1613],{"class":286,"line":371},[284,1598,394],{"class":330},[284,1600,397],{"class":290},[284,1602,400],{"class":365},[284,1604,403],{"class":294},[284,1606,817],{"class":330},[284,1608,397],{"class":290},[284,1610,850],{"class":330},[284,1612,853],{"class":294},[284,1614,1615],{"class":856},"// Vector3\n",[284,1617,1618,1620,1622,1624,1626,1628,1630,1632,1634],{"class":286,"line":376},[284,1619,394],{"class":330},[284,1621,397],{"class":290},[284,1623,400],{"class":365},[284,1625,403],{"class":294},[284,1627,817],{"class":330},[284,1629,397],{"class":290},[284,1631,914],{"class":330},[284,1633,853],{"class":294},[284,1635,1636],{"class":856},"// Object3D\n",[284,1638,1639,1641,1643,1645,1647,1649,1651,1653,1655],{"class":286,"line":391},[284,1640,394],{"class":330},[284,1642,397],{"class":290},[284,1644,400],{"class":365},[284,1646,403],{"class":294},[284,1648,817],{"class":330},[284,1650,397],{"class":290},[284,1652,883],{"class":330},[284,1654,853],{"class":294},[284,1656,1657],{"class":856},"// [number, number]\n",[284,1659,1660],{"class":286,"line":417},[284,1661,420],{"class":290},[1663,1664,1665],"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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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);}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}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 pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":280,"searchDepth":287,"depth":320,"links":1667},[1668,1669,1674,1675,1676,1677,1678],{"id":262,"depth":320,"text":263},{"id":677,"depth":320,"text":678,"children":1670},[1671,1672,1673],{"id":685,"depth":348,"text":686},{"id":723,"depth":348,"text":724},{"id":759,"depth":348,"text":760},{"id":771,"depth":320,"text":772},{"id":1094,"depth":320,"text":1095},{"id":1271,"depth":320,"text":1272},{"id":1504,"depth":320,"text":1505},{"id":1526,"depth":320,"text":1527},"Explore the TresJS pointer events system powered by @pmndrs/pointer-events.","md",null,{},{"title":138,"description":1679},"yWQ0U8wcOZu8QtV7PrXEg2lMKxnMpHNcB5wkFLDS-rk",[1686,1688],{"title":128,"path":129,"stem":130,"description":1687,"children":-1},"useLoader is a composable for loading 3D assets and textures with Three.js loaders, supporting progress tracking and reactivity.",{"title":148,"path":149,"stem":150,"description":1689,"children":-1},"TresJS provides type guard methods to help you determine the type of a Three.js object.",1774953660128]