Google模型查看器没有显示输出

发布于 2025-01-28 13:01:53 字数 1658 浏览 4 评论 0 原文

因此，我使用Google的模型查看器显示GLB文件。但这似乎正在抛出这些错误：

>Access to fetch at 'file:///C:/Users/User/Desktop/Untitled.glb' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

>Failed to load resource: net::ERR_FAILED

>model-viewer.js:50001 TypeError: Failed to fetch
    at co.load (model-viewer.js:36818:3)
    at Mh.load (model-viewer.js:44762:10)
    at model-viewer.js:49881:16
    at new Promise (<anonymous>)
    at model-viewer.js:49880:12
    at Jc.preload (model-viewer.js:49988:34)
    at Jc.load (model-viewer.js:50018:20)
    at n (model-viewer.js:51575:73)
    at new Promise (<anonymous>)
    at Bu.setSource (model-viewer.js:51572:26)
(anonymous) @ model-viewer.js:50001

我的代码＆gt;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
</head>
<body>
    

<!-- Use it like any other HTML element -->
<model-viewer style = "width:1050px;height:1050px;" src="Untitled.glb"  camera-controls ></model-viewer>
</body>
</html>

我从此网站获得了代码模型查看器

原文

So, I used Google's Model Viewer for displaying GLB files. But it seems to be throwing these errors:

>Access to fetch at 'file:///C:/Users/User/Desktop/Untitled.glb' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

>Failed to load resource: net::ERR_FAILED

>model-viewer.js:50001 TypeError: Failed to fetch
    at co.load (model-viewer.js:36818:3)
    at Mh.load (model-viewer.js:44762:10)
    at model-viewer.js:49881:16
    at new Promise (<anonymous>)
    at model-viewer.js:49880:12
    at Jc.preload (model-viewer.js:49988:34)
    at Jc.load (model-viewer.js:50018:20)
    at n (model-viewer.js:51575:73)
    at new Promise (<anonymous>)
    at Bu.setSource (model-viewer.js:51572:26)
(anonymous) @ model-viewer.js:50001

My code >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
</head>
<body>
    

<!-- Use it like any other HTML element -->
<model-viewer style = "width:1050px;height:1050px;" src="Untitled.glb"  camera-controls ></model-viewer>
</body>
</html>

And I got the code from this website Model Viewer

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

萌化 2025-02-04 13:01:53

不允许从 file：// 直接加载cdn [reference] 。您可以使用 glitch 他们的文件系统与您通常使用的文件系统相似，而且它提供了免费的在线托管和自动保存选项。这是 model-viewer示例在glitch上。

回复收藏 0 原文

怀里藏娇 2025-02-04 13:01:53

解决该问题的简单方法是将GLB文件转换为dataUri，然后像这样加载：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
</head>
<body>
    

<!-- Use it like any other HTML element -->
<model-viewer style = "width:1050px;height:1050px;" id = "glb" crossorigin="anonymous" camera-controls ></model-viewer>
<script>
    document.getElementById('glb').src= "/*--DATA URI HERE--*/"
</script>
</body>
</html>

Simple way to solve it is by converting the glb file to a DataURI and then loading it like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
</head>
<body>
    

<!-- Use it like any other HTML element -->
<model-viewer style = "width:1050px;height:1050px;" id = "glb" crossorigin="anonymous" camera-controls ></model-viewer>
<script>
    document.getElementById('glb').src= "/*--DATA URI HERE--*/"
</script>
</body>
</html>