Loading multiple cameras from glb/gltf and setting in UI

Hi all, long time reader first time poster.

I’m starting to create an app for vurtual tours of buildings, there are some great tutorials I’ve read but none specifically address my question; How can I extract multiple cameras from a glb/gltf and create them as babylon cameras which can be accessed through a UI?

The sanbox has this functionality, this is a file exported from Bledner with cameras set at specific positions, I’d like these to be exposed when the file is imported in BabylonJS.

The playground below is based on this question Making Camera from GLTF file be a universal camera - Questions - Babylon.js (babylonjs.com) but has a file pulled in with 4 cameras set-up.

Any pointers would be greatly appreciated!

Multiple Cameras from GLTF | Babylon.js Playground (babylonjs.com)

Welcome abroad! I took a look at your PR but didn’t see what was wrong with it?


I was looking for advice on how to expose the cameras from the glb file as cameras available in the UI. End goal is to creaet something like the sandbox which pulls out cameras/views in the glb as preset views in the sandbox UI.

I see! You can use Babylon GUI or plain HTML for that, you create buttons whose event listener functions will attach to the selected camera: The Babylon GUI | Babylon.js Documentation (babylonjs.com)

Here’s an example I started with a few cameras :slight_smile: Multiple Cameras from GLTF | Babylon.js Playground (babylonjs.com)

1 Like

Great, thank you.! I’ll see if I can build this out a bit, I’m a novice at developing web apps so learning as I go…

Hmm, there seems to be a difference in how the playground and sandbox import cameras from a glb. This the from the sandbox, matches the exported glb from Blender:

And this is the same glb and camera imported into the playground:

Any ideas what is going on?

I was just trying to add collisions and having this line in the code seems to make the scene respect the original camera locations, new playground below. I’m not sure why this would happen?

camera.checkCollisions = true;

This line is causing an error in your code (remember to check your console while writing code):

Which makes all the lines after it not execute. The “culprit” for the difference between the two is actually:

scene.activeCamera.parent = null;

on line 81. Your scene cameras are set up relative to their parents in the scene hierarchy (which you can check with the Inspector), so removing the parent will mess up their transformations.

Great! thank you.

Is there a way to prevent an Orthographic camera getting distorted when adjsusting the canvas size? This doesn’t happen with perspective cameras.

you need to call engine.resize() on window resize events