Стереокомпонент Aframe показывает только левый глаз

Долгое время слушатель, впервые звонящий!

Я смотрю на Aframe, чтобы посмотреть, смогу ли я использовать его для показа стереофотографий через системы виртуальной реальности, такие как Google Cardboard. Я использую библиотеку Aframe Stereo Component для управления обзором каждого глаза, чтобы стерео фотографии разрешались в 3D (например, стерео зритель или ViewMaster в качестве конечной цели этого усилия). Поскольку существует неизвестное количество изображений (цель состоит в том, чтобы показать различные галереи изображений), я создаю элементы фото на лету, используя JavaScript.

Проблема в том, что, хотя я устанавливаю атрибуты стерео ="глаз: влево" и стерео ="глаз: вправо" для изображений, я вижу только левое фото пары в обоих глазах. Я ожидаю, что элемент, показывающий левое изображение, будет отображаться только на левом глазу, а элемент, показывающий правое изображение, будет отображаться только на правом глазу (таким образом, стереофотоснимок будет разрешен в 3D). Вы можете проверить это, чтобы увидеть, правильно ли отображаются изображения, изменив пользовательский агент вашего браузера на один из телефонов (Safari делает это в меню разработчика) и щелкнув по значку виртуальной машины Google в правом нижнем углу окна.

Когда я использую инспектор Aframe для проверки сцены, все атрибуты отображаются правильно и в правильных местах, поэтому кажется, что мой код выполняет свою работу правильно.

Я не уверен, что это связано с тем, что я делаю, или с ошибкой в ​​компоненте Aframe Stereo. Может быть, мне нужно "пнуть" код, чтобы увидеть полностью построенную сцену, когда скрипт как-то запустится?

Мой (усеченный, но, надеюсь, разборчивый) код, который показывает соответствующие функции:

<script src="https://aframe.io/releases/0.4.0/aframe.min.js"></script>
<script src="aframe-stereo-component.js"></script>
<script>
// List of images to display
var images=["DSCF0189" , "DSCF0287" , "DSCF0469" , "DSCF0470" , "DSCF0471" , "DSCF0472" , "DSCF0473" , "DSCF0475" , "DSCF0477" , "DSCF0478" , "DSCF0479"];

AFRAME.registerComponent('on-load',
    {
        init: function ()
        {
            var sceneEl = this.el;
            setUpScene();
        }
    });

// This function creates the photo display element
function createImage( image , eye )
    {
        var cube = document.createElement("a-entity");
        cube.setAttribute('position', position + " 0 0.1");
        cube.setAttribute('material' , 'src: #' + image + eye);
        cube.addEventListener('click' , myHandleClick);     
        cube.setAttribute('mixin','picture');
        cube.dataset.id=i;

        myID = "picture" + image + eye;

        cube.setAttribute("id" , myID);

        return(cube);
    }
function setUpScene()
{
    var myPictures = document.querySelector('#pictures');
    var myAssets = document.querySelector('a-assets');
    numberOfFrames = images.length;
    position = 0;
    for (i=0; i<numberOfFrames; i++)
    {
        image = images[i];

        // Set up the image loader for the Right eye view
        var assetRight = document.createElement('img');
        assetRight.setAttribute('src', "images/" + image + 'R.jpg');
        assetRight.setAttribute('id' , image + 'R');
        myAssets.appendChild(assetRight);

        // Create the picture object for the image and
        // assign it to the right eye
        cubeR = createImage( image , 'R' , i );
        cubeR.setAttribute('stereo','eye:right');
        myPictures.appendChild(cubeR);

        // Set up the image loader for the Left eye view
        var assetLeft = document.createElement('img');
        assetLeft.setAttribute('src', "images/" + image + 'L.jpg');
        assetLeft.setAttribute('id' , image + 'L');
        myAssets.appendChild(assetLeft);

        // Create the picture object for the image and
        // assign it to the left eye
        cubeL = createImage( image , "L" , i );
        cubeL.setAttribute('stereo','eye:left');
        myPictures.appendChild(cubeL);
    }

}

</script>

<body>
    <a-scene on-load>

        <a-assets>
            <a-mixin id="picture" geometry="primitive:box; width: 12; height: 12; depth:0.1;" >
        </a-mixin>
        </a-assets>

        <a-sky color="#444"></a-sky>
        <a-entity id="pictures" position="0 0 -13"></a-entity>
    </a-scene>
</body>

Спасибо!

0 ответов

Другие вопросы по тегам