0

我开始在我的 Angular 项目中使用 google 的 ModelViewer 1.9.2 来渲染 3d 模型。目前可能进行表面检测以增强对象。最初我在应用程序资产中使用 3d 模型来增强，效果很好，我能够增强。现在我想从 s3 存储桶中获取文件并将 url 传递给模型查看器。这就是我卡住的地方。公共 URL 和私有签名 URL 都不允许我增加 3d 对象

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

这是我的 component.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 访问问题。我正在使用的设备是支持 Android ARCore 的设备。当我从本地应用程序资产传递相同的文件时，我可以看到“在 AR 中查看”按钮，因此我确信附加到 Angular 应用程序的模型查看器插件没有任何问题。

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

4

2 回答 2

0

Model-Viewer 需要初始化，所以在从数据库中检索文件之前的逻辑开始。将一个空字符串传递给它，这应该可以解决问题。

this.src = ''

或者

this.demo_fileURL = ''
于 2022-01-02T22:19:14.677 回答
0

问题可能是因为模型查看器通过 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>

于 2021-12-07T07:57:41.933 回答