multiple canvas in a component

[jacky0707]

I'm using react-slick for carousel usage to display gltf/img/video files, but I found the result didn't work as expected, sometimes the gltf model won't show up in the Canvas, sometimes the whole Canvas won't show.

my slider:

my MerchandiseMedia component part

gltf loader

And after some debug process, I found it seems that it is because there's multiple Canvas at the same time that cause such an unexcept result.

I made a sandbox for it: https://codesandbox.io/s/gltfloader-forked-o3064v?file=/src/App.js

Can anyone share some idea about how to overcome this kind of issue?

[drcmda]

using multiple canvas is generally a terrible idea, the browser limits the number to 8 or 10 until it closes the tab, there cannot be any data shared between them (which is why you see things work and then not, three is unmounting and disposing thing as you add/remove them), performance is bad, etc.

this is the solution: https://github.com/pmndrs/drei#view

but then again, i would implement the carousel in webgl altogether and instead annotate with html. https://codesandbox.io/s/l4klb check out the other demos for drei/scrollcontrols as well.

[jacky0707]

Thx this is really nice. I'll spend more time on webgl, thank you very much for the answers.

[campbellgoe]

Pmndrs has given us create-r3f-app which uses tunnel-rat for rendering different three.js canvases in next.js app router pages
npx create-r3f-app next my-app -ts
to get started.
Hopefully this is useful for anyone thinking about rendering multiple three (r3f) canvases in a next.js codebase.