代码之家 › 专栏 › 技术社区 › ajai.s

在网络相框中设置动态房间名称时出现故障

aframe-networked aframe three.js

2

ajai.s · 技术社区 · 3 年前

我有两个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>

navigation是一个注册组件,它有助于在单击文本实体时重定向到不同的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/;
  ">

这里的房间名称被硬编码为房间,但我想使其动态

0 回复 | 直到 3 年前

1

0

ajai.s 3 年前

为动态房间创建一个组件,如下所示

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-苯中添加组分 dynamic-room