Web 模型查看器在从 AWS S3 传递私有签名 URL 或公有 URL 时不显示"在 AR 中查看"按钮

Question

我开始在我的角度项目中使用谷歌的ModelViewer 1.9.2来渲染三维模型。目前可能通过表面探测来增强物体。最初，我使用了应用程序资产中的三维模型进行挖掘，这很好，我能够进行扩充。现在，我想从s3 bucket中获取文件，并将url传递给模型查看器。这就是我陷入困境的地方。无论是公共URL还是私人签名URL都不允许我增强3d对象

这是我的组件.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>

这是我的组件.ts文件

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 {}
}

当我将签名的URL传递给modelViewer时，我调用了一个内置的s3服务，该服务将允许我使用凭据访问私有存储桶，并返回一个签名的URL，这样我就可以将其传递给模型查看器

我已经为s3存储桶(公共和私有(启用了CORS策略这是我应用的CORS策略

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

在这两种情况下，我都可以看到模型查看器-模型预览。但是"；AR中的视图"；按钮未启用。我没有CORS访问问题。我使用的设备是一个支持安卓ARCore的设备。当我从本地应用程序资产传递相同的文件时；AR中的视图"；按钮，所以我确信连接到angular应用程序的模型查看器插件没有任何问题。

当我将一个公共或签名的url传递给模型查看器时，问题就出现了。如果我在这个过程中遗漏了什么，建议我。

Answer 1

问题可能是因为通过NPM访问模型查看器。

请使用CDN-我个人更喜欢。将以下脚本添加到index.html当我切换回CDN时，私有签名URL和公共URL都在工作。

<!-- 💁 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

模型查看器需要初始化，因此在从数据库检索文件之前，请在逻辑开始时进行初始化。给它传递一个空字符串，这样就可以了。

this.src = ''

或

this.demo_fileURL = ''