Modelviewer не загружает локальный файл "Не разрешено загружать локальный ресурс"

#javascript #html #vue.js #model-viewer

Вопрос:

Я использую Google ModelViewer для веб-проекта.

У меня есть vue.js проект и у меня есть компонент, который загружает модель с <model-viewer> атрибутом. Я пытаюсь установить src атрибут средства просмотра моделей в абсолютный путь к модели .glb в папке моего проекта. (Примечание: я должен использовать абсолютный путь, иначе он не загрузится и не отобразит никаких ошибок).

Это html — код в компоненте vue:

 <model-viewer
  src="*path-to-project*/src/assets/models/Astronaut.glb"
  alt="A 3D model of an astronaut"
  ar
  ar-modes="webxr scene-viewer quick-look"
  ar-placement="floor"
  environment-image="neutral"
  auto-rotate
  camera-controls
></model-viewer>

Модель не загружается на веб-страницу, и в консоли отображается следующая ошибка:

Не разрешено загружать локальный ресурс: файл:///путь к проекту/src/активы/модели/Astronaut.glb

Загрузка с URL-адреса, указанного в примере официального сайта, работает нормально. Я уверен, что можно загрузить локальный файл и отобразить его в ModelViewer, верно?.

Любая помощь будет очень признательна.

Ответ №1:

@/assets/models/Astronaut.glb если у вас есть это в src папке

Но для статических ресурсов лучше поместить его в public папку, например public/models/Astronaut.glb , а затем в вашем компоненте назвать его просто /models/Astronaut.glb