Using a three.js canvas with Custombox

Question

I am using three.js to create a 360 panorama on a page.
I have several thumbnails on the page and clicking on a thumbnail does two things. It swaps in the correct texture to the panorama canvas (this works), and then creates a custombox modal with the canvas in the custombox.

This isn't working. What I am seeing is that the original canvas element still exists in the DOM and is working. And in the custombox there is a second canvas element, but it appears to be empty and has no functionality.

Am I misunderstanding how the canvas element works that makes it not possible for it to appear in a modal dialog box?

Answer 1

Im assuming, without any code presented that your target for CustomBox is an ID of the div which contains your canvas, or the canvas itself. In this case CustomBox is going to clone your div/canvas. You'll see all the constituent parts needed, but three.js doesn't know about them because you passed the original div to the renderer when it was instantiated. The render() call you're using takes the following parameters:

.render ( scene, camera, renderTarget, forceClear )

Since the render can point to a new renderTarget as the third parameter, I would start here, and pass in a unique ID of the new canvas being shown by CustomBox. There is plenty of methods available: https://threejs.org/docs/#api/renderers/WebGLRenderer such as getRenderTarget so you can see which canvas is currently getting drawn to as well, and importantly setRenderTarget() which may also be useful to you.