Use of Orbit Controls with Multiple Overlapping Scenes in Three.js

Question

I would appreciate some help in solving a problem related to the use of Orbit Controls with Multiple Overlapping Scenes.

In order to demonstrate the problem I modified the example in multiple scenes and I created a test which is suitable for my developments. The code is available at: test with orbit controls and multiple scenes

In my case I need to implement two scenarios

One scenario with three scenes where each scene occupies part of the web page (div elements … scene0, scene1 and scene … using CSS style) and A second scenario with one scene on the full space of the web page (div elements … scene0, scene1 and scene … using CSS style)

In this example, it is possible to switch between the two scenarios by clicking and pushing the shift button on the keyboard simultaneously.

It appears to work fine but in one of the two scenarios the Orbit Controls is not working.

I have tried to change some parameters :

            element.style.zIndex = "6";
            element.style.order = "6";
            scene.renderOrder = 1.;

But nothing changes.

I would highly appreciate some help at this point since I cannot find a similar case on this issue. Cheers, ilias

K.Miao K.Miao · Accepted Answer · 2017-07-15T17:20:13

Try to add pointer-events: none; to your CSS when you switch.

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

Use of Orbit Controls with Multiple Overlapping Scenes in Three.js

1 Answers