我正在使用共享空间组件尝试A-Frame。我的问题是,怎样或什么策略可以使多个用户加入一个会议室,并且每个人都会得到一个可以与会议室中的实体进行交互的光标。在基础级别上,我只想要一个房间,其中有一个任何用户都可以单击并且会更改颜色的框。这对于单个用户来说很容易做到,但是我还没有弄清楚如何让每个用户都拥有一个游标,即使这是可能的。我试图在模板中放置一个光标,但最终给第一个用户一个光标,随后的用户受到第一个光标的移动的影响。小故障链接和代码段如下:
https://glitch.com/edit/#!/sam-parsons-multiuser-aframe-3
<a-scene>
<a-assets>
<a-mixin id="user" visible="false" look-controls wasd-controls share="position, rotation"></a-mixin>
<audio id="trumpet" src="fanfare.wav"></audio>
<video id="webcam" playsinline></video>
</a-assets>
<a-entity sharedspace="hold: true; audio: true" avatars="onmyself: user"><!-- research audio features -->
<a-entity environment="preset: forest">
<a-entity id="box" geometry="primitive: box" material="color: red" position="0 1.5 -3" sound="src: #trumpet; on: click; volume: 8" change-color-on-click></a-entity>
</a-entity>
</a-entity>
<a-camera>
<a-cursor></a-cursor>
</a-camera>
</a-scene>
<template>
<a-entity>
<a-sphere radius="01." material="src: #webcam" color="#ffffff">
</a-sphere>
<a-sphere position="0.05 0.03 -0.08" radius="0.2" segments-width="8" segments-height="8" color="#000000"></a-sphere>
<a-sphere position="-0.05 0.03 -0.08" radius="0.2" segments-width="8" segments-height="8" color="#000000"></a-sphere>
<a-sphere class="themable" position="0 -0.07 -0.1" scale="1 1 0.5" segments-width="4" segments-height="4" radius="0.02" color="#11fd3e"></a-sphere>
<a-cone class="themable" position="0.03 -0.07 -0.1" rotation="0 0 90" scale="1 1 0.5" segments-radial="8" segments-height="1" height="0.03" radius-bottom="0.03" color="#1cff3c"></a-cone>
<a-cone class="themable" position="-0.03 -0.07 -0.1" rotation="0 0 -90" scale="1 1 0.5" segments-radial="8" segments-height="1" height="0.03" radius-bottom="0.03" color="#1cff3c"></a-cone>
<!-- <a-camera>
<a-cursor></a-cursor>
</a-camera> -->
</a-entity>
</template>
<script>
var scene = document.querySelector('a-scene');
(function start() {
if (!scene.hasLoaded) {
scene.addEventListener('loaded', start);
return;
}
var prefix = window.location.host.split('.')[0] + '-';
var currentUrl = new URL(window.location);
var roomName = currentUrl.search.substr(1);
if (!roomName) {
roomName = prefix + Date.now();
currentUrl.search = roomName;
history.pushState({}, '', currentUrl.href);
}
var room = document.querySelector('[sharedspace]');
room.addEventListener('avataradded', function onAdded(evt) {
var avatar = evt.detail.avatar;
if (!avatar.hasLoaded) {
avatar.addEventListener('loaded', onAdded.bind(null, evt));
return;
}
var avatarY = avatar.getAttribute('position').y;
avatar.object3D.lookAt(new THREE.Vector3(0, avatarY, 0));
var radToDeg = THREE.Math.radToDeg;
var rotation = avatar.object3D.rotation;
rotation.y += Math.PI;
avatar.setAttribute('rotation', {
x: radToDeg(rotation.x),
y: radToDeg(rotation.y),
z: radToDeg(rotation.z)
});
});
room.setAttribute('sharedspace', { room: roomName, hold: false });
}());
</script>