Search code examples
three.jsautodesk-forge

How to add GLTF Model in THREEJS level?

I want to create an extension that can load gltf once the method is call. I'm using the latest threejs module according to this blog. But got an error. enter image description here

Here's my code.

   const gltfLoader = new GLTFLoader();
  let example = new THREE.Object3D();
  gltfLoader.load(
    "https://threejsfundamentals.org/threejs/resources/models/cartoon_lowpoly_small_city_free_pack/scene.gltf",
    (gltf) => {
      example = gltf.scene;
      console.log(example);
      if (!this.viewer.overlays.hasScene("gltf")) {
        this.viewer.overlays.addScene("gltf");
      }
      this.viewer.overlays.addMesh(example, "gltf");
    }
  );
Solution

  • Regarding the glTF, you may check out this blog post and consider using the Autodesk.glTF ext instead: https://forge.autodesk.com/blog/gltf-20-support-forge-viewer

    viewer.loadExtension('Autodesk.glTF').then(() => {
    viewer.loadModel('address/of/your/model.gltf');
});

    See here for the code sample: https://github.com/petrbroz/forge-basic-app/tree/experiment/gltf2

    Here's a couple of things to keep in mind when working with glTF files in Forge Viewer:

    • The viewer extension does not aim to be fully compliant with the glTF 2.0 specification
      • For example, the material/shader system in Forge Viewer is different from the PBR (physically-based rendering) materials used in glTF, so the viewer will not be able to represent all glTF materials to their full extent
      • Some features of the file format such as animations are not supported
    • If the glTF file defines multiple objects in a tree structure, the individual objects will be selectable in the viewer and the tree structure will appear in the Model Browser dialog; note however that many glTF files store the entire scene as a single object
    • The glTF specification does not use any concept of metadata attached to individual elements; the Properties dialog in the viewer will therefore not provide any additional information about selected elements