0

3D モデルをレンダリングするために、Angular プロジェクトで Google の ModelViewer 1.9.2 を使い始めました。今のところオブジェクトを増強するための表面検出の可能性があります。最初は、アプリケーション アセット内の 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 は初期化する必要があるため、DB からファイルを取得する前にロジックの開始時に行います。空の文字列を渡すと、うまくいくはずです。

this.src = ''

また

this.demo_fileURL = ''
于 2022-01-02T22:19:14.677 に答える