3

我正在尝试将我自己的 3D GLB 模型添加到谷歌场景查看器通用代码中。但是，当我用下载的 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

4 回答 4

3

如果您查看控制台，您可能会发现如下错误：

model-viewer.js:36006 从源“null”访问“file:///chair.glb”处的 XMLHttpRequest 已被 CORS 策略阻止：跨源请求仅支持协议方案：http、data、chrome、chrome -扩展，https。

这意味着浏览器锁定对 chair.glb 文件的访问，因为它是通过 file:/// 协议提供的。

为了解决这个问题，您可以将 html 和 .glb 文件上传到在线“真实”网络服务器，或者您在计算机上运行一个简单的网络服务器并在那里预览文件。

为了快速获得结果，我推荐Mongoose Webserver

在https://cesanta.com/binary.html为您的平台获取二进制文件，然后在您的 html 和 glb 文件所在的文件夹中启动它。这将打开一个浏览器窗口，您可以在其中选择要打开的 html 文件。

于 2019-07-29T20:19:53.057 回答
1

据我所知，您可以：

  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>

于 2020-10-13T10:15:01.837 回答
0

这个“你好，世界”有效：

  • 将一个名为 astronaut.html（如下）的文件放在一个文件夹中
  • 将一个名为 3d_web_server.py（如下）的文件放在同一文件夹中
  • 从 Github下载NeilArmstrong.glb并将其放在名为“models”的文件夹中，在上面的同一文件夹中
  • 在终端中运行“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()
于 2022-01-16T22:06:16.013 回答
0 

<!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>

这是我在此模型中的示例正在加载，您可以检查一下。

于 2021-04-12T10:40:14.923 回答