javascript - 无法在 Aframe 中单击按钮时更改纹理

Question

我正在尝试使用寄存器组件加载 gltf 模型来更改按钮单击时的纹理。现在我可以按预期加载并显示模型。但是，当单击按钮进行纹理更改时，我无法反射(reflect)任何更改。

这是我尝试过的

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

注册组件后，我尝试访问单击时的纹理变化

$(".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" );
                           }
                        }
                    });
                 })
});

它说addEventListener未定义。请让我知道我错过了什么。谢谢。

Answer 1

您注册了一个组件来等待模型加载并更改 Material 。

然后，您有一个点击监听器，它再次等待模型加载，此时模型可能已经加载。并且您无法在 jQuery 支持的点击监听器中执行 this.el 。 this.el 由 A-Frame 组件提供。

将点击监听器移至组件中，并从点击监听器中删除模型加载监听器。