我正在尝试使用一个简单的盒子对象构建model-viewer的演示。它在iOS/Safari上运行良好，但我无法在Android上运行。在Android上，它不会激活相机，只是在空白处显示模型，模型可以四处移动。我尝试使用多个模型，包括我从互联网上提取的模型，这些模型正在工作演示中。这是完整的网页
<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">
<link rel="stylesheet" href="styles.css">
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.1.3/webcomponents-loader.js"></script>
<script src="https://unpkg.com/intersection-observer@0.5.1/intersection-observer.js"></script>
<script src="https://unpkg.com/resize-observer-polyfill@1.5.0/dist/ResizeObserver.js"></script>
<script src="https://unpkg.com/fullscreen-polyfill@1.0.2/dist/fullscreen.polyfill.js"></script>
<script src="https://unpkg.com/@magicleap/prismatic/prismatic.min.js"></script>
<script src="https://unpkg.com/focus-visible@5.0.2/dist/focus-visible.js" defer></script>
<title>Model Viewer Demo</title>
</head>
<body>
<h1>WebAR Demo</h1>
<p>A Basic demo of WebAR using Google's model-viewer component.</p>
<div id="card">
<model-viewer alt="its just a box"
src="assets/BoxTest.glb"
ios-src="assets/BoxTest.usdz"
background-color="#afe"
shadow-intensity="1"
camera-controls
interaction-prompt="auto"
ar
quick-look-browsers="safari chrome">
</model-viewer>
</div>
<script type="module" src="https://unpkg.com/@google/model-viewer@v0.6.2/dist/model-viewer.js">
</script>
<script nomodule src="https://unpkg.com/@google/model-viewer@v0.6.2/dist/model-viewer-legacy.js">
</script>
</body>
</html>
我完全不知道为什么它不起作用以及我接下来需要尝试什么。
事实证明，我正在使用simpleHTTPServer来提供它，并且由于某种原因它是问题的原因。我假设它不支持 gltf 文件的 MIME 类型。