Стереокомпонент 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>
Спасибо!