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