时间戳

首页 > 解决方案 > 当我将自己的 3D 模型添加到用于场景查看器的 html 中的标签，模型不加载

html - 当我将自己的 3D 模型添加到用于场景查看器的 html 中的标签，模型不加载

问题描述

我正在尝试将我自己的 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 的链接到下载模型的位置（与索引代码位于同一文件夹中）

我怎样才能解决这个问题？

标签： htmllocalhostwebservermodel-viewer

解决方案

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

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 文件。

推荐阅读