I will like to put each of the spheres in different canvas so that I could manipulate their positions easily with CSS. Then hover in each h2 to show display them one by one
I have been advised to refactor the code with ES6 Classes for constructing every canvas with the sphere inside.
how can I achieve this?
It seems your fiddle produce a runtime error:
Uncaught ReferenceError: sphere is not defined
I would suggest you use a single instance of WebGLRenderer and render each sphere with a separate call of WebGLRenderer.render(). After rendering, just copy the contents of the renderer’s internal canvas to the canvas elements in your HTML like so:
context.drawImage( renderer.domElement, 0, 0 );
context is a 2D rendering context obtained from one of your canvas elements. This approach is also used in this official demo:
Thanks here a correctes version for the error encountered: https://jsfiddle.net/zhampu/q5j42pu9/18/
For this example I only put 2 images however there are generated by php and so it can happen theres more than this.
In terms of performance is best to have then only one WebGLRenderer right?
I can’t share any performance numbers but using a single WebGLRenderer is the most straightforward approach.
About using multiple WebGLRenderers: Keep in mind that the amount of parallel WebGL contexts is very limited. Depending on how many spheres you want to show at the same time, this restriction can easily break your app.