[{"data":1,"prerenderedAt":1675},["ShallowReactive",2],{"navigation":3,"/api/events/pointer-events":239,"/api/events/pointer-events-surround":1670},[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":1664,"extension":1665,"links":1666,"meta":1667,"navigation":39,"path":139,"seo":1668,"stem":140,"__hash__":1669},"docs/3.api/3.events/1.pointer-events.md",{"type":242,"value":243,"toc":1651},"minimark",[244,259,264,271,274,668,672,675,680,714,718,750,754,762,766,773,1082,1086,1096,1257,1261,1264,1267,1487,1491,1509,1513,1516,1647],[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,580,595,610,616,628,638,649,659],{"__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,573,575,578],{"class":286,"line":567},23,[284,569,570],{"class":298},"      @pointerenter",[284,572,305],{"class":290},[284,574,308],{"class":290},[284,576,577],{"class":311},"onPointerEnter",[284,579,564],{"class":290},[284,581,583,586,588,590,593],{"class":286,"line":582},24,[284,584,585],{"class":298},"      @pointerleave",[284,587,305],{"class":290},[284,589,308],{"class":290},[284,591,592],{"class":311},"onPointerLeave",[284,594,564],{"class":290},[284,596,598,601,603,605,608],{"class":286,"line":597},25,[284,599,600],{"class":298},"      @click",[284,602,305],{"class":290},[284,604,308],{"class":290},[284,606,607],{"class":311},"onClick",[284,609,564],{"class":290},[284,611,613],{"class":286,"line":612},26,[284,614,615],{"class":290},"    >\n",[284,617,619,622,625],{"class":286,"line":618},27,[284,620,621],{"class":290},"      \u003C",[284,623,624],{"class":294},"TresBoxGeometry",[284,626,627],{"class":290}," />\n",[284,629,631,633,636],{"class":286,"line":630},28,[284,632,621],{"class":290},[284,634,635],{"class":294},"TresMeshNormalMaterial",[284,637,627],{"class":290},[284,639,641,644,647],{"class":286,"line":640},29,[284,642,643],{"class":290},"    \u003C/",[284,645,646],{"class":294},"TresMesh",[284,648,317],{"class":290},[284,650,652,655,657],{"class":286,"line":651},30,[284,653,654],{"class":290},"  \u003C/",[284,656,269],{"class":294},[284,658,317],{"class":290},[284,660,662,664,666],{"class":286,"line":661},31,[284,663,510],{"class":290},[284,665,527],{"class":294},[284,667,317],{"class":290},[260,669,671],{"id":670},"available-events","Available Events",[245,673,674],{},"TresJS supports all standard pointer events that you can listen to on any 3D object:",[676,677,679],"h3",{"id":678},"mouse-events","Mouse Events",[681,682,683,690,696,702,708],"ul",{},[684,685,686,689],"li",{},[255,687,688],{},"@click"," - Fired when the object is clicked",[684,691,692,695],{},[255,693,694],{},"@doubleclick"," - Fired when the object is double-clicked",[684,697,698,701],{},[255,699,700],{},"@contextmenu"," - Fired when right-clicking the object",[684,703,704,707],{},[255,705,706],{},"@pointerdown"," - Fired when pointer is pressed down on the object",[684,709,710,713],{},[255,711,712],{},"@pointerup"," - Fired when pointer is released over the object",[676,715,717],{"id":716},"hover-events","Hover Events",[681,719,720,726,732,738,744],{},[684,721,722,725],{},[255,723,724],{},"@pointerenter"," - Fired when pointer enters the object's bounds",[684,727,728,731],{},[255,729,730],{},"@pointerleave"," - Fired when pointer leaves the object's bounds",[684,733,734,737],{},[255,735,736],{},"@pointerover"," - Fired when pointer is over the object",[684,739,740,743],{},[255,741,742],{},"@pointerout"," - Fired when pointer moves away from the object",[684,745,746,749],{},[255,747,748],{},"@pointermove"," - Fired when pointer moves while over the object",[676,751,753],{"id":752},"drag-events","Drag Events",[681,755,756],{},[684,757,758,761],{},[255,759,760],{},"@pointercancel"," - Fired when pointer interaction is cancelled",[260,763,765],{"id":764},"event-objects","Event Objects",[245,767,768,769,772],{},"Event handlers receive a ",[255,770,771],{},"PointerEvent"," object with useful information:",[275,774,776],{"className":277,"code":775,"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,777,778,798,816,851,882,913,944,975,1006,1010,1018,1022,1030,1050,1058,1066,1074],{"__ignoreMap":280},[284,779,780,782,784,786,788,790,792,794,796],{"class":286,"line":287},[284,781,291],{"class":290},[284,783,295],{"class":294},[284,785,299],{"class":298},[284,787,302],{"class":298},[284,789,305],{"class":290},[284,791,308],{"class":290},[284,793,312],{"class":311},[284,795,308],{"class":290},[284,797,317],{"class":290},[284,799,800,802,805,807,811,814],{"class":286,"line":320},[284,801,379],{"class":298},[284,803,804],{"class":365}," onPointerMove",[284,806,403],{"class":290},[284,808,810],{"class":809},"sHdIc","event",[284,812,813],{"class":290},")",[284,815,388],{"class":290},[284,817,818,820,822,824,826,828,831,833,836,839,841,844,847],{"class":286,"line":348},[284,819,394],{"class":330},[284,821,397],{"class":290},[284,823,400],{"class":365},[284,825,403],{"class":294},[284,827,406],{"class":290},[284,829,830],{"class":311},"Pointer position:",[284,832,406],{"class":290},[284,834,835],{"class":290},",",[284,837,838],{"class":330}," event",[284,840,397],{"class":290},[284,842,843],{"class":330},"point",[284,845,846],{"class":294},") ",[284,848,850],{"class":849},"sHwdD","// 3D world position\n",[284,852,853,855,857,859,861,863,866,868,870,872,874,877,879],{"class":286,"line":354},[284,854,394],{"class":330},[284,856,397],{"class":290},[284,858,400],{"class":365},[284,860,403],{"class":294},[284,862,406],{"class":290},[284,864,865],{"class":311},"Screen coordinates:",[284,867,406],{"class":290},[284,869,835],{"class":290},[284,871,838],{"class":330},[284,873,397],{"class":290},[284,875,876],{"class":330},"xy",[284,878,846],{"class":294},[284,880,881],{"class":849},"// 2D screen coordinates\n",[284,883,884,886,888,890,892,894,897,899,901,903,905,908,910],{"class":286,"line":371},[284,885,394],{"class":330},[284,887,397],{"class":290},[284,889,400],{"class":365},[284,891,403],{"class":294},[284,893,406],{"class":290},[284,895,896],{"class":311},"Object hit:",[284,898,406],{"class":290},[284,900,835],{"class":290},[284,902,838],{"class":330},[284,904,397],{"class":290},[284,906,907],{"class":330},"object",[284,909,846],{"class":294},[284,911,912],{"class":849},"// The Three.js object that was hit\n",[284,914,915,917,919,921,923,925,928,930,932,934,936,939,941],{"class":286,"line":376},[284,916,394],{"class":330},[284,918,397],{"class":290},[284,920,400],{"class":365},[284,922,403],{"class":294},[284,924,406],{"class":290},[284,926,927],{"class":311},"Distance:",[284,929,406],{"class":290},[284,931,835],{"class":290},[284,933,838],{"class":330},[284,935,397],{"class":290},[284,937,938],{"class":330},"distance",[284,940,846],{"class":294},[284,942,943],{"class":849},"// Distance from camera to hit point\n",[284,945,946,948,950,952,954,956,959,961,963,965,967,970,972],{"class":286,"line":391},[284,947,394],{"class":330},[284,949,397],{"class":290},[284,951,400],{"class":365},[284,953,403],{"class":294},[284,955,406],{"class":290},[284,957,958],{"class":311},"Face:",[284,960,406],{"class":290},[284,962,835],{"class":290},[284,964,838],{"class":330},[284,966,397],{"class":290},[284,968,969],{"class":330},"face",[284,971,846],{"class":294},[284,973,974],{"class":849},"// The face that was intersected\n",[284,976,977,979,981,983,985,987,990,992,994,996,998,1001,1003],{"class":286,"line":417},[284,978,394],{"class":330},[284,980,397],{"class":290},[284,982,400],{"class":365},[284,984,403],{"class":294},[284,986,406],{"class":290},[284,988,989],{"class":311},"UV coordinates:",[284,991,406],{"class":290},[284,993,835],{"class":290},[284,995,838],{"class":330},[284,997,397],{"class":290},[284,999,1000],{"class":330},"uv",[284,1002,846],{"class":294},[284,1004,1005],{"class":849},"// UV coordinates at hit point\n",[284,1007,1008],{"class":286,"line":423},[284,1009,420],{"class":290},[284,1011,1012,1014,1016],{"class":286,"line":428},[284,1013,510],{"class":290},[284,1015,295],{"class":294},[284,1017,317],{"class":290},[284,1019,1020],{"class":286,"line":440},[284,1021,351],{"emptyLinePlaceholder":39},[284,1023,1024,1026,1028],{"class":286,"line":460},[284,1025,291],{"class":290},[284,1027,527],{"class":294},[284,1029,317],{"class":290},[284,1031,1032,1034,1036,1039,1041,1043,1046,1048],{"class":286,"line":465},[284,1033,535],{"class":290},[284,1035,646],{"class":294},[284,1037,1038],{"class":298}," @pointermove",[284,1040,305],{"class":290},[284,1042,308],{"class":290},[284,1044,1045],{"class":311},"onPointerMove",[284,1047,308],{"class":290},[284,1049,317],{"class":290},[284,1051,1052,1054,1056],{"class":286,"line":470},[284,1053,545],{"class":290},[284,1055,624],{"class":294},[284,1057,627],{"class":290},[284,1059,1060,1062,1064],{"class":286,"line":482},[284,1061,545],{"class":290},[284,1063,635],{"class":294},[284,1065,627],{"class":290},[284,1067,1068,1070,1072],{"class":286,"line":502},[284,1069,654],{"class":290},[284,1071,646],{"class":294},[284,1073,317],{"class":290},[284,1075,1076,1078,1080],{"class":286,"line":507},[284,1077,510],{"class":290},[284,1079,527],{"class":294},[284,1081,317],{"class":290},[260,1083,1085],{"id":1084},"pointer-missed-events","Pointer Missed Events",[245,1087,1088,1089,1092,1093,1095],{},"You can listen for events when the pointer misses all objects (clicks on empty space) by adding the ",[255,1090,1091],{},"@pointermissed"," event directly to the ",[255,1094,269],{}," component:",[275,1097,1099],{"className":277,"code":1098,"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,1100,1101,1121,1136,1155,1160,1164,1172,1176,1184,1204,1209,1217,1225,1233,1241,1249],{"__ignoreMap":280},[284,1102,1103,1105,1107,1109,1111,1113,1115,1117,1119],{"class":286,"line":287},[284,1104,291],{"class":290},[284,1106,295],{"class":294},[284,1108,299],{"class":298},[284,1110,302],{"class":298},[284,1112,305],{"class":290},[284,1114,308],{"class":290},[284,1116,312],{"class":311},[284,1118,308],{"class":290},[284,1120,317],{"class":290},[284,1122,1123,1125,1128,1130,1132,1134],{"class":286,"line":320},[284,1124,379],{"class":298},[284,1126,1127],{"class":365}," onPointerMissed",[284,1129,403],{"class":290},[284,1131,810],{"class":809},[284,1133,813],{"class":290},[284,1135,388],{"class":290},[284,1137,1138,1140,1142,1144,1146,1148,1151,1153],{"class":286,"line":348},[284,1139,394],{"class":330},[284,1141,397],{"class":290},[284,1143,400],{"class":365},[284,1145,403],{"class":294},[284,1147,406],{"class":290},[284,1149,1150],{"class":311},"Clicked on empty space",[284,1152,406],{"class":290},[284,1154,414],{"class":294},[284,1156,1157],{"class":286,"line":354},[284,1158,1159],{"class":849},"  // Useful for deselecting objects, closing menus, etc.\n",[284,1161,1162],{"class":286,"line":371},[284,1163,420],{"class":290},[284,1165,1166,1168,1170],{"class":286,"line":376},[284,1167,510],{"class":290},[284,1169,295],{"class":294},[284,1171,317],{"class":290},[284,1173,1174],{"class":286,"line":391},[284,1175,351],{"emptyLinePlaceholder":39},[284,1177,1178,1180,1182],{"class":286,"line":417},[284,1179,291],{"class":290},[284,1181,527],{"class":294},[284,1183,317],{"class":290},[284,1185,1186,1188,1190,1193,1195,1197,1200,1202],{"class":286,"line":423},[284,1187,535],{"class":290},[284,1189,269],{"class":294},[284,1191,1192],{"class":298}," @pointermissed",[284,1194,305],{"class":290},[284,1196,308],{"class":290},[284,1198,1199],{"class":311},"onPointerMissed",[284,1201,308],{"class":290},[284,1203,317],{"class":290},[284,1205,1206],{"class":286,"line":428},[284,1207,1208],{"class":849},"    \u003C!-- Your 3D objects here -->\n",[284,1210,1211,1213,1215],{"class":286,"line":440},[284,1212,545],{"class":290},[284,1214,646],{"class":294},[284,1216,317],{"class":290},[284,1218,1219,1221,1223],{"class":286,"line":460},[284,1220,621],{"class":290},[284,1222,624],{"class":294},[284,1224,627],{"class":290},[284,1226,1227,1229,1231],{"class":286,"line":465},[284,1228,621],{"class":290},[284,1230,635],{"class":294},[284,1232,627],{"class":290},[284,1234,1235,1237,1239],{"class":286,"line":470},[284,1236,643],{"class":290},[284,1238,646],{"class":294},[284,1240,317],{"class":290},[284,1242,1243,1245,1247],{"class":286,"line":482},[284,1244,654],{"class":290},[284,1246,269],{"class":294},[284,1248,317],{"class":290},[284,1250,1251,1253,1255],{"class":286,"line":502},[284,1252,510],{"class":290},[284,1254,527],{"class":294},[284,1256,317],{"class":290},[260,1258,1260],{"id":1259},"event-propagation","Event Propagation",[245,1262,1263],{},"Events bubble up through the 3D object hierarchy. You can stop propagation using the standard event methods:",[1265,1266],"examples-pointer-events-propagation",{},[275,1268,1270],{"className":277,"code":1269,"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,1271,1272,1292,1307,1323,1342,1346,1350,1361,1383,1387,1395,1399,1407,1428,1447,1455,1463,1471,1479],{"__ignoreMap":280},[284,1273,1274,1276,1278,1280,1282,1284,1286,1288,1290],{"class":286,"line":287},[284,1275,291],{"class":290},[284,1277,295],{"class":294},[284,1279,299],{"class":298},[284,1281,302],{"class":298},[284,1283,305],{"class":290},[284,1285,308],{"class":290},[284,1287,312],{"class":311},[284,1289,308],{"class":290},[284,1291,317],{"class":290},[284,1293,1294,1296,1299,1301,1303,1305],{"class":286,"line":320},[284,1295,379],{"class":298},[284,1297,1298],{"class":365}," onChildClick",[284,1300,403],{"class":290},[284,1302,810],{"class":809},[284,1304,813],{"class":290},[284,1306,388],{"class":290},[284,1308,1309,1312,1314,1317,1320],{"class":286,"line":348},[284,1310,1311],{"class":330},"  event",[284,1313,397],{"class":290},[284,1315,1316],{"class":365},"stopPropagation",[284,1318,1319],{"class":294},"() ",[284,1321,1322],{"class":849},"// Prevents parent from receiving the event\n",[284,1324,1325,1327,1329,1331,1333,1335,1338,1340],{"class":286,"line":354},[284,1326,394],{"class":330},[284,1328,397],{"class":290},[284,1330,400],{"class":365},[284,1332,403],{"class":294},[284,1334,406],{"class":290},[284,1336,1337],{"class":311},"Child clicked!",[284,1339,406],{"class":290},[284,1341,414],{"class":294},[284,1343,1344],{"class":286,"line":371},[284,1345,420],{"class":290},[284,1347,1348],{"class":286,"line":376},[284,1349,351],{"emptyLinePlaceholder":39},[284,1351,1352,1354,1357,1359],{"class":286,"line":391},[284,1353,379],{"class":298},[284,1355,1356],{"class":365}," onParentClick",[284,1358,385],{"class":290},[284,1360,388],{"class":290},[284,1362,1363,1365,1367,1369,1371,1373,1376,1378,1380],{"class":286,"line":417},[284,1364,394],{"class":330},[284,1366,397],{"class":290},[284,1368,400],{"class":365},[284,1370,403],{"class":294},[284,1372,406],{"class":290},[284,1374,1375],{"class":311},"Parent clicked!",[284,1377,406],{"class":290},[284,1379,846],{"class":294},[284,1381,1382],{"class":849},"// Won't fire if child stops propagation\n",[284,1384,1385],{"class":286,"line":423},[284,1386,420],{"class":290},[284,1388,1389,1391,1393],{"class":286,"line":428},[284,1390,510],{"class":290},[284,1392,295],{"class":294},[284,1394,317],{"class":290},[284,1396,1397],{"class":286,"line":440},[284,1398,351],{"emptyLinePlaceholder":39},[284,1400,1401,1403,1405],{"class":286,"line":460},[284,1402,291],{"class":290},[284,1404,527],{"class":294},[284,1406,317],{"class":290},[284,1408,1409,1411,1414,1417,1419,1421,1424,1426],{"class":286,"line":465},[284,1410,535],{"class":290},[284,1412,1413],{"class":294},"TresGroup",[284,1415,1416],{"class":298}," @click",[284,1418,305],{"class":290},[284,1420,308],{"class":290},[284,1422,1423],{"class":311},"onParentClick",[284,1425,308],{"class":290},[284,1427,317],{"class":290},[284,1429,1430,1432,1434,1436,1438,1440,1443,1445],{"class":286,"line":470},[284,1431,545],{"class":290},[284,1433,646],{"class":294},[284,1435,1416],{"class":298},[284,1437,305],{"class":290},[284,1439,308],{"class":290},[284,1441,1442],{"class":311},"onChildClick",[284,1444,308],{"class":290},[284,1446,317],{"class":290},[284,1448,1449,1451,1453],{"class":286,"line":482},[284,1450,621],{"class":290},[284,1452,624],{"class":294},[284,1454,627],{"class":290},[284,1456,1457,1459,1461],{"class":286,"line":502},[284,1458,621],{"class":290},[284,1460,635],{"class":294},[284,1462,627],{"class":290},[284,1464,1465,1467,1469],{"class":286,"line":507},[284,1466,643],{"class":290},[284,1468,646],{"class":294},[284,1470,317],{"class":290},[284,1472,1473,1475,1477],{"class":286,"line":517},[284,1474,654],{"class":290},[284,1476,1413],{"class":294},[284,1478,317],{"class":290},[284,1480,1481,1483,1485],{"class":286,"line":522},[284,1482,510],{"class":290},[284,1484,527],{"class":294},[284,1486,317],{"class":290},[260,1488,1490],{"id":1489},"performance-considerations","Performance Considerations",[681,1492,1493,1496,1499,1506],{},[684,1494,1495],{},"Events are automatically optimized using raycasting",[684,1497,1498],{},"Only objects with event listeners are tested for intersections",[684,1500,1501,1502,1505],{},"Use ",[255,1503,1504],{},"pointer-events: none"," in CSS to disable interaction on specific objects",[684,1507,1508],{},"Consider using object pooling for scenes with many interactive objects",[260,1510,1512],{"id":1511},"typescript-support","TypeScript Support",[245,1514,1515],{},"TresJS provides full TypeScript support for pointer events:",[275,1517,1520],{"className":1518,"code":1519,"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,1521,1522,1544,1548,1575,1580,1601,1622,1643],{"__ignoreMap":280},[284,1523,1524,1526,1529,1531,1534,1536,1538,1540,1542],{"class":286,"line":287},[284,1525,324],{"class":323},[284,1527,1528],{"class":323}," type",[284,1530,327],{"class":290},[284,1532,1533],{"class":330}," PointerEvent",[284,1535,334],{"class":290},[284,1537,337],{"class":323},[284,1539,340],{"class":290},[284,1541,257],{"class":311},[284,1543,345],{"class":290},[284,1545,1546],{"class":286,"line":320},[284,1547,351],{"emptyLinePlaceholder":39},[284,1549,1550,1552,1555,1557,1559,1562,1565,1567,1570,1573],{"class":286,"line":348},[284,1551,379],{"class":298},[284,1553,1554],{"class":365}," handlePointerEvent",[284,1556,403],{"class":290},[284,1558,810],{"class":809},[284,1560,1561],{"class":290},":",[284,1563,1533],{"class":1564},"sBMFI",[284,1566,291],{"class":290},[284,1568,1569],{"class":1564},"MouseEvent",[284,1571,1572],{"class":290},">)",[284,1574,388],{"class":290},[284,1576,1577],{"class":286,"line":354},[284,1578,1579],{"class":849},"  // Full type safety for event properties\n",[284,1581,1582,1584,1586,1588,1590,1592,1594,1596,1598],{"class":286,"line":371},[284,1583,394],{"class":330},[284,1585,397],{"class":290},[284,1587,400],{"class":365},[284,1589,403],{"class":294},[284,1591,810],{"class":330},[284,1593,397],{"class":290},[284,1595,843],{"class":330},[284,1597,846],{"class":294},[284,1599,1600],{"class":849},"// Vector3\n",[284,1602,1603,1605,1607,1609,1611,1613,1615,1617,1619],{"class":286,"line":376},[284,1604,394],{"class":330},[284,1606,397],{"class":290},[284,1608,400],{"class":365},[284,1610,403],{"class":294},[284,1612,810],{"class":330},[284,1614,397],{"class":290},[284,1616,907],{"class":330},[284,1618,846],{"class":294},[284,1620,1621],{"class":849},"// Object3D\n",[284,1623,1624,1626,1628,1630,1632,1634,1636,1638,1640],{"class":286,"line":391},[284,1625,394],{"class":330},[284,1627,397],{"class":290},[284,1629,400],{"class":365},[284,1631,403],{"class":294},[284,1633,810],{"class":330},[284,1635,397],{"class":290},[284,1637,876],{"class":330},[284,1639,846],{"class":294},[284,1641,1642],{"class":849},"// [number, number]\n",[284,1644,1645],{"class":286,"line":417},[284,1646,420],{"class":290},[1648,1649,1650],"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":1652},[1653,1654,1659,1660,1661,1662,1663],{"id":262,"depth":320,"text":263},{"id":670,"depth":320,"text":671,"children":1655},[1656,1657,1658],{"id":678,"depth":348,"text":679},{"id":716,"depth":348,"text":717},{"id":752,"depth":348,"text":753},{"id":764,"depth":320,"text":765},{"id":1084,"depth":320,"text":1085},{"id":1259,"depth":320,"text":1260},{"id":1489,"depth":320,"text":1490},{"id":1511,"depth":320,"text":1512},"Explore the TresJS pointer events system powered by @pmndrs/pointer-events.","md",null,{},{"title":138,"description":1664},"0h4-37qoPLPffqfNBGGDKEOG4FZe4yVIP8rUAXkZEcs",[1671,1673],{"title":128,"path":129,"stem":130,"description":1672,"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":1674,"children":-1},"TresJS provides type guard methods to help you determine the type of a Three.js object.",1782052333034]