Question

长时间听众，第一次来电！

我正在寻找Aframe，看看我是否可以用它来通过VR系统显示立体照片，例如Google Cardboard。我正在使用Aframe立体声组件库来控制每只眼睛的视图，以便立体照片以3D形式解析（想想立体观察器，或ViewMaster作为此努力的最终目标）。因为有一个未知数量的图像（目标是让它显示各种图像库），我正在使用JavaScript动态创建照片元素。

问题在于，即使我为图片设置了stereo =“eye：left”和stereo =“eye：right”属性，我也只能看到双眼中的左侧照片。我期待的是显示左图像的元素仅显示在左眼中，而显示右图像的元素仅显示在右眼中（这样，立体照片将以3D形式解析）。您可以通过将浏览器的用户代理更改为某个电话（Safari在开发人员菜单中执行此操作），然后单击窗口右下角的VR googles图标来测试此图像是否正确显示图像。 / p>

当我使用Aframe检查器检查场景时，所有属性似乎都被正确设置并位于正确的位置，因此我的代码似乎正在正常工作。

我不确定这是否与我正在做的事情有关，或者Aframe立体声组件中是否存在错误。也许我需要“踢”代码，以便在脚本以某种方式运行时看到完全构造的场景？

我的（截断但有希望清晰的）代码，显示相关功能：

<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>

谢谢！

Aframe立体声组件仅显示左眼视图

0 个答案: