当我将自己的3D模型添加到用于场景查看器的html中的<model- viewer >标记时，模型不会加载
我正在尝试将我自己的3D GLB模型添加到google场景查看器通用代码中。然而，当我用下载的GLB模型替换椅子模型的链接时，该模型不会显示在网页上。
我已经使用了我自己下载的模型。我还尝试通过下载通用代码来使用相同的椅子。我看了看检查器，当占位符出现时，空间似乎是空的，alt文本也没有显示
这是我正在使用的代码：
<!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
Stack Overflow用户
发布于 2019-07-30 04:19:53
如果您查看一下控制台，您可能会发现如下错误：
CORS策略已阻止从源'file:///chair.glb‘’访问位于‘
’的XMLHttpRequest :仅以下协议方案支持跨域请求: http、data、chrome、chrome-extension、https。
这意味着浏览器锁定了对chair.glb文件的访问，因为它是通过file:///协议提供的。
要解决这个问题，你可以将html和.glb文件上传到一个真正的在线网络服务器上，或者在你的电脑上运行一个简单的网络服务器并在那里预览文件。
为了快速见效，我推荐使用Mongoose Webserver
从https://cesanta.com/binary.html获取适用于您的平台的二进制文件，并在您的html & glb文件所在的文件夹中启动它。这将打开一个浏览器窗口，您可以在其中选择要打开的html文件。
Stack Overflow用户
发布于 2020-10-13 18:15:02
我能帮到你的就是：
- 指定模型的正确路径。
- 我的模型存储在共享资产文件夹内的models文件夹中。(使用
<!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>
Stack Overflow用户
发布于 2021-04-12 18:40:15
<!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>
这是我在这个模型中的例子，你可以检查一下。
https://stackoverflow.com/questions/57258326
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号