"core:propertyTypes:warn "#bot“找不到资产。” - aframe-master.js

Question

最近开始使用 aframe 和 ar.js 以及 React。到目前为止工作得很好。不幸的是，现在无法加载 gltf 模型。

这是我的场景：

<a-scene
        vr-mode-ui="enabled: false;"
        arjs="debugUIEnabled: false; patternRatio: 0.70"
        device-orientation-permission-ui="enabled: true">

          <a-assets timeout='3000'>
            <a-asset-item id="bot" src="url(/assets/robot_walking/scene.gltf)"></a-asset-item>
          </a-assets>

          <a-marker type="pattern" url="markers/07ratio/fly/pattern-fly.patt" id="m3" registermarker >
            <a-entity
              id="hat"
              gltf-model="#bot"
              animation-mixer
              visible="true"
              scale="0.05 0.05 0.05"
              position="0 0 0"
              rotation="0 0 0">
            </a-entity>
          </a-marker>

          <a-entity camera look-controls id="camera"></a-entity>

      </a-scene>

它在反应组件中呈现。 Aframe 和 Ar.js 已使用 npm 安装。它已经使用

与不同的 gltf 一起工作

gltf-mode="url(/assets/sun_straw_hat/scene.gltf)"

内联。那个模型没有任何动画，也没有那么大。但我也不能在那里使用资产管理器。有人知道我在这里做错了什么吗？到目前为止，我尝试导入 aframe-extras，在 index.html 中导入带有 <script> 标签的 afram 和 ar.js，使用 src 而不是 gltf-model，使用 <a-gltf-model> 和 src，以及改变资产超时。没有任何运气。

亲切的问候奥里斯

Answer 1

我可能简化了很多，但 afaik:

通常，在这样的设置中：

<a-assets>
  <a-asset-item id="model" src="scene.gltf"></a-asset-item>
</a-assets>
<a-entity gltf-model="#model"></a-entity>

gltf-model 组件假定 <a-asset-item> 节点已准备就绪。但是 React 有它自己的 algorithm of when to render which node.

因为gltf-model无法查询#model节点，所以报错：

core:propertyTypes:warn "#bot" asset not found.

我想我们可以：

1) 直接从 url

加载模型

gltf-model="url(path_to_model.gltf)"

哪个应该可以正常工作 (as it is in this remix of your glitch):

2) 尝试在 [gltf-model] 之前渲染 a-assets 节点

可能有更好的方法，但我已经：

将标记+相机放在另一个反应组件中（即<Scene>）

跟踪场景+资产的挂载时间

  class App extends React.Component {

    constructor(props) {
      super(props);
      this.state = {assetsReady: false};
    }
    componentDidMount() {
      this.setState({assetsReady: true});
      // for whatever reason i need to set it manually?
      this.state.assetsReady = true
    }

使用条件渲染<Scene/>挂载时：

<a-scene>
  <a-assets>
     <a-asset-item id="model" 
                   src="https://cdn.glitch.me/fc511399-d148-4898-ad51-f0b6fafd32a6/scene.gltf"></a-asset-item>  
     </a-assets>
   {
       // this is inside Apps render() function
       this.state.assetsReady == true &&
       <Scene />
   }            
</a-scene>

在 this remix of your glitch 中查看它似乎也有效：

模型因缩放而出现故障（将模型缩放 30 - 50 倍）- 一个简单的解决方案是使用 logarithmic depth buffer:

<a-scene renderer="logarithmicDepthBuffer: true"></a-scene>

"core:propertyTypes:warn "#bot“找不到资产。” - aframe-master.js

"core:propertyTypes:warn "#bot" asset not found. " - aframe-master.js

reactjs

aframe

ar.js