I'm attempting to load a gltf model and change the texture on button click using the register component. The model loads and displays as expected, but I'm having trouble reflecting any changes when the button is clicked for the texture change.
Here's my approach:
<div class=" radisi">
<input type='button' class='radmi rad1' value='next' /></div>
<a-entity id="newmod" example gltf-model="src: url(model/straw.glb);"
position="0 1.8 -1" scale="1,1,1"></a-entity>
AFRAME.registerComponent('example', {
init: function() {
var el = this.el;
el.addEventListener('model-loaded', function (e) {
e.detail.model.traverse(function(child) {
if (child instanceof THREE.Mesh){
if (child.material.name == "Craem") {
material.map = new THREE.TextureLoader().load( "assets/img/choco.png" );
}
}
});
})
}
},3000)
Upon registering the component, I'm trying to implement the texture change upon click:
$(".radisi").click(function(){
var el = this.el;
el.addEventListener('model-loaded', function (e) {
e.detail.model.traverse(function(child) {
if (child instanceof THREE.Mesh){
if (child.material.name == "Craem") {
material.map = new THREE.TextureLoader().load( "assets/img/tri.png" );
}
}
});
})
});
An error message stating 'addEventListener of undefined' is displayed. Please advise on where I might be going wrong. Thank you.