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

Questions
1

Hello,

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?

Thanks!

2

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
3

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

4

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.

5

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.

6

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

1 Like
8

Have you figured it out? im trying to the same thing as well.