I’m having trouble getting two ThreeJS simulations working at the same time on one page (separate divs). Both use r110 and both work separately - if I disable waterfall.js then the globe starts working. I’m creating both of these in separate scripts. This is my first time trying to use multiple ThreeJS elements at once.
Follow up question: What is the best way to stop the simulation when it’s out of view to maximize performance and re-enable when they come back into view?
What are you doing in those 2 separate scripts? A codepen with your code would be useful, there are man possible reasons for one of your scenes not working.
Here are some examples of multiple views:
https://threejs.org/examples/webgl_multiple_elements.html
https://threejs.org/examples/webgl_multiple_elements_text.html
https://threejs.org/examples/webgl_multiple_scenes_comparison.html
https://threejs.org/examples/webgl_multiple_views.html
For pausing the simulation when out of view, an IntersectionObserver is the simplest solution.
Thanks Arthur,
My only concern with codepen which is what I used for a previous question is there’s about 20 individual scripts so I’m unsure as to how to do that with codepen?
I’d go for a minimal codepen that only does what you’re having trouble with. Instead of a waterfall / globe, maybe go for a scene with a cube and another with a sphere. It’ll be much easier to figure out what’s going wrong when you’re only dealing with the issue, and you don’t have to take into account the rest of your code.