Когда я добавляю свои собственные 3D-модели в тег ‹model-viewer› в html для программы просмотра сцен, модели не загружаются

Я пытаюсь добавить свои собственные 3D-модели GLB в общий код программы просмотра сцен Google. Однако, когда я заменяю ссылку на модель кресла загруженной моделью GLB, модель не отображается на веб-странице.

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

Это код, с которым я работаю:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>3DModel</title>
    <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js"></script>
    <script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
</head>
<body>
    <model-viewer src="chair.glb" auto-rotate camera-controls alt="cube" background-color="#455A64"></model-viewer>
</body>
</html>

Все, что я изменил, - это src из ссылки на Chair.glb на местоположение загруженной модели (которая находится в той же папке, что и индексный код).

Как я могу это исправить?


localhost html webserver model-viewer
person Gabrielle Branche    schedule 29.07.2019    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Если вы посмотрите на консоль, вы, вероятно, заметите такую ​​ошибку:

model-viewer.js: 36006 Доступ к XMLHttpRequest в 'file: ///chair.glb' из источника 'null' был заблокирован политикой CORS: запросы с перекрестным происхождением поддерживаются только для схем протоколов: http, data, chrome, chrome -расширение, https.

Это означает, что браузер блокирует доступ к файлу Chair.glb, поскольку он обслуживается по протоколу file: ///.

Чтобы обойти, вы можете либо загрузить html- и .glb-файл на «настоящий» веб-сервер в Интернете, либо запустить простой веб-сервер на своем компьютере и просмотреть файл там.

Для быстрых результатов я бы порекомендовал веб-сервер Mongoose.

Получите двоичный файл для своей платформы по адресу https://cesanta.com/binary.html и запустите его внутри папка, в которой находятся ваши файлы html и glb. Откроется окно браузера, в котором вы можете выбрать HTML-файл, который хотите открыть.

person obscure    schedule 29.07.2019

arrow_upward
1
arrow_downward

Насколько я могу вам помочь, это:

  1. Укажите правильный путь модели.
  2. Моя модель хранится в папке моделей, которая находится внутри папки общих ресурсов (используйте ./chair.glb)
  3. Попробуйте указать относительный путь.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>3DModel</title>
    <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js"></script>
    <script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
</head>
<body>
    <model-viewer src="./shared-assets/models/cube.gltf" auto-rotate camera-controls alt="cube" background-color="#455A64"></model-viewer>
</body>
</html>

person Kunal Luthade    schedule 13.10.2020

arrow_upward
0
arrow_downward 

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>model-viewer</title>
    <script
      type="module"
      src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"
    ></script>
  </head>
  <body>
    <div>
      <model-viewer
   src="https://rawcdn.githack.com/BabylonJS/Exporters/422493778d6ffbc2980e83e46eb94729bbeada0c/Maya/Samples/glTF%202.0/T-Rex/trex_running.gltf"
        alt="dragon"
        auto-rotate
        camera-controls
      ></model-viewer>
    </div>
    </body>
</html>

Вот мой пример в этой модели загружается, вы можете это проверить.

person Iron Man    schedule 12.04.2021