Switching using one screen

Questions
1

Hi,
I want to switch between d3.js screen and three.js screen.
when i click radio button(d3.js / three.js)
On one screen.

I try it.
I expected to see three.js screen in the d3.js screen same position.
but, under the d3.js screen, the three.js screen appeared.

the blue screen is d3.js screen
and the black screen is three.js screen.

this is my failed scripts.

case 1.

        three.renderer = new THREE.WebGLRenderer();
        three.renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
        document.body.appendChild(three.renderer.domElement);

case 2.
var myCanvas = document.getElementById(“root”)
three.renderer = new THREE.WebGLRenderer({canvas: myCanvas});
three.renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
document.body.appendChild(three.renderer.domElement);

How can I switch the each screen.
on one screen?

thank you.

picture1
picture12003×1070 163 KB

2

Have a look at the following example: three.js css2d - label

It combines CSS2DRenderer with WebGLRenderer by overlaying the renderer’s DOM elements. Meaning the WebGL canvas is drawn first, then the HTML container for representing the labels.

Even if you don’t have to render things on top of each other, you can use the same approach for your use case. You can then easily configure the view by hiding or showing the respective three or D3 rendering.