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

Started recently using aframe and ar.js with react. Worked like a charm so far. Unfortunately now a gltf model wont load.

Here is my scene:

<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>

It is rendered inside a react component. Aframe and Ar.js have been installed using npm. It already worked with a different gltf using

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

inline. That model didn't have any animations and was not as large. But I couldn't use the asset manager there either. Does someone know what I am doing wrong here? So far I tried importing aframe-extras, importing afram and ar.js with <script> tags in the index.html, using src instead of gltf-model, using <a-gltf-model> with src, and varying the asset timeout. No luck with any of that.

kind regards Orys

I may be simplifing much, but afaik:

---

Typically, in a setup like this:

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

the gltf-model component assumes that the <a-asset-item> node is ready. But react has it's own algorithm of when to render which node.

Because the gltf-model can't query the #model node, you get the error:

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

I suppose we can either:

1) load the model directly from an url

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

which should be working properly (as it is in this remix of your glitch):

2) try to render the a-assets node before the [gltf-model] one

There probably are better ways, but I've:

1. put the marker + camera in another react component (i.e. <Scene>)

2. keep track of the when the scene + assets are mounted

     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
       }
   

3. use a conditional to render the <Scene/>when mounted:

   <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> 
   

check it out in this remix of your glitch which also seems to be working:

---

The model is glitching because of the scale (scale the model 30 - 50 times) - a simple solution is using a logarithmic depth buffer:

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