networked-aframe 为新用户分配不同的位置答案

【问题标题】：networked-aframe assign different position to new usernetworked-aframe 为新用户分配不同的位置
【发布时间】：2017-07-05 10:19:25
【问题描述】：

我使用 networked-aframe 设置的多人 A-Frame 环境存在问题。

我希望连接的前三个用户具有不同的生成位置，并且任何其他用户都生成在第三个位置，但我无法让它工作。这是我目前在 Html 中的内容：

 <a-entity id="player" 
networked="template:#avatar-template;showLocalTemplate:true;" 
camera 
positioner=""
wasd-controls 
look-controls>
<a-cursor></a-cursor>  
</a-entity>

这里是它的 JS 组件：

AFRAME.registerComponent('positioner', {
init: function() {

        var el = this.el,
            counter = 0;

        if (counter == 0) {
            el.setAttribute('position', {x:-16,  y:6,  z:-10});
            counter++;
        }
        else if(counter == 1) {
            el.setAttribute('position', {x:-10,  y:6,  z:-10});
            counter++;
        }
        else {
            el.setAttribute('position', {x:-5,  y:6,  z:-10});
            counter++;
        }
}
});

我发现我必须像这样同步其他组件：

var avatarSchema = {
template: '#avatar-template',
components: [
'positioner',
'position',
'rotation',
'scale',
{
  selector: '.head',
  component: 'material'
},
{
  selector: '.hairs',
  component: 'show-child'
}


]
};
       NAF.schemas.add(avatarSchema);

这是一个大项目，所以有很多代码。如果您需要其他任何东西，例如场景设置或头像设置，请告诉我，我会添加。

【问题讨论】：

imo 定位器将为每个玩家触发一次，因此计数器将始终为 0。您知道如何获取玩家列表吗？您可以根据加入时所在的玩家更改位置
这听起来很合理。不，我不知道如何获取玩家列表，我该怎么做？
这就是我问的原因，我不知道：D 甚至把它放在问题中：github.com/haydenjameslee/networked-aframe/issues/19。如果我得到任何回应，我会告诉你。如果您找到方法，请将其发布为 anwser
啊，我明白了：D 好的，会的，谢谢！
我想我得到了一些东西

标签： javascript multiplayer aframe

【解决方案1】：

我有一个解决方法，因为我不完全了解该组件的工作原理。
我发现在参考NAF.entities.entities下有一个玩家列表@
我制作了一个附加到场景的组件：

AFRAME.registerComponent('foo',{
  init:function(){
    setTimeout(function(){   
      console.log(Object.keys(NAF.entities.entities));
      console.log(Object.keys(NAF.entities.entities)[0]);
      console.log(Object.keys(NAF.entities.entities).length);
    },5000);
  }
});

第一个日志给了我一个玩家 ID 的数组。
第二个给出第一个元素的 id。
最后一个给了我玩家的数量。

您可以检查加载的玩家数量，并根据加载的玩家设置他的位置属性。

if(NAF.. == 1) this.el.setAttribute('position',firstPos);
if(NAF.. == 2) this.el.setAttribute('position',secondPos);
if(NAF.. > 2) this.el.setAttribute('position',third);

此处出现故障：glitch.com/edit/#!/sudden-antler

当然，我不应该等待 5 秒，而是应该监听加载的事件，一旦我不那么忙，我会调查它。

如果有人设法使用此组件正确执行此操作，请发表评论，因为我尝试执行 onConnect 位置（太早，其他玩家实体仍未加载），尝试等待场景加载，但我得到的最接近的是在固定时间后，当我获得玩家数量时动态创建玩家。

【讨论】：

看起来不错，我过会儿去看看，告诉你它是如何工作的！
@Riccardo 如果可行，请尝试找出应该执行位置函数的事件（而不是临时的 5 秒）
我没有让它在我的项目中工作。我得到了 console.logs 的权利，但我在选择时遇到了麻烦。我做了一些研究并决定使用 firebase 解决方案，因为使用实际服务器似乎比使用我的机器作为主机更合理。但是非常感谢您的努力！

【解决方案2】：

我在下面想出了一个有点破解的解决方案，但我现在想出了一个干净的方法来确定何时连接。

let connectionResolve;
let connectionPromise = new Promise((resolve, reject) => {
   connectionResolve = resolve;
})

<a-scene networked-scene="onConnect:connectionResolve">


connectionPromise.then(() => {
  // now you can access NAF.connection.getConnectedClients() safely here
  // do stuff
})

您可以将回调传递给网络场景组件的 onConnect。当您连接时，它将调用该回调。通过向它传递一个 promise 的解析器，您就可以安全地调用任何东西，并且知道只有在您连接时才会调用它。

旧答案

请注意，您应该使用NAF.connection.getConnectedClients()，而不是实体，因为实体是用户之间共享的任何东西——它只是对应，因为在一个粗略的示例中，化身的数量（仅共享实体）与用户的数量相匹配。

function onConnected(callback) {
   setTimeout(() => {
     if (NAF.connection.isConnected()) {
       callback(NAF.connection.getConnectedClients())
     }
     else onConnected(callback)

   }, 100)
}

（这只是给你一个想法。）

docs 似乎并没有为此提供一个好的事件，但他们确实提到了这些我们可以以不那么 hacky（如果不是很优雅）的方式使用的功能。

【讨论】：