Loading multiple cameras from glb/gltf and setting in UI

Questions
,
1

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!

image
image1522×1080 83.3 KB

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

2

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

3

Thanks!

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.

4

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
5

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…

6

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:

image
image1672×1412 101 KB

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

image
image1614×1112 46.5 KB

Any ideas what is going on?

7

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;

8

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

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.

9

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.

image
image1318×1354 88.4 KB

10

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