Camera won't move after jumping to a new scene

[adrianf]

Hello,

I'm "jumping" from an intro scene ( in which a 360 video is playing with a ArcRotateCamera ) to a new scene in which a FreeCamera or a VRDeviceOrientationGamepadCamera is used. ( To make the scene switch/jump I use XMLHttpRequest and then eval() )

The problem is that although the scene and the camera are changed the camera does not move using the keyboard. ( mouse movement is working )
If I click on a html element in the page or open the inspect element/console and then click back on the canvas,  the camera starts moving with the keys as well.
No errors in the console.
( I get the same behavior weather I do camera.attachControl(canvas, true); or camera.attachControl(canvas). )

Any ideas on how to fix this?

Thank you

[Guest]

can you repro somewhere?

[adrianf]

yes,
the two scenes can be found in vrmarket/public/js
introvideo.js & ShoppingArena.js
https://bitbucket.org/vrmarket/vrmarket/src/06d7c6fbb41b72b63faa45765bcee58d71a291d0/
( we are still learning so I apologies that this is not the cleanest or most professional code ... )

Thank you

[Guest]

no worry. I was more thinking about a running repro:) (And please use babylon.max.js to ease debug)

[adrianf]

I've set up http://vrmarket.eu-4.evennode.com/

To skip the intro video one can press the arrows button in the right bottom corner.

[Dad72]

It's not easy without seeing on the playground. There is a lot of code file on your link.

Maybe you can reproduce on a simple scene this change of scene and camera. It must surely miss you something that you use on scene 1 in scene 2.

[adrianf]

Dad72, thank you for trying and having a look at the code.

I did not manage to port the jump scene part into the playground but I did simplified things a bit.
I don't use XMLHttpRequest  anymore to jump to the new scene.  I dispose of the intro scene.

In the Intro.js (line 143) I do a 

scene.activeCamera.detachControl(canvas);

scene.dispose();

ShoppingArena = new ShoppingArena('renderCanvas', engine);

in ShoppingArena.js (line 85 ) two things are done

// Shopper and arena creation when the loading is finished

var shopper = new Shopper(_this);  // this is actually the moving camera

var arena = new Arena(_this);  // this creates the environment for the moving camera ( aka user ) 

In the Shopper constructor _initcamera() is called and here the camera is created and attached to the canvas

_initCamera: function() {

 

var cam = new BABYLON.FreeCamera("camera", this.spawnPoint, this.scene);

//...

this.scene.activeCamera = cam;

this.scene.activeCamera.attachControl(this.scene.getEngine().getRenderingCanvas());

// var canvas = document.getElementById("renderCanvas");

// this.scene.activeCamera.attachControl(canvas);

return cam;

},

Maybe you see somethings that I'm missing here ... ( for me it's really strange that I have no controls and then I have controls if I go to another tab or do inspect and then click back to the canvas ...)

Thank you once again
 

[Dad72]

did you try this: (I add true in attachControl) :

_initCamera: function() {
 
var cam = new BABYLON.FreeCamera("camera", this.spawnPoint, this.scene);

this.scene.activeCamera = cam;
this.scene.activeCamera.attachControl(this.scene.getEngine().getRenderingCanvas(), true);

return cam;
},

But a PG would really help us to see the problem.

[adrianf]

yes, I've tried that , same behavior ? 
( I'll give it another try to bring this to PG ) 

[RaananW]

Is the keyboard attached to the scene? can you see if your keyboard attached to your scene? something aqlong the line of:

scene.onKeyboardObservable.add((e) => {
    console.log("pressed", e.event.key);
})

If this callback is not called, the input is not attached to the scene, which will explain this behavior.

[adrianf]

Hi RaananW,
You are correct, I've tested with your snippet and the keyboard is not attached to the scene ...
any ideas on how to solve it ?

( I've tried two things that I've found online but they did not work, both of them are attaching stuff on the camera and not in the scene ...
     cam.inputs.attachInput(cam.inputs.attached.keyboard);  and cam.inputs.attached.keyboard.attachControl(this.scene.getEngine().getRenderingCanvas()); )

 

Thank you 
 

[RaananW]

When are you creating your new scene?

Try calling scene.attachControl() and see if it solves the issue

[Dad72]

A PG remains the best so that we can help you effectively.

[adrianf]

I've tried it immediately after creating the scene but unfortunately it did not solved the issue        
var scene = new BABYLON.Scene(engine);
        scene.attachControl();  also scene.attachControl(canvas); 

[Dad72]

We can not help you without PG. Your problem could be solved in somes minutes with a PG.

Good luck. 

[adrianf]

Dad72,
Unfortunately it seams that I don't have the knowledge/understanding to make the "scene jump" inside PG. ??

I tried something here but it's not what is should be.?

[Dad72]

Here's how you could do it. Build your 2 scenes normally and in the rendering loop display the scene you want without having to dispose() the first one scene each time.

So you can easily display scene 1 with scene1.render () or scene2.render()

https://www.babylonjs-playground.com/#1AP18W#13

All you have to do is create your system to move from one scene to another.

I hope this will help. 

[adrianf]

Thank you Dad72, i'll see if this helps first thing tomorrow ...
Today my daughter turns one year ? ( Can't believe it ...  life ... ?)

Wish you all a wonderful day !!!

[Dad72]

Happy birthday for your daughter.   wonderful day also. 

[adrianf]

Sorry guys some things intervene and I couldn't come back to this until now 
The scene jump is performed and one can move the camera with keys 
https://www.babylonjs-playground.com/#1AP18W#14
I'll continue looking to see if I can reproduce the issue in PG
or maybe change my code and do the scene switch this way... although if one does the scene switch this way then the assets for both scenes need to be initially loaded, no ?