search

tommasoturchi / react-three-mind

MindAR components for @react-three/fiber
37 stars 12 forks source link

useFrame hook not working #2

Closed sewonist closed 1 year ago

sewonist commented 2 years ago

Hi

I just keep working with fiber and mind-ar.

I've add 3d model and animation with useFrame. Unfortunatley, useFrame hook didn't work with below error.

Uncaught Error: R3F: Hooks can only be used within the Canvas component!

When I put useFrame directly inside Canvas it was working. But not working insdie ARView.

I know ARView wrapped Canvas. So it's really weird.

Can you use useFrame inside ARView?

tommasoturchi commented 2 years ago

Hi sewonist, Uhm this is weird, it supposed to work since as you noticed, ARView is just a wrapper over the @react-three/fiber Canvas. Are you using useFrame inside a component that is instantiated inside the ARView? Can you share an example? I tried replicating it inside the face-tracking example and it looks like it's working. Cheers,

Tommaso

sewonist commented 1 year ago

Hi.

I found reason. It is occurred when using latest threejs and fiber. It works with fiber 7.0.26 but doesn't work with fiber 8.8.10. I don't know why. Fiber should be changed something. I will research more.

sewonist commented 1 year ago

Hi Tommaso,

I figure out this issue. I've updated dependencies in react-three-mind and rebuild it. And I removed dependencies for react-three-mind in my project. I use just react-three-mind package. Now it works for me. I commit it to forked my repositories. Cheers,

Sewon

tommasoturchi commented 1 year ago

Ok, I've updated the dependencies on the main repository too and changed the code accordingly (the latest version of @react-three/fiber removed attachObjects in favour of attach). Closing the issue.

samueljoos commented 1 year ago

Removing the r3f dependency does not work for me. Module not found: Can't resolve '@react-three/drei' Which seems kind of logical.

I'm using nextjs with node 17.0.1

samueljoos commented 1 year ago

Update: it works when using npm but not when using yarn.

tommasoturchi commented 1 year ago

I definitely need to look into this. I'm still experimenting with the new PR for mind-ar mentioned here https://github.com/tommasoturchi/react-three-mind/issues/4 that might improve compatibility across the board, will keep you posted, I'm reopening the issue to remind myself :-)

sewonist commented 1 year ago

It should be package version issue. Check @react-three/drei and @react-three/fiber version in react-three-mind and your prokect. Normally, our project install higher verison than reac-three-mind. So I've set my package.json like below.

image (my project package.json dependencies)

I remove ^ and install same version with react-three-mind dependencies. I'm not sure it is right way. But it works for me.