feat: sensor support integration

[Neosoulink]

Summary

This PR comes with the sensor intersection support!

Enable users to use custom colliders as sensors:

<CuboidCollider
   :args="[10, 3, 0.5]"
   :position="[0, 3, 3]"
   activeCollision
   sensor
   @intersection-enter="onIntersectionEnter"
   @intersection-exit="onIntersectionExit"
/>

Record

Screen.Recording.2024-10-11.at.11.35.00.PM.mov

This PR will resolve #107

[Neosoulink]

⚠️ IMPORTANT NOTE:

I'm getting the unsupported properties warning when using custom colliders with intersection events:

[Vue warn]: Extraneous non-emits event listeners (intersectionEnter, intersectionExit) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the "emits" option. 
  at <Anonymous name="cuboid-sensor" args= Array(3) position= Array(3)  ... > 
  at <RigidBody type="fixed" > 
  at <Physics debug="" > 
  at <App>

I understand this is coming from my emitIntersection utility, where I'm trying to get the correct collider component:

export const emitIntersection = (
  source: sourceTarget,
  target: sourceTarget,
  started: boolean,
) => {
  const collisionType: collisionType = started ? 'enter' : 'exit'
  const colliderNode = (source.object as any)?.__vnode?.children?.[1]?.children?.find((child: any) => child?.component?.exposed?.instance?.value === source.context.collider)

  colliderNode?.component?.emit?.(`intersection-${collisionType}`, { source, target })
}

I don't have a better solution right now to solve the issue, but I'll try to dig in to see if I can improve the integration.

cc: @JaimeTorrealba

[alvarosabu]

I understand this is coming from my emitIntersection utility, where I'm trying to get the correct collider component:

export const emitIntersection = (
  source: sourceTarget,
  target: sourceTarget,
  started: boolean,
) => {
  const collisionType: collisionType = started ? 'enter' : 'exit'
  const colliderNode = (source.object as any)?.__vnode?.children?.[1]?.children?.find((child: any) => child?.component?.exposed?.instance?.value === source.context.collider)

  colliderNode?.component?.emit?.(`intersection-${collisionType}`, { source, target })
}

I don't have a better solution right now to solve the issue, but I'll try to dig in to see if I can improve the integration.

Hi @Neosoulink this is probably happening because those new intersection-* emits are not declared in the emit definition here https://github.com/Tresjs/tres/blob/af704c1e8e146608d34543325af67b0b43703f20/src/components/TresCanvas.vue#L79

Is it colliderNode.component a Tres component?

[Neosoulink]

Is it colliderNode.component a Tres component?

Hi @alvarosabu,
No, but it uses the Tres component to get the Collider component, colliderNode.component is the current Collider component triggering the intersection event.

Note: Probably next week I'll create new types instead of using any

[alvarosabu]

Is it colliderNode.component a Tres component?

Hi @alvarosabu, No, but it uses the Tres component to get the Collider component, colliderNode.component is the current Collider component triggering the intersection event.

Note: Probably next week I'll create new types instead of using any

Hi @Neosoulink if you are in control of the Collider Component, I think you need define the emits using defineEmits https://vuejs.org/api/sfc-script-setup#defineprops-defineemits to get rid of that error.

[Neosoulink]

Hi @Neosoulink if you are in control of the Collider Component, I think you need define the emits using defineEmits https://vuejs.org/api/sfc-script-setup#defineprops-defineemits to get rid of that error.

Okay, let me try this ✅