Manually triggering events

[stilllovinnero]

Hey all,

tl;dr: How do I trigger click events manually via a button?

I am currently trying to build a first person game in r3f and I am using the build-in onClick events for interactions with objects.
In the desktop version of the game I am using PointerLockControlls and the computeOffset function in the raycaster to detect mouseclicks as if they are made from the middle of the screen. (Visualized by a crosshair)

My problem comes with the mobile version of the game. I want to use the same system with the onClick events, but I want to fire the raycaster via a button not via a touch on the canvas.

Some digging and asking made me think that I could do something like
const {events} = getThree(); events.onClick();
But the events object is returned as "undefined" :/
I also tried to use the intersect method, but I cant find an example for it and I am not sure how to use it. Is there any example code i am missing?

[drcmda]

yes you can do that but you need to pass a fake event with offsetX/Y so that the raycaster can shoot a ray and see if anything has been hit. additionally you can also call events on meshes and groups directly if you have the reference.

you can also override the offset compute function, which is probably best:

<Canvas raycaster={{ computeOffsets: e => ({ offsetX: number, offsetY: number })

if you just take the width and height of the canvas and divide it by 2 then you should be able to make all events point to the middle.

[stilllovinnero]

Hey,
thank you for your answer, the computeOffset works perfectly!
Sadly I am stumped on how to pass a fake event. I tried to dispatch a mouseEvent to the canvas, but that didn't work to fire the raycaster :/

[drcmda]

onClick({ type: ---, offsetX: ---, offsetY: --- }) but you wouldn't need that with compute

[stilllovinnero]

But how do I trigger a onClick Event via a Button when I am only using the computOffset?
If I understand computeOffset right, then it positions the defauls raycaster at the offset?

[drcmda]

i tried it and it works, but you must replicate real pointerevent behaviour a little more closely

<Canvas onCreated={({ size } ) => {
  setTimeout(() => {
    const fake = { target: { width: size.width, height: size.height }, offsetX: 0, offsetY: 0 }}
    state.events.handlers.onPointerDown(fake)
    state.events.handlers.onClick(fake)
  }, 4000)
}}>

it needs pointerdown because that tracks the initial pointer position, a click that started on an element but moves off it and then releases is not a click. that's why just sending a click doesn't work.

i gave it offsetx/y 0 because offset is being overwritten by the computeOffsets function anyway.

[stilllovinnero]

After fiddling around with this again, this is my working solution:

...
useFrame((state) => 
{
  if(buttonPressed)
  {
    const fake = { nativeEvent: {offsetX: 0, offsetY: 0 }};
    state.events.onPointerDown(fake);
    state.events.onClick(fake);
    setButtonPressed(false)
  }
});

it is inside a component inside the canvas.