Unable to run animations using @react-spring/three with @react-three/drei and @react-three/fiber

[emilianoglucero]

Hello!

I'm having trouble with @react-spring/three in my project.
I'm not able to make animations like:
https://codesandbox.io/s/rgb-color-delay-er0ph?from-embed
work with this packages versions:

"@react-spring/three": "^9.1.2", "@react-three/drei": "^4.1.3", "@react-three/fiber": "^6.0.10", "three": "^0.127.0"

The result is weird, looks like my mesh just animate only the first time.

I'm only able to run the animations with this packages:
"@react-spring/three": "^9.0.0-rc.3", "react-three-fiber": "^5.3.1", "three": "^0.122.0",

But I cannot integrate @react-three/drei with these version packages, it gives me errors at build time and I tried different drei versions.

I'm doing something wrong? Wich packages should I use to make @react-spring/three @react-three/drei and @react-three/fiber work together?

Thanks in advance :)

[joshuaellis]

Since you only supplied a sandbox for a different example I can only confirm this works with updated packages – https://codesandbox.io/s/rgb-color-delay-forked-sgjb5?file=/src/Effects.js

If you can provide a sandbox of your issue, I can take a look 👍🏼

[emilianoglucero]

Thank you very much joshuaellis.
I discover my problem. I'm trying to play a video in a plane and render it like this:
<mesh ref={ref} scale={[0.75, 0.45, 1]} rotation={[0, 1.5, 0]} position={[-1.92, 0.43, 0]} > <planeBufferGeometry args={[1, 1]} /> <meshBasicMaterial> <videoTexture attach="map" args={[video]} /> </meshBasicMaterial> </mesh>

And i'm using
`const [video, setVideo] = useState();

React.useEffect(() => {
setVideo(() => {
const vid = document.createElement("video");
vid.src = "/myvideo.mp4";
vid.crossOrigin = "Anonymous";
vid.loop = true;
vid.play();
return vid;
});
}, []);`

And it complains and causes an strange behavior in my animations. I'll investigate it tomorrow. Thanks for your help.