search

firtoz / react-three-renderer

Render into a three.js canvas using React.
https://toxicfork.github.com/react-three-renderer-example/
MIT License
1.49k stars 155 forks source link

Adding video texture. #112

Open ryandury opened 7 years ago

ryandury commented 7 years ago

Awesome project -- just wondering if i'm able to use a video as a texture. Some insight on how to approach this would be great. Thanks!

Colmea commented 7 years ago

React-three-renderer doesn't directly support VideoTexture at the moment.

But you can, as always with missing react-three-renderer features, use plain javascript to achieve what you need. In this case, you can create your video material in a react event like componentDidMount, then set it to your existing react-three-renderer mesh (a planeGeometry I guess).

Here is an example (/!\ There are missing parts, like camera, but it's working when complete): http://pastebin.com/z4yqwSkV

The difficult part is that you need to use a canvas (where you store you video image) as your material texture, then update this canvas image on each frame with next video image.

Note: I didn't know you can use video as texture, thanks for this funny coding session :D

ryandury commented 7 years ago

Thanks for the demo - i ended up doing something similar - doing it all with plain JS. However I noticed that three has a VideoTexture method, and didn't need to update. Basically following this example: https://threejs.org/examples/webgl_video_panorama_equirectangular.html adding a reference to the react element and watching for movement on mobile devices :)