Next.js Discord

Discord Forum

Three.js canvas updates when cam position/target is changed

Answered
B33fb0n3 posted this in #help-forum
Open in Discord
Hey, currently I am trying to load multiple 3d elements on my page (works fine) and change the positionings with the help of a modal.

I followed this tutorial to provide only one canvas with multiple 3d elements in it: https://codesandbox.io/p/devbox/github/pmndrs/react-three-next/

However: the changing of the camera perspective is pretty buggy as you can see here: (see attached) -> If you don't know what I mean, watch the video (1 min)

Why is it that buggy and why does changing the position & target from one element does affect the other elements as well?

For the rendering of the elements I used the codesandbox. Let me know if you need more code for specific parts.
Answered by B33fb0n3
Solved it by removing the <Stage> component and adding a PerspectiveCamera that will be made as default. Another thing that I done was to put every element to the position 0,0,0. I also modified how position/targets are calculated/renewed and created my own camera controller so it's less buggy and there are less rerenders. With the remove of the stage I also renewed the lighting and now have a more accurate and easier to manage light management.

The final result (to big for discord):
https://we.tl/t-XPMbirk0QN
View full answer

3 Replies

Bump
bump
Solved it by removing the <Stage> component and adding a PerspectiveCamera that will be made as default. Another thing that I done was to put every element to the position 0,0,0. I also modified how position/targets are calculated/renewed and created my own camera controller so it's less buggy and there are less rerenders. With the remove of the stage I also renewed the lighting and now have a more accurate and easier to manage light management.

The final result (to big for discord):
https://we.tl/t-XPMbirk0QN
Answer