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

Я пытаюсь добавить свои собственные 3D-модели GLB в общий код Google Viewer Viewer. Однако, когда я заменяю ссылку на модель стула загруженной моделью 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 на местоположение загруженной модели (которая находится в той же папке, что и индексный код)

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

Источник

4 ответа

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

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-файл, который хотите открыть.

Источник

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

  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>

Источник

Этот «Hello, World» работает:

  • Поместите файл с именем astronaut.html (ниже) в папку
  • Поместите файл с именем 3d_web_server.py (ниже) в ту же папку.
  • Загрузите NeilArmstrong.glb с Github и поместите его в папку с именем «модели» внутри той же папки, что и выше.
  • Запустите «python 3d_web_server.py» в терминале.
  • Перейдите по адресу http://127.0.0.1:5000/astronaut.html.

Вот astronaut.html:

          <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
    </head>
    
    <body>
      <div class="container">
        <model-viewer id="pan-demo" auto-rotate camera-controls oncontextmenu="return false;" src="./models/NeilArmstrong.glb" alt="Neil Armstrong's Spacesuit from the Smithsonian Digitization Programs Office and National Air and Space Museum"></model-viewer>
      </div>
    </body>
    </html>

Теперь подайте через Python Flask следующее:

          from flask import Flask, request, send_from_directory, send_file
    
    # set the project root directory as the static folder, you can set others.
    app = Flask(__name__, static_url_path='')
    
    @app.route('/models/<path:path>')
    def send_model(path):
        return send_from_directory('models', path)
    
    @app.route('/astronaut.html')
    def send_index():
        return send_file('astronaut.html')
    
    if __name__ == "__main__":
        app.run()
Источник

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

Источник
Другие вопросы по тегам