Question

同时学习Aframe / Javascript。

尝试编写我自己的组件，在单击时将对象的半径更改为2，但如果对象的半径已经为2，则应将半径减小为1.

我如何引用我试图改变组件半径的球体对象。

由于

这是我的组件逻辑。

AFRAME.registerComponent('change-radius', {

schema: {
    radius: {type: 'int'}
},

init: function(){
    var data = this.data;
    this.el.addEventListener('click',

    function(){     
        if (data.radius === 1) {
            this.setAttribute('radius', data.radius);
            console.log('THIS ONE');
        } else {
            this.setAttribute('radius', 1);
            console.log('NO !!!! THIS ONE');
        }
    })
}
});

这是我的球形代码。

<a-sphere id="sphere" change-radius="radius: 2" change-color="color: #0000FF" color="#F44336" radius="1" position="0 2 -4"></a-sphere>

Answer 1

从组件访问sphere对象是scope的问题。
- 对于附加组件，this.el是球体元素。
- 在this.el.addEventListener();内，this引用了sphere元素，因为侦听器函数范围是this.el。如果在其他地方定义了它，您可以bind它（为了保留this范围），或者从监听器中调用它 - 否则您需要制作let el = this.el引用，以便在您方便的时候访问该元素

当然你可以使用document.querySelector('cssSelector)获取任何对象

<小时/> 我建议做一个布尔开关检查球体是否放大，然后相应地设置半径和布尔值：

init: function(){
  var data = this.data;
  let el = this.el;
  let enlarged = false;
  this.el.addEventListener('click',function(){  
    //BOOL SWITCH
    if(!enlarged){
      data.radius = 2;
    } else {
      data.radius = 1;
    }
    // STATE CHANGE, AND RADIUS CHANGE
    enlarged != enlarged;
    el.setAttribute('radius',data.radius);
    }
  })
}

Imo它比实际的半径检查更好，因为获得布尔状态比检查对象的属性更快。

您可以检查是否data.radius == 1，然后相应地更改半径，可能会更短，但这取决于您

了解组件

1 个答案: