How to load a ThreeJS Object (GLB) ?

[Exareyn]

I'm trying to load a glb on my scene and zoom on it when it's done.

I'm currently facing difficulties in displaying a glb file in Itowns. I've tried several approaches, but I haven't been able to solve the problem. I'm hoping you can help me resolve it or provide guidance on what I might be doing wrong.

I've consulted the Itowns documentation to find information on displaying glb files, but I haven't found a clear solution.
I've searched through the examples provided with Itowns, but I couldn't find a specific example for displaying a glb file. I even searched through MapLibre and Giro3D in case they have something similar.

• im' working on ubuntu on "itowns-2.39.0"

I suppose I need to create a custom Layer but even like that I'm still lost. I'm kinda new to the Web-SIG

[jailln]

Hello,
You can do it by using Threejs GLTFLoader or itowns GLTFLoader (based on three gltf loader). You can do something like this:

var onLoadGltf = function(gltf) {
    view.scene.add(gltf.scene);
}

itowns.glTFLoader.load(
     url,
     onLoadGltf,
     function (xhr) {
         console.info( 'Loading gltf... ' + Math.floor( xhr.loaded / xhr.total * 100 ) + '%' );
      },
      function (error) {
          console.error(error);
      }
);

You can also apply rotations, one to move from y-up (gltf convention) to z-up (itowns convention) for instance; position (with the Coordinates API) and scale to your gltf in the onLoadGltf. You can also make your model z-axis aligned with the normal of the globe where its positionned by using geodesicNormal of Coordinates.

This can be done directly in an example or in your applicative code. You could also create a new GLTFLayer that receives a position, rotation and scale and that manages their correct application but that's a bit more work. Either way, let us know if it works and don't hesitate to open a PR if you make changes to itowns or if you create a new example with a gltf model.