gltf2.0未在ar.js项目中显示

问题描述

我已经创建了一个ar.js试用页面，如下所示：

<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://rawgit.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>


<body style='margin : 0px; overflow: hidden;'>
  <a-scene embedded arjs='sourceType: webcam;'>

<!-- handle marker with hiro preset -->
<a-marker preset='hiro'>
  <a-entity 
  gltf-model-next="src:url(lugia_pokemon/scene.gltf)"
  position="0 0 0"
  scale="1 1 1"></a-entity>
  <!-- <a-image src="corvette_stingray/image.jpg"></a-text> -->
  <!-- <a-text value="Hello" color="red"></a-text> -->
</a-marker>

<!-- <a-marker preset='hiro'></a-marker>
    <a-text value="Hello,this is Enze'a first AR try!" color="red"></a-text>
</a-marker> -->

<!-- add a simple camera -->
<a-entity camera></a-entity>

启动html文件后，它不起作用。 gltf位于html相同目录下的.bin文件夹中。在带有npm http-server的localhost上运行也无法按控制台暗示的方式运行。但是，如果我将实体更改为类似文本或a-Box之类的东西，它将显示。同样，对于一张图片，它只会显示一个没有任何图片的白框。

此外，当我用手机打开手机时，无法获得网络摄像头的许可，但是当打开https://codepen.io/jeromeetienne/pen/mRqqzb时，我的手机Chrome应用会要求获得摄像头的许可，然后才能正常工作。

谢谢你们！

解决方法

尝试从<a-scene embedded arjs='sourceType: webcam; debugUIEnabled: false; trackingMethod: best;' antialias='true' gesture-detector>开始您的场景，这将帮助您使所有内容保持一致。另外，请尝试将资产声明与其使用分开：

<a-assets>
        <a-asset-item id="gltf=model" src="YOUR_SRC"></a-asset-item>
</a-assets>

<a-marker preset='hiro'>
    <a-gltf-model src="#gltf-model" scale="1 1 1" position="0 0 0">
    </a-gltf-model>
</a-marker>

您还可以尝试使用echoAR（完整披露，我参与了此项目）。有一个whole section that build's AR.js for you。您可以完全使用它，也可以只看如何根据到达那里的结果来构建HTML文件。

aframe ar.js

gltf2.0未在ar.js项目中显示

问题描述

解决方法

相关问答