Animate position of multiple components

[StephenDRoberts]

Hello

I've implemented a component that uses a custom onWheel event to adjusts the position of its underlying mesh within a useFrame hook.

However I now want to use the same onWheel event to move other components. I've seen the ScrollControls helped in react-three-drei, but I dont believe it reacts the way I want it to.

Is there a way for two components to share the same onWheel event?

Cheers

Steve

[joshuaellis]

If the onWheel event is attached to the window then you could write a custom hook to handle this. Else you could use global state to store the wheel event value. That's how I would begin to approach the issue, without seeing any code, that's the best I can think of right now.

[StephenDRoberts]

The hook worked out perfectly for me, thank you @joshuaellis.

I created this hook and then passed in my old handleWheelEvent functions that controlled positioning to the hook.

import { useEffect } from 'react';

export const useWheelEvent = (callback) => {

  useEffect(() => {
    window.addEventListener('wheel', callback)

    return () => window.removeEventListener('wheel', callback)
  }, [callback])
}

Also following this post.

Thanks again Joshua!

[drcmda]

but that is the same as onWheel, but now you're creating multiple events per element, which imo is bad. two components reacting to onwheel can easily execute the same callback.

function Foo({ onWheel }) {
  ... <mesh onWheel={onWheel}

function Bar({ onWheel }) {
  ... <mesh onWheel={onWheel}

function App() {
  const callback = useCallback((event) => {
    // event.object is the mesh that's received the event
  }, [])
  ...
  <Foo onWheel={callback}
  <Bar onWheel={callback}

i would not try to mess with global events if i was you. this is just a react problem, with a react solution. even if you must use global events, i'd put them to the parental level and centralise the callback.

[joshuaellis]

but that is the same as onWheel, but now you're creating multiple events per element, which imo is bad. two components reacting to onwheel can easily execute the same callback.

function Foo({ onWheel }) {

  ... <mesh onWheel={onWheel}



function Bar({ onWheel }) {

  ... <mesh onWheel={onWheel}



function App() {

  const callback = useCallback((event) => {

    // event.object is the mesh that's received the event

  }, [])

  ...

  <Foo onWheel={callback}

  <Bar onWheel={callback}

i would not try to mess with global events if i was you. this is just a react problem, with a react solution. even if you must use global events, i'd put them to the parental level and centralise the callback.

This is definitely difference in opinion. Prop drilling can be considered obtuse when you can use context to pass callbacks.

In short, there's a million ways to skin a cat.

[drcmda]

i'm trying to not leave react, same as for the dom, queries and addeventlisteners are something i avoid. in scrollcontrols i had to make one up and it really bugged me that r3f doesn't catch scroll ootb. this makes me think, maybe collecting the events that we already listen to somewhere could be useful. all these events are already there and we later just guide them through the raycaster.

lastEvents: {
  onPointerMove: ...,
  onPointerOver: ...,
  onScroll: ...,

useFrame(state => {
  state.lastEvents.onScroll.delta ...

@CodyJasonBennett it. could make some things much easier.