Search code examples
reactjsaframear.js

"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

Solution

  • 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):

    enter image description here

    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:

    enter image description here

    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>