Is there a way to set a 'gltf-model' or 'obj-model' in A-Frame during runtime by using a selector in the schema?

Question

I'm making an A-Frame project in which I have to set a 3D object to an entity during runtime based on user input. Is there a way to use selector types to set it?

Example:

AFRAME.registerComponent('model',{
schema:{
   ext: {type: 'string', default:'gltf'},
   scene:{type: 'selector'},
   material:{type: 'selector'},
   scale:{type: 'string', default: '1 1 1'}
},
init: function (){
   var el = this.el;
   var data = this.data;
   if(data.ext == 'obj')
   {
     el.setAttribute('obj-model','obj',data.scene);
     el.setAttribute('obj-model','mtl',data.material);
   }
   else
     el.setAttribute('gltf-model',data.scene);
   el.setAttribute('scale',data.scale);
   console.log(this.el.toString() + ': Model component registered successfully!');
   }
});

By setting it using the element ID it doesn't work, but if I input the ID manually in the HTML document it works perfectly.

If you share a full runnable example it will be easier to help. Glitch is great https://glitch.com/~aframe — Diego Marcos, Sep 20 '20 at 01:52
For sure! I created a simple Glitch example to show the component. Here's the link to it: https://glitch.com/~model-component-example — Gabriel Navarro, Sep 21 '20 at 04:21

score 0 · Accepted Answer · answered Sep 22 '20 at 18:06

The gltf-model and the obj-model components don't take DOM elements but URLs or selectors. Pass the selector right into the model

AFRAME.registerComponent('model',{
 schema:{
  ext: {type: 'string', default:'gltf'},
  scene:{type: 'string' },
  material:{type: 'string'},
  scale:{type: 'string', default: '1 1 1'}
}

Corrected glitch

Is there a way to set a 'gltf-model' or 'obj-model' in A-Frame during runtime by using a selector in the schema?

1 Answers1