单独的功能游标，可提供多用户A-Frame体验

Question

我正在使用共享空间组件尝试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>