Блог

Я начал использовать ModelViewer 1.9.2 от Google в своем проекте angular для визуализации 3d-модели. Возможно, обнаружение поверхности для увеличения объектов на данный момент. Первоначально я использовал 3d-модели внутри ресурсов приложения для расширения, что прошло нормально, и я могу дополнять. Теперь я хочу извлечь файл из корзины s3 и передать URL-адрес в средство просмотра моделей. Вот где я застрял. Ни общедоступный URL-адрес, ни Закрытый подписанный URL-адрес не позволяют мне увеличить 3d-объект

это мое component.html

 lt;section class="py-5"gt;  lt;div class="container-fluid"gt;  lt;div class="row"gt;  lt;div class="col-lg-6"gt;  lt;div class=""gt;  lt;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"gt;  lt;/model-viewergt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt; lt;/sectiongt; 

это мой файл 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-адрес, чтобы я мог передать его в средство просмотра моделей

Я включил политику CORS для обоих сегментов s3(публичного и частного). Вот политика CORS, которую я применил

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

В обоих случаях я могу видеть средство просмотра модели — предварительный просмотр модели. но кнопка «Просмотр в AR» не включается. У меня нет проблем с доступом к CORS. Устройство, которое я использую, является устройством с поддержкой Android ARCore. Когда я передаю один и тот же файл из ресурсов локального приложения, я вижу кнопку «Просмотр в AR», поэтому я уверен, что с плагином просмотра моделей, подключенным к приложению angular, все в порядке.

Проблема возникает, когда я передаю общедоступный или подписанный URL-адрес в средство просмотра моделей. Предложите мне, если я что-то упускаю в процессе.

Проблема может быть связана с доступом к просмотрщику моделей через NPM.

Пожалуйста, используйте CDN — я лично предпочитаю. Добавьте приведенный ниже скрипт в свой index.html Как частный подписанный URL-адрес, так и общедоступный URL-адрес работают, когда я снова переключился на CDN.

 lt;!-- 💁 Include both scripts below to support all browsers! --gt;   lt;!-- Loads lt;model-viewergt; for modern browsers: --gt;  lt;script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"gt;lt;/scriptgt;  lt;!-- Loads lt;model-viewergt; for old browsers like IE11: --gt;  lt;script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"gt;lt;/scriptgt; 

Средство просмотра моделей необходимо инициализировать, поэтому в самом начале вашей логики, прежде чем извлекать файл из БД. передайте ему пустую строку, это должно сработать.

this.src = » или this.demo_fileURL = «.