How to display a three.js scene in a modal popup

Questions
,
1

HI,
I have a main scene for a project and a secondary scene that shows information and a drawing about the main scene.

Does anyone know if there is a way or can point me to info on how to display the second scene in a modal/popup?

Thanks

2

You can create another canvas and make a new scene but this will duplicate all your resources. It’s also possible to use a full screen canvas and then manage several views with scissor tests. However, this is also very complicated because of various overlaps.

3

Thanks for the reply!

I already have the second scene created and using scissor add it to a separate div in the main body of the page.

I then created a modal containing the second scene and this is where I have the issue.

When the scene is within a non modal div all displays perfectly, but when the div is included within the modal, the scene does not display.

Hope that makes sense!?

4

@Picklehead –

I’m not sure I understand the structure of your page. Is your <canvas> a child element of the modal <div>? If not, its z-index might be too low, so the <canvas> is hidden under the modal <div>.

– Pavel

5

HI, the canvas is a child of the modal

6

If your modal parent is set to display none originally the internals of three js sets the canvas size to 0w 0h by default, you’ll see this by inspecting the canvas element, you need to resize the three js canvas when the modal is set to display block or anything other than “none”. There’s a number of ways to do this, the observer api is one but you can also just set the renderer size and camera aspect on the click of opening the modal

7

HI and Thanks!

I will try a canvas resize and see if that fixes the issue.

8

The canvas did have size on inspection.

I tried a resize regardless and did see the other scene for a split second and then it disappeared.

9

@Picklehead –

Maybe it’s about time to share some minimal and online editable example of the problem.

– Pavel

10

Hi,
Have sorted the issue.

Very quick and dirty example using the Three.js example from Multiple Canvases Multiple Scenes - three.js manual (threejs.org)

Fiddle link Three.Js Multiple Scenes - JSFiddle - Code Playground

1 Like
11

@Picklehead –

Good.

So, what was the problem?

– Pavel

1 Like
12

The issue was position of the canvas element within the code of the Popup. As per the example and all works perfectly.

1 Like
13

adding this one for react + three users:

(hover the version 8 link) it takes care of everything with a single, share canvas. a scene in that case is truly an isolated entity where everything works as expected, from interaction, events, controls, etc. and it’s trivial to set up.