Question

我想使用aframe在javaScript中调用两个函数。这是我的代码

AFRAME.registerComponent('house-hold', {
schema: {
    type: 'selectorAll',
    default: null
  },
init: function () {
    this.entities = [];

    if ( this.data === null ) {
      this.entities.push(this.el);
    } else {
      this.entities = this.data;
    }
   this.toggleHandler = this.toggleVisibility.bind(this);
},

play: function() {
  this.el.addEventListener('click', this.toggleHandler);
},

pause: function() {
    this.el.removeEventListener('click', this.toggleHandler);
},
hide: function(entities){
var entities = this.entities;
var cursor = this.el.sceneEl.querySelector('[cursor]');
for (var i = 0; i < entities.length; i++) {

        entities[i].object3D.visible = false;

        entities[i].pause();

        entities[i].classList.remove('clickable');
        entities[i].classList.add('clickable-disabled');
        cursor.components.raycaster.refreshObjects();

      } 
 },
 show: function(entities){
var entities = this.entities;
var cursor = this.el.sceneEl.querySelector('[cursor]');
for (var i = 0; i < entities.length; i++) {

        entities[i].object3D.visible = true;

        entities[i].play();

        entities[i].classList.remove('clickable-disabled');
        entities[i].classList.add('clickable');
        cursor.components.raycaster.refreshObjects();

      }
 },
toggleVisibility: function(e) {   
  var categoryScene = document.querySelectorAll('#category-scene');
  var houseHoldCareScene = document.querySelectorAll('#house-hold-scene');
  var personalCareScene = document.querySelectorAll('#personal-care-scene');
  var toasterScene = document.querySelectorAll('#toaster-scene');
  var cursor = this.el.sceneEl.querySelector('[cursor]');
  show(houseHoldCareScene);
  hide(categoryScene);
  hide(personalCareScene);
  hide(toasterScene);
   }
  });

这是我的代码。我叫了隐藏和显示功能。但它没有用。点击也没有用。我认为我的调用方法不正确。当我点击它应该工作，但它没有。我怎么称这两个功能正常？如何解决这个问题？

光标我这样做了

<a-camera position="2 -2.5 12">

  <!-- Only make entities with class="clickable" clickable. -->
  <a-cursor raycaster="objects: .clickable" 
            fuse-timeout="2000"
            material="color: #F4D03F; shader: flat" 
            opacity="0.9">

    <!-- CLICK & FUSE ANIMATIONS -->
    <a-animation begin="click" easing="ease-in" attribute="scale" dur="150" fill="forwards" from="0.1 0.1 0.1" to="1 1 1"></a-animation>
    <a-animation begin="cursor-fusing" easing="ease-in" attribute="scale" dur="1500" fill="backwards" from="1 1 1" to="0.1 0.1 0.1"></a-animation>

  </a-cursor>

</a-camera>

Answer 1

您必须使用this指针调用函数，因为它们是组件的方法，而不是全局函数声明：

this.show(houseHoldCareScene);
this.hide(categoryScene);
this.hide(personalCareScene);

Answer 2

首先，调用组件中定义的函数需要有init关键字，因为它们封装在组件中，而不是全局（如D.Marcos在他的anwser中所说）。

其次，如果您希望它立即发挥作用，您需要在init: function() { // your current code (...) this.toggleHandler = this.toggleVisibility.bind(this); this.el.addEventListener('click', this.toggleHandler); }上设置您的事件监听器：

{{1}}

据我所知，在进入/退出检查员时会调用播放和暂停功能。

单击并使用A-Frame调用javaScript函数

2 个答案: