A框架和编码新手，尝试加载.gtlf模型但无法工作

Question

A帧和编码新手，尝试在标记上显示3d扫描对象。我将.gtlf上传到我的资产文件夹，但在我的Galaxy s9+上查看Hiro标记时无法加载

我添加了(scale="0.2 0.2 0.2")，但这不起作用。

已使用http://github.khronos.org/glTF-Validator/确保我的.gtlf有效。

已尝试.gtlf和.glb，以确定这是否是问题所在，但两者均未加载。

<!DOCTYPE html>
<html>
  <head>
    <title>Pizza test hoho</title>
    <meta name="description" content="Let's hope this work!">
    <link id="favicon" rel="icon" href="https://glitch.com/edit/favicon-app.ico" type="image/x-icon">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
    <!--     Save commit version of aframe-arjs before the rewrite around August 8, 2017 -->
    <script src="https://cdn.rawgit.com/jeromeetienne/AR.js/ec578832d908e3b33bb1da9c649543e151395c21/aframe/build/aframe-ar.min.js"></script>
    <script>THREEx.ArToolkitContext.baseURL = 'https://rawgit.com/jeromeetienne/ar.js/master/three.js/'</script>
    <script src="./js/index.js"></script>
    <style>
      .note {
        position: absolute;
                     top: 1%;
                     left: 1%;
                     color: black;
                     text-shadow:
                     -1px -1px 0 #BBB,
                     1px -1px 0 #BBB,
                     -1px 1px 0 #BBB,
                     1px 1px 0 #BBB;
      }
      a-scene {
        pointer-events: none;
      }
    </style>
  </head>
  <body>
    <div class="note" style="position: absolute;
                     top: 1%;
                     left: 1%;
                     color: black;
                     text-shadow:
                     -1px -1px 0 #BBB,
                     1px -1px 0 #BBB,
                     -1px 1px 0 #BBB,
                     1px 1px 0 #BBB;">
      You'll need to have <a href="https://jeromeetienne.github.io/AR.js/data/images/HIRO.jpg">this image</a> printed or just displaying on your phone!
    </div>
    <a-scene artoolkit="sourceType: webcam;" embedded="embedded">

        <a-marker-camera preset="hiro">

            <a-entity gltf-model="https://cdn.glitch.com/168b6551-08b1-4c03-b4ae-f1f4ca3e8031%2FPizza.glb?1557619896347" scale="0.2 0.2 0.2"></a-entity>

        </a-marker-camera>
    </a-scene>

  </body>
</html>

Answer 1

这里有几个问题：

1)框架版本

• aframe 0.6.0我相信使用的是gtlf 1.0。切换到0.9.2。

在docs中:文档中的https://aframe.io/releases/0.9.1/aframe.min.js

• ar.js也有一个不同的链接(这可能不太相关)

https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.2/aframe/build/aframe-ar.js：Docs

2)模型(至少是.glb文件)有63兆字节。考虑到你是为手机制作的，在wifi上只需要几秒钟，但我不指望任何人会加载一个如此大的文件作为网站资产。

这可能是我的观点，但模型越复杂，它在手机上表现正常的可能性就越小。

在this glitch上，你可以在我的电脑和andoid firefox上试用过。