Three.js Multiple Renderers Tutorial

It’s fairly simple to implement multiple renderers in the DOM for the same scene, in this tutorial I’m going to show you how.

Getting Started

The first step is to create a standard DOM boilerplate. The only different you may see here is the CSS, I’ve set the canvas to be 50% of the DOM. We’re going to have two renderers stacked on top of each other taking up the full width of the DOM and half the height.

Now let’s create a simple scene in three.js. I’m going to initialize a couple global variables for our scene. Notice I have created a renderer1 and renderer2.

This will create one renderer and our scene displays successfully. Adding our 2nd renderer is the exact same step as adding our first.

In our init function add the following:

And in our animate function add the following:

That’s it, you now have a scene with two renderers. Feel free to play with the width/height values and the size of the scene to display them on your website as desired.

Don’t forget to update your camera display ratio when things change. Here is the entire code for the scene.

Leave a Reply