How to switch between multiple cameras embedded into glTF?

[cx20]

I know that VC.gltf and project_polly.gltf have cool cameras built in them. However, I do not know how to use them in this library. Can you add samples if possible?

https://www.youtube.com/watch?v=l7TB1O51X_M

[but0n]

Currently, this library havn't parsing cameras information, but you can still implement this by attach the camera entity you already created to the target node at scene.

Example based on v0.0.47 Seems like the angle of view is incorrect.

• Create a camera entity and load gltf scene

  // Camera and controls
  let mainCamera = EntityMgr.create('camera');
  let cameraTrans = mainCamera.components.Transform;
  let cam = EntityMgr.addComponent(mainCamera, new Camera(screen.width / screen.height));
  
  vec3.set(cameraTrans.translate, 0, 0, 0.1); // set a little bit z offset to allow you orbit around
  
  EntityMgr.addComponent(mainCamera, new OrbitControl(screen, mainCamera));
  
  let gltfroot = await Asset.loadGLTF(gltf, screen, skybox);
  scene.appendChild(gltfroot);
  let root = gltfroot.components.Transform;
  root.translate[1] = yoffset || 0;
  vec3.scale(root.scale, root.scale, scale || 200)

• find a node, attach camera

  let movingTarget = document.querySelectorAll('[data-name=Correction__MovingCamera]')[0];
  
  movingTarget.appendChild(mainCamera);
  
  EntityMgr.hasNewMember = true;

[cx20]

@but0n Thanks to your advice I was able to try out the camera embedded in the Polly model. Ashes v0.0.47 + project_polly result

BTW, I tried the same thing with VC.gltf, but I could not find the camera. Is it because the camera name is not set?

[but0n]

Actually, the value of data-name is related with the nodes[n].name, not the camera name.

If the target node doesn’t has a name, it could be difficult to query the entity of target, unless you specify a name by modifying the glTF file.

[cx20]

I understand that I am using a node name instead of a camera name.

I tried several other WebGL libraries for reference. It seems that if you do not set the node name or the camera name, it is automatically assigned numbers.

Below is example of three.js.

three.js + Polly model result:

thre.js + VC.gltf result:

Below is example of Babylon.js.

Babylon.js + Polly model resultl:

Babylon.js + VC.gltf result:

[but0n]

That will be useful! I will add this feature in next version.

[cx20]

I confirmed that Ashes v0.0.49 will display nodes with no names. However, I do not know which node the camera is tied to, so I'm happy if there is a way to know.

[but0n]

Now you can query those cameras and set one of them as main camera:

// screen  = Ashes.Screen.list['#screen']
screen.mainCamera = Ashes.EntityMgr.getComponents('Camera')[2]

[cx20]

@but0n Thank you for support of the camera. I modified the gltf-test sample so that I switch the camera at regular intervals.

Ashes + VC.gltf + camera sample

let cameras =  Ashes.EntityMgr.getComponents('Camera');
if ( cameras.length > 0 ) {
    setInterval(function(){
        let cameraIndex = Math.floor(cameras.length * Math.random());
        screen.mainCamera = cameras[cameraIndex];
    }, 5000);
}