diff --git a/docs/getting-started/vanilla.md b/docs/getting-started/vanilla.md
index 19a26efa..751af77f 100644
--- a/docs/getting-started/vanilla.md
+++ b/docs/getting-started/vanilla.md
@@ -11,7 +11,7 @@ The vanilla version of uikit allows to build user interfaces with plain Three.js
 The vanilla version of uikit (`@pmndrs/uikit`) is decoupled from react. Therefore features such providing defaults via context is not available. Furthermore, no event system is available out of the box. For interactivity, such as hover effects, developers have to attach their own event system by emitting pointer events to the UI elements:
 
 ```js
-uiElement.dispatchEvent({ type: 'pointerover', target: uiElement, nativeEvent: { pointerId: 1 } })
+uiElement.dispatchEvent({ type: 'pointerover', target: uiElement, { pointerId: 1 })
 ```
 
 Aside from interactivity and contexts, every feature is available.
diff --git a/examples/vanilla/index.ts b/examples/vanilla/index.ts
index a3b9a3a7..fc4c9a0a 100644
--- a/examples/vanilla/index.ts
+++ b/examples/vanilla/index.ts
@@ -46,7 +46,7 @@ const x = new Container({
   justifyContent: 'center',
   onSizeChange: console.log,
 })
-setTimeout(() => x.dispatchEvent({ type: 'pointerover', target: x, nativeEvent: { pointerId: 1 } } as any), 0)
+setTimeout(() => x.dispatchEvent({ type: 'pointerover', target: x, pointerId: 1 } as any), 0)
 const img = new Image({
   src: 'https://picsum.photos/300/300',
   borderRadius: 1000,
diff --git a/packages/uikit/src/active.ts b/packages/uikit/src/active.ts
index 57fa9b17..71643b1d 100644
--- a/packages/uikit/src/active.ts
+++ b/packages/uikit/src/active.ts
@@ -31,16 +31,16 @@ export function addActiveHandlers(
     activeSignal.value.length = 0
     return
   }
-  const onLeave = ({ nativeEvent }: ThreeEvent<PointerEvent>) => {
-    activeSignal.value = activeSignal.value.filter((id) => id != nativeEvent.pointerId)
+  const onLeave = ({ pointerId }: ThreeEvent<PointerEvent>) => {
+    activeSignal.value = activeSignal.value.filter((id) => id != pointerId)
     if (activeSignal.value.length > 0) {
       return
     }
     properties?.onActiveChange?.(false)
     style?.onActiveChange?.(false)
   }
-  addHandler('onPointerDown', target, ({ nativeEvent }) => {
-    activeSignal.value = [nativeEvent.pointerId, ...activeSignal.value]
+  addHandler('onPointerDown', target, ({ pointerId }) => {
+    activeSignal.value = [pointerId, ...activeSignal.value]
     if (activeSignal.value.length != 1) {
       return
     }
diff --git a/packages/uikit/src/events.ts b/packages/uikit/src/events.ts
index 977c4862..fa527810 100644
--- a/packages/uikit/src/events.ts
+++ b/packages/uikit/src/events.ts
@@ -1,11 +1,11 @@
-import { Intersection, Object3D } from 'three'
+import { Intersection } from 'three'
 
 export type ThreeEvent<TSourceEvent> = Intersection & {
   nativeEvent: TSourceEvent
   defaultPrevented?: boolean
   stopped?: boolean
   stopPropagation?: () => void
-}
+} & (TSourceEvent extends { pointerId: number } ? { pointerId: number } : {})
 
 export type KeyToEvent<K extends keyof EventHandlers> = Parameters<Required<EventHandlers>[K]>[0]
 
diff --git a/packages/uikit/src/hover.ts b/packages/uikit/src/hover.ts
index 0c46c822..e81c19c3 100644
--- a/packages/uikit/src/hover.ts
+++ b/packages/uikit/src/hover.ts
@@ -38,8 +38,8 @@ export function addHoverHandlers(
     hoveredSignal.value.length = 0
     return
   }
-  addHandler('onPointerOver', target, ({ nativeEvent }) => {
-    hoveredSignal.value = [nativeEvent.pointerId, ...hoveredSignal.value]
+  addHandler('onPointerOver', target, ({ pointerId }) => {
+    hoveredSignal.value = [pointerId, ...hoveredSignal.value]
     if (hoveredSignal.value.length === 1) {
       properties?.onHoverChange?.(true)
       style?.onHoverChange?.(true)
@@ -48,8 +48,8 @@ export function addHoverHandlers(
       setCursorType(hoveredSignal, cursor)
     }
   })
-  addHandler('onPointerOut', target, ({ nativeEvent }) => {
-    hoveredSignal.value = hoveredSignal.value.filter((id) => id != nativeEvent.pointerId)
+  addHandler('onPointerOut', target, ({ pointerId }) => {
+    hoveredSignal.value = hoveredSignal.value.filter((id) => id != pointerId)
     if (hoveredSignal.value.length === 0) {
       properties?.onHoverChange?.(false)
       style?.onHoverChange?.(false)
diff --git a/packages/uikit/src/scroll.ts b/packages/uikit/src/scroll.ts
index eecf5872..5c847648 100644
--- a/packages/uikit/src/scroll.ts
+++ b/packages/uikit/src/scroll.ts
@@ -183,18 +183,18 @@ export function computedScrollHandlers(
     if (!isScrollable.value) {
       return undefined
     }
-    const onPointerFinish = ({ nativeEvent }: ThreeEvent<PointerEvent>) => {
-      if (!downPointerMap.delete(nativeEvent.pointerId) || downPointerMap.size > 0 || scrollPosition.value == null) {
+    const onPointerFinish = ({ pointerId }: ThreeEvent<PointerEvent>) => {
+      if (!downPointerMap.delete(pointerId) || downPointerMap.size > 0 || scrollPosition.value == null) {
         return
       }
       //only request a render if the last pointer that was dragging stopped dragging and this panel is actually scrollable
       root.requestRender()
     }
     return {
-      onPointerDown: ({ nativeEvent, point }) => {
-        let interaction = downPointerMap.get(nativeEvent.pointerId)
+      onPointerDown: ({ pointerId, point }) => {
+        let interaction = downPointerMap.get(pointerId)
         if (interaction == null) {
-          downPointerMap.set(nativeEvent.pointerId, (interaction = { timestamp: 0, point: new Vector3() }))
+          downPointerMap.set(pointerId, (interaction = { timestamp: 0, point: new Vector3() }))
         }
         interaction.timestamp = performance.now() / 1000
         object.current!.worldToLocal(interaction.point.copy(point))
@@ -203,7 +203,7 @@ export function computedScrollHandlers(
       onPointerLeave: onPointerFinish,
       onPointerCancel: onPointerFinish,
       onPointerMove: (event) => {
-        const prevInteraction = downPointerMap.get(event.nativeEvent.pointerId)
+        const prevInteraction = downPointerMap.get(event.pointerId)
 
         if (prevInteraction == null) {
           return