Multiple instances of Three.js in same page to show objects library


I was working on a Vue.Js project and I need to paginate several animations into the page. I was wondering about the best approach to save memory and have a reactive page.

I have read the best is having just one CANVAS and include the object inside: webgl_multiple_elements

I like it but… my UI is not so simple so I prefer to create a Vue component having the canvas and replicate it into my page, one for each element.

Do you have some new suggestions?


Consider to ask this question at the Vue community since it’s not primary related to three.js. It’s more about how to manage canvas objects with Vue components.

1 Like

Thanks Mugen. I was wondering if I can manage multiple canvas in same page or it is a bad practice in Three.js… I have to load about 20/30 animations for page. Just like a catalog. I can do it in vue (there is no problem) but what about three? Do you think is it better to gave just one canvas having all the animations or I can create separated canvas (as I prefer as Vue side)?

Thanks for your opinion

If you are going to create multiple canvas objects, you have to use a similar approach like in webgl_multiple_canvases_grid. Meaning you have to do a render for each view and then copy the contents from the renderer’s internal canvas to the view’s canvas. In the demo, this done with the following line:

context.drawImage( renderer.domElement, 0, 0 );

where context is a 2D drawing context of a view canvas.

I’m not sure about the overhead of this copy operation. Especially if you have to do this 20/30 times per frame. Hence, I would prefer the approach from webgl_multiple_elements.

It may be that you are limited by the number of contexts that are required. Instantiating 30 different renderers, if I understand this correctly, may or may not work depending on the browser?

Could you use vue to manage a ClientRect, instead of a full blown canvas? Sounds like all you really need are a few numbers to set up a viewport and a scissor test.

If you use the approach from webgl_multiple_canvases_grid, you only have a single instance of WebGLRenderer.

1 Like