Aframe A帧图像/光标不指向同一对象
我正在尝试一个类似的例子,比如链接中的立体天空a帧组件。演示链接不起作用,因此在修复了Aframe A帧图像/光标不指向同一对象,aframe,Aframe,我正在尝试一个类似的例子,比如链接中的立体天空a帧组件。演示链接不起作用,因此在修复了aframe master.min.js的源代码后,我上传了示例 在VR中查看后(在我的三星s7 edge和卡板中),我发现双眼的图像不对齐。特别是当我试着把指针放在路标上时,我发现它们偏离了一小部分 我很困惑我到底做错了什么;A-Frame的源是否错误?或者左眼和右眼的图像需要“修改”?设备上是否存在可能会扰乱图像渲染的设置?为了便于参考,我将源代码放在下面:- <!DOCTYPE html>
aframe master.min.js
的源代码后,我上传了示例
在VR中查看后(在我的三星s7 edge和卡板中),我发现双眼的图像不对齐。特别是当我试着把指针放在路标上时,我发现它们偏离了一小部分
我很困惑我到底做错了什么;A-Frame
的源是否错误?或者左眼和右眼的图像需要“修改”?设备上是否存在可能会扰乱图像渲染的设置?为了便于参考,我将源代码放在下面:-
<!DOCTYPE html>
<html>
<head>
<title>A-Frame walkthrough (final)</title>
<script src="https://rawgit.com/aframevr/aframe/3620e8e/dist/aframe-master.min.js"></script>
<script src="stereocube.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<img id="circle" src="circle.png"/>
</a-assets>
<a-camera stereocam position="-47 0 -35" ><a-cursor fuse="true" color="#2E3A87" timeout="700">
<a-animation begin="cursor-click" easing="ease-in" attribute="scale" dur="800"
fill="backwards" from="1.0 1.0 1.0" to="100 100 100">
</a-animation>
</a-camera>
<a-mixin id="waypt" rotation="0 0 25" scale="2 2 2"></a-mixin>
<a-mixin id="spin" attribute="rotation" dur="10000" fill="forwards" to="0 360 25" repeat="indefinite"></a-mixin>
<a-mixin id="enter" begin="cursor-mouseenter" easing="ease-in" attribute="scale" dur="200" to="4 4 4"></a-mixin>
<a-mixin id="leave" begin="cursor-mouseleave" easing="ease-out" attribute="scale" dur="200" to="2 2 2"></a-mixin>
<a-box id="wp1" color="orange" href="brooke0" position="-40 -10 10" mixin="waypt" src="#circle">
<a-animation mixin="enter"></a-animation>
<a-animation mixin="leave"></a-animation>
<a-animation mixin="spin"></a-animation>
</a-box>
<a-box id="wp2" color="green" href="brooke1" position=" 0 -14 0" mixin="waypt" src="#circle" ><a-animation mixin="spin"></a-animation><a-animation mixin="enter"></a-animation><a-animation mixin="leave"></a-animation></a-box>
<a-box id="wp3" color="lightblue" href="brooke3" position=" 15 -9 35" mixin="waypt" src="#circle"> <a-animation mixin="spin"></a-animation><a-animation mixin="enter"></a-animation><a-animation mixin="leave"></a-animation></a-box>
<a-box id="wp4" color="red" href="brooke2" position="-47 -9 -35" mixin="waypt" src="#circle"> <a-animation mixin="spin"></a-animation><a-animation mixin="enter"></a-animation><a-animation mixin="leave"></a-animation></a-box>
<a-entity id="skyL" position="-47 0 -35" skycube="folder:brooke2L; eye:left" scale="1 1 -1"></a-entity>
<a-entity id="skyR" position="-47 0 -35" skycube="folder:brooke2R; eye:right" scale="1 1 -1"></a-entity>
</a-scene>
</body>
<script>
var app = {
init: function() {
// Add Click handler's to our waypoints in javascript
[].forEach.call(document.querySelectorAll('a-box'), function(box) {
box.addEventListener('click', function () {
window.setTimeout(function(){
app.setSkybox ( box.getAttribute('href') );
app.moveCamera ( box.getAttribute('position'), document.querySelectorAll('a-camera')[0] );
app.hideWaypoints(box.id);
},600)
})
});
app.hideWaypoints("wp4");
},
setSkybox: function(selectedFolder) {
document.querySelector('#skyL').setAttribute('skycube',{folder: selectedFolder+"L", eye:"left"});
document.querySelector('#skyR').setAttribute('skycube',{folder: selectedFolder+"R", eye:"right"});
},
hideWaypoints: function(boxid) {
document.querySelector('#wp4').setAttribute('visible',boxid === "wp1");
document.querySelector('#wp2').setAttribute('visible',boxid != "wp4");
document.querySelector('#wp3').setAttribute('visible',boxid != "wp4");
},
moveCamera: function(newPosition, camera) {
var pos = newPosition.x +" 0 "+ newPosition.z;
camera.setAttribute('position', pos );
// move the cubemap to the same position as the camera, to avoid distortion
document.querySelector('#skyL').setAttribute('position', pos );
document.querySelector('#skyR').setAttribute('position', pos );
},
}
app.init();
</script>
</html>
A帧演练(最终版)
变量应用={
init:function(){
//在javascript中将单击处理程序添加到我们的航路点
[]forEach.call(document.queryselectoral('a-box')、函数(box){
box.addEventListener('click',函数(){
setTimeout(函数(){
app.setSkybox(box.getAttribute('href');
app.moveCamera(box.getAttribute('position')、document.querySelectorAll('a-camera')[0]);
应用程序隐藏点(框id);
},600)
})
});
附录:隐藏点(“wp4”);
},
setSkybox:函数(selectedFolder){
document.querySelector('#skyL').setAttribute('skycube',{folder:selectedFolder+“L”,eye:“left”});
document.querySelector('#skyR').setAttribute('skycube',{folder:selectedFolder+“R”,eye:“right”});
},
隐藏点:函数(boxid){
document.querySelector('#wp4').setAttribute('visible',boxid==“wp1”);
document.querySelector('#wp2').setAttribute('visible',boxid!=“wp4”);
document.querySelector('#wp3').setAttribute('visible',boxid!=“wp4”);
},
移动摄像机:功能(新位置,摄像机){
var pos=newPosition.x+“0”+newPosition.z;
摄像头.setAttribute('position',pos);
//将立方体贴图移动到与相机相同的位置,以避免变形
document.querySelector('#skyL').setAttribute('position',pos);
document.querySelector('#skyR').setAttribute('position',pos);
},
}
app.init();
我还没有查看组件。这可能是组件中的错误吗?如果您尝试较旧的A-Frame版本,主组件示例是否有效?这是一个好问题,我发现https://aframe.io/releases/0.5.0/aframe.min.js
是最新版本。我试过版本0.4.0
,但问题仍然存在;版本0.3.0
可能没有游标对象,但我可能错了,问题仍然存在。我使用的是《袋鼠道》中提到的立体摄像机。我不知道如何进一步进行。任何想法都会很有帮助。谢谢:)我在S7上也有这个问题,它似乎与这个设备有关。