aframe 相机在 exit vr 和 enter vr 之间切换
aframe camera switch between exit vr and enter vr
如何在桌面和 VR 之间切换相机?
我想在桌面上使用鼠标光标,当我进入 VR 时它应该切换到另一个带有光标融合的相机。
这是我的代码:
<a-entity id="cam-desktop" camera="userHeight: 1.6; zoom:1 " look-controls mouse-cursor>
</a-entity>
<a-entity id="cam-vr" camera="userHeight: 1.6; zoom:1 " look-controls>
<a-animation begin="cursor-fusing" delay=" 3000" attribute="camera.zoom" from="1" to="4" dur="1000"></a-animation>
<a-animation begin="click" delay="500" attribute="camera.zoom" from="4" to="1" dur="1000"></a-animation>
<a-entity cursor="fuse: true; fuseTimeout:4000" geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03; thetaLength: 360; thetaStart: 0" rotation="0 0 90" position="0 0 -1" material="color: black; side: double; shader: flat">
<a-animation begin="cursor-fusing" attribute="geometry.thetaLength" from="360" to="0" easing="linear" dur="3000"></a-animation>
<a-animation begin="mouseleave" attribute="geometry.thetaLength" from="360" to="360" dur="0"></a-animation>
</entity>
</a-entity>
非常感谢!
您可以创建一个组件,监听 'enter-vr' 和 'exit-vr' 事件,并相应地设置活动相机:
AFRAME.registerComponent('scenelistener',{
init:function(){
let vrcam = document.querySelector("#cam-vr");
let dcam = document.querySelector("#cam-desktop");
let vrmode = false;
this.el.sceneEl.addEventListener('enter-vr',function(){
if(!vrmode){
dcam.setAttribute('active',false);
vrcam.setAttribute('active',true);
vrmode!=vrmode;
}
}
this.el.sceneEl.addEventListener('exit-vr',function(){
if(vrmode){
dcam.setAttribute('active',true);
vrcam.setAttribute('active',false);
vrmode!=vrmode;
}
}
}
});
实际上,您可以将监听器粘贴到任何地方,而且您可以只监听任何事件并根据接收到的事件做一些事情,我只是想向您展示这个概念。
我不确定是什么如果有 2 个以上的摄像头处于活动状态,就会发生这种情况,所以我在更改时将它们设置为 false。
更新
我没有看到相机是实体,而不是基元,所以你必须像这样设置属性:setAttribute('camera','active',true)
我的光标有一些问题,所以我将其设置为可见和不可见,具体取决于虚拟现实状态。
工作 fiddle(至少相机开关)here.
如何在桌面和 VR 之间切换相机? 我想在桌面上使用鼠标光标,当我进入 VR 时它应该切换到另一个带有光标融合的相机。
这是我的代码:
<a-entity id="cam-desktop" camera="userHeight: 1.6; zoom:1 " look-controls mouse-cursor>
</a-entity>
<a-entity id="cam-vr" camera="userHeight: 1.6; zoom:1 " look-controls>
<a-animation begin="cursor-fusing" delay=" 3000" attribute="camera.zoom" from="1" to="4" dur="1000"></a-animation>
<a-animation begin="click" delay="500" attribute="camera.zoom" from="4" to="1" dur="1000"></a-animation>
<a-entity cursor="fuse: true; fuseTimeout:4000" geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03; thetaLength: 360; thetaStart: 0" rotation="0 0 90" position="0 0 -1" material="color: black; side: double; shader: flat">
<a-animation begin="cursor-fusing" attribute="geometry.thetaLength" from="360" to="0" easing="linear" dur="3000"></a-animation>
<a-animation begin="mouseleave" attribute="geometry.thetaLength" from="360" to="360" dur="0"></a-animation>
</entity>
</a-entity>
非常感谢!
您可以创建一个组件,监听 'enter-vr' 和 'exit-vr' 事件,并相应地设置活动相机:
AFRAME.registerComponent('scenelistener',{
init:function(){
let vrcam = document.querySelector("#cam-vr");
let dcam = document.querySelector("#cam-desktop");
let vrmode = false;
this.el.sceneEl.addEventListener('enter-vr',function(){
if(!vrmode){
dcam.setAttribute('active',false);
vrcam.setAttribute('active',true);
vrmode!=vrmode;
}
}
this.el.sceneEl.addEventListener('exit-vr',function(){
if(vrmode){
dcam.setAttribute('active',true);
vrcam.setAttribute('active',false);
vrmode!=vrmode;
}
}
}
});
实际上,您可以将监听器粘贴到任何地方,而且您可以只监听任何事件并根据接收到的事件做一些事情,我只是想向您展示这个概念。
我不确定是什么如果有 2 个以上的摄像头处于活动状态,就会发生这种情况,所以我在更改时将它们设置为 false。
更新
我没有看到相机是实体,而不是基元,所以你必须像这样设置属性:setAttribute('camera','active',true)
我的光标有一些问题,所以我将其设置为可见和不可见,具体取决于虚拟现实状态。
工作 fiddle(至少相机开关)here.