Индивидуальные функциональные курсоры для многопользовательского использования A-Frame - PullRequest
Новая
       8

Индивидуальные функциональные курсоры для многопользовательского использования A-Frame

0 голосов
/ 01 октября 2018

Я экспериментирую с 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>
...