无法在网络框架中设置动态房间名称

Question

我有两个 a-text 都指向同一个 html

<a-text navigate="url: http://../room.html" color="green" position="0 2 0" value="Room 1"></a-text>
<a-text navigate="url: http://../room.html" color="green" position="0 2 0" value="Room 2"></a-text>

navigate 是一个注册组件，它有助于在点击文本实体时重定向到不同的 url

AFRAME.registerComponent("navigate-on-click", {
  schema: {
    url: { default: "" },
  },

  init: function () {
    var data = this.data;
    var el = this.el;

    el.addEventListener("click", function () {
      window.location.href = data.url;
      });
  },
});

但我想使用与房间 1 和房间 2 不同的房间名称的相同 html，因此用户点击不同的文本会进入具有相同 html 文件的不同房间

<a-scene
    networked-scene="
    room: room;
    debug: true;
    adapter: wseasyrtc;
    serverURL:http://....com/;
  "> 

这里的房间名称被硬编码为房间，但我想让它动态化

Answer 1

像这样为动态房间创建一个组件

AFRAME.registerComponent('dynamic-room', {
  init: function () {
    var el = this.el;
    var params = this.getUrlParams();

    if (!params.room) {
      window.alert('Please add a room name in the URL, eg. ?room=myroom');
    }

    var isMultiuser = params.hasOwnProperty('room');
    var webrtc = params.hasOwnProperty('webrtc');
    var adapter = webrtc ? 'easyrtc' : 'wseasyrtc';
    var voice = params.hasOwnProperty('voice');
    
    var networkedComp = {
      room: params.room,
      adapter: adapter,
      audio: voice
    };
    console.info('Init networked-aframe with settings:', networkedComp);
    el.setAttribute('networked-scene', networkedComp);
  },

  getUrlParams: function () {
    var match;
    var pl = /\+/g;  // Regex for replacing addition symbol with a space
    var search = /([^&=]+)=?([^&]*)/g;
    var decode = function (s) { return decodeURIComponent(s.replace(pl, ' ')); };
    var query = window.location.search.substring(1);
    var urlParams = {};

    match = search.exec(query);
    while (match) {
      urlParams[decode(match[1])] = decode(match[2]);
      match = search.exec(query);
    }
    return urlParams;
  }
});

并在 a-scene 中添加组件 dynamic-room