Model Viewer for web doesn't show View in AR button when passing Private Signed URL or Public URL from AWS S3

Question

I started using ModelViewer 1.9.2 by google in my angular project to render the 3d model. Possibly surface detection to augment the objects for now. Initially i used 3d models inside application assets to augnment, which went fine and i am able to augment. Now i want to fetch the file from an s3 bucket and pass the url to the model viewer. This is where i am stuck. Neither the public URL nor the Private Signed URL is letting me augment the 3d Object

this is my component.html

<section class="py-5">
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-6">
        <div class="">
          <model-viewer src={{demo_fileURL}} ios-src="" alt={{demo_name}} poster="assets/images/loading_1.gif"
            environment-image="neutral" shadow-intensity="3" shadow-softness="1" camera-controls auto-rotate autoplay ar
            ar-modes="webxr scene-viewer quick-look" ar-scale="auto">
          </model-viewer>
        </div>
      </div>
    </div>
  </div>
</section>

this is my component.ts file

import { Component, OnInit } from '@angular/core';
import { S3FileService } from '../s3-access.service';

@Component({
  selector: 'app-animgirl',
  templateUrl: './animgirl.component.html',
  styleUrls: ['./animgirl.component.css'],
  providers: [S3FileService],
})
export class AnimgirlComponent implements OnInit {
  demo_name: string;
  demo_fileURL: string;
  demo_fileName: string;

  constructor(private s3FileService: S3FileService) {
    this.demo_name = 'Animgirl Character';
    this.demo_fileName = 'character_assets/glb/animgirl.glb';

    var baseURL =
      'https://isl-studio.s3.ap-south-1.amazonaws.com/AR_Milestone1/assets/';

    // Signed URL from AWS S3 link
    // this.demo_fileURL = this.s3FileService.viewAssetFile(this.demo_fileName);
    
    // Public URL from a different bucket
    this.demo_fileURL = baseURL + this.demo_fileName;
    console.log('Final URL : ' + this.demo_fileURL);
  }
  ngOnInit(): void {}
}

When i am passing a signed URL to the modelViewer, I am calling an inbuilt s3 service that will let me access the private bucket using the credentials and return me with a signed URL, so that i can pass it to the model viewer

I have enable the CORS policy to both the s3 buckets(Public and private) here is the CORS policy that I have applied

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "HEAD",
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "https://*",
            "http://*"
        ],
        "ExposeHeaders": []
    }
]

In both the cases, I am able to see the model viewer - the model preview. but the "View in AR" button isn't getting enabled. I have no CORS Access issues. The device that i am using is an Android ARCore enabled device. When I pass the same file from local application assets, I am able to see the "View in AR" button so I am sure that there is nothing wrong with the model viewer plugin attached to the angular application.

The problem comes when i pass a public or signed url to the model viewer. Suggest me if i am missing something in the process.

Answer 1

The issue might be because of the model viewer access via NPM.

Please use the CDN - I personally prefer. Add the below script to your index.html Both the private signed URL and the Public URL are working when I switched back to the CDN.

<!--  Include both scripts below to support all browsers! -->

  <!-- Loads <model-viewer> for modern browsers: -->
  <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
  <!-- Loads <model-viewer> for old browsers like IE11: -->
  <script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>

Answer 2

Model-Viewer needs to initialize, so right at the start of your logic before retrieving the file from the DB. pass an empty string to it, that should do the trick.

this.src = ''

or

this.demo_fileURL = ''