Docs / FAQ

[cbrsnoop]

Sorry for stupid question, but where I can find documentation how to add GLTF model to AR scene (Wasm | NFT)?
Thank you!

[kalwalt]

Hi @cbrsnoop thank you for your question and welcome to WebARKit! Unfortunatley there is no direct examples or a documentation on this topic. But because ARnft is based on jsartoolkitNFT you can look at its examples:
arNFT_gltf_brave_robot_example.html
arNFT_gltf_example.html
arNFT_gltf_flamingo_example.html
If you want to look into the code you need to look at the ARnft-threejs code https://github.com/webarkit/ARnft-threejs/blob/6b15a875e1953489a2362e44fc46c429cd5bb03e/src/markermedia/NFTaddTJS.ts#L121-L163

public addModel(url: string, name: string, scale: number, objVisibility: boolean) {
     const root = new Object3D();
     root.name = "root-" + name;
     this.scene.add(root);
     let model: any;
     /* Load Model */
     const threeGLTFLoader = new GLTFLoader();
     threeGLTFLoader.load(url, (gltf) => {
         model = gltf.scene;
         model.scale.set(scale, scale, scale);
         model.rotation.x = Math.PI / 2;
         this.target.addEventListener("getNFTData-" + this.uuid + "-" + name, (ev: any) => {
             var msg = ev.detail;
             model.position.y = ((msg.height / msg.dpi) * 2.54 * 10) / 2.0;
             model.position.x = ((msg.width / msg.dpi) * 2.54 * 10) / 2.0;
         });
         root.add(model);
     });
     this.target.addEventListener("getMatrixGL_RH-" + this.uuid + "-" + name, (ev: any) => {
         root.visible = true;
         model.visible = true;
         if (this._oef === true) {
             let filter = [new Vector3(0, 0, 0), new Vector3(0, 0, 0), new Vector3(0, 0, 0)];
             filter = this._filter.update(ev.detail.matrixGL_RH);
             root.position.setX(filter[0].x);
             root.position.setY(filter[0].y);
             root.position.setZ(filter[0].z);
             root.rotation.setFromVector3(filter[1]);
             root.scale.setX(filter[2].x);
             root.scale.setY(filter[2].y);
             root.scale.setZ(filter[2].z);
         } else {
             root.matrixAutoUpdate = false;
             const matrix = Utils.interpolate(ev.detail.matrixGL_RH);
             Utils.setMatrix(root.matrix, matrix);
         }
     });
     this.target.addEventListener("nftTrackingLost-" + this.uuid + "-" + name, (ev: any) => {
         root.visible = objVisibility;
         model.visible = objVisibility;
     });
     this.names.push(name);
 }