How can I optimise my THREE.JS rendering?

Are you sure it’s the number of draw calls that is the culprit here? See here to get an accurate number of draw calls so that you can certainly decide if that is a problem. In my (limited) experience, the biggest resource drain when it comes to Three.js (well, it’s not directly connected to it, but anyway) is to let the animations run even when you don’t need them. In other words, in the case of, say, requestAnimationFrame(), I’ve seen quite a few cases where folks just set their rotation increments to 0 to achieve a “pause” in the animation, but that is ineffective when it comes to resource usage, the right way is to cancelAnimationFrame() altogether. Doing that whenever your scene is static might improve the performance in those moments. Of course, once you resume (or rather, start again the requests) the animation, it will be the same thing, but at least it’s not the whole time.

Chrome’s dev tools panel has some useful ways to check for bottlenecks in performance, so you can look there as well to try to identify the real cause of increased resource usage.