A-Frame单脚本控制多元素问题：点击视频球体后其他球体未隐藏

你的代码存在两个关键问题导致第四个操作失效：

1. 组件方法结构错误：playAndExpand方法被错误嵌套在init函数内部，导致点击事件无法正确绑定到该方法。
2. 未定义hideElements函数：你调用了一个不存在的函数，自然无法执行隐藏其他球体的逻辑。

修正后的完整代码 #

AFRAME.registerComponent('play-and-expand', {
  init: function () {
    // 绑定点击事件到组件方法
    this.el.addEventListener('click', this.playAndExpand.bind(this));
  },

  playAndExpand: function () {
    const videoId = this.el.getAttribute('src');
    const video = document.querySelector(videoId);
    const clickedSphereId = this.el.getAttribute('id');

    if (video) {
      // 1. 播放视频纹理
      video.play();
      // 2. 设置当前球体半径为4200
      this.el.setAttribute('radius', '4200');
      // 3. 隐藏所有homeworld类元素
      const homeworldElements = document.querySelectorAll('.homeworld');
      homeworldElements.forEach(element => {
        element.setAttribute('visible', false);
      });
    }

    // 4. 隐藏另外两个球体
    const sphereIds = ['sphere1', 'sphere2', 'sphere3'];
    sphereIds.forEach(id => {
      if (id !== clickedSphereId) {
        const sphere = document.getElementById(id);
        if (sphere) {
          sphere.setAttribute('visible', false);
        }
      }
    });
  }
});

关键修正点说明 #

• 修复组件结构：将playAndExpand移到组件的顶级方法层级，确保init函数正确闭合，点击事件能正常触发该方法。
• 替换hideElements逻辑：直接通过遍历球体ID列表，判断并隐藏非当前点击的球体，避免依赖未定义的函数，逻辑更直观。
• 健壮性优化：增加了对元素是否存在的判断（if (sphere)），避免因ID错误导致的控制台报错。

额外注意事项 #

• 确保你的videosphere元素确实设置了正确的id属性（sphere1/sphere2/sphere3）。
• 检查src属性的值是否是正确的视频元素选择器（比如#my-video，需要带#前缀）。

内容的提问来源于stack exchange，提问作者Not a newt