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