设置返回场景时的后置摄像头默认位置
设置返回场景时的后置摄像头默认位置
提问于 2017-12-19 11:17:29
我目前正在使用aframe在单个html文件中进行场景更改。例如，我有一个大厅，然后我可以导航到场景2，在场景2中，我可以通过激活返回到大厅按钮返回到大厅。这将把我带回大堂场景，但是相机位置从上一个返回到大堂按钮的位置离开。有什么方法可以强制我的相机在返回到大厅场景时恢复到我想要的默认视图吗？
<!DOCTYPE>
<html class="a-html">
<head>
<title>new change</title>
<meta aframe-injected="" name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,shrink-to-fit=no,user-scalable=no,minimal-ui"><meta aframe-injected="" name="mobile-web-app-capable" content="yes"><meta aframe-injected="" name="theme-color" content="black">
<script src="//cdnjs.cloudflare.com/ajax/libs/aframe/0.5.0/aframe.js"></script>
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-event-set-component@^4.0.0/dist/aframe-event-set-component.min.js"></script>
</head>
<body>
<a-scene class="fullscreen" canvas="" inspector="" keyboard-shortcuts="" screenshot="" vr-mode-ui="" auto-enter-vr="">
<a-entity camera="" position="0 0 5" look-controls="" wasd-controls="" rotation="" scale="" visible="">
<a-entity cursor="fuse: true; fuseTimeout: 1000" position="0 0 -1" geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03" material="color: black; shader: flat" rotation="" scale="" visible="" raycaster="">
<a-animation begin="click" easing="ease-in" attribute="scale" fill="backwards" from="0.1 0.1 0.1" to="1 1 1"></a-animation>
<a-animation begin="cursor-fusing" easing="ease-in" attribute="scale" fill="forwards" from="1 1 1" to="0.1 0.1 0.1"></a-animation>
</a-entity>
</a-entity> <!--End of Camera entity -->
<a-entity id="scene1">
<a-text value="Lobby" position="-1.5 5 -3" scale="2 2" color="black"></a-text>
<a-sky color="skyblue" position="0 0 0" rotation="" scale="" visible="" material="" geometry=""></a-sky>
<a-box color="tomato" onclick="setScene2()" position="0 1 -3" depth="2" height="4" width="0.5"><a-text value="hello world"></a-text></a-box> <!--box1 -->
<a-box color="tomato" onclick="setScene3()" position="2 1 -3" depth="2" height="4" wlocalidth="0.5"></a-box> <!--box2 -->
<a-box color="tomato" onclick="setScene4()" position="4 1 -3" depth="2" height="4" width="0.5"></a-box> <!--box3 -->
</a-entity> <!--End of scene1 entity -->
<a-entity id="scene2" visible="false">
<a-sky color="yellow" position="0 0 0" rotation="" scale="" visible="" material="" geometry=""></a-sky>
<a-box color="pink" onclick="setScene1()" position="-3 1 -3" rotation="0 90 0 " depth="2" height="4" width="0.5">
<a-text value="Return to Lobby" position="-1 0 -0.5" color="black" rotation="0 -90 0" ></a-text>
</a-box> <!-- End of scene2, calling returning to scene1-->
<a-box scale="1 1 1" color="skyblue" position="3 0 -5" rotation="45 45 45">
<a-animation attribute="position" to="3 0.5 -5" direction="alternate" dur="2000" repeat="indefinite"></a-animation>
<a-animation attribute="scale" begin="mouseenter" dur="200" to="2.3 2.3 2.3"></a-animation>
<a-animation attribute="scale" begin="mouseleave" dur="200" to="2 2 2"></a-animation>
<a-animation attribute="rotation" begin="click" dur="2000" to=" 360 405 45" ></a-animation>
</a-box>
<a-plane color="#CCC" height="2" width="2"></a-plane>
<a-circle color="black" radius="0.75" depth="0.5" position="0 -3 2" rotation="-90 0 0"></a-circle>
<a-text value="Welcome to Scene 2" position="-1.5 5 -3" scale="2 2" color="black"></a-text>
</a-entity> <!--End of scene2 entity -->
<a-entity id="scene3" visible ="false">
<a-sky color="limegreen" position="0 0 0" rotation="" scale="" visible="" material="" geometry=""></a-sky>
<a-box color="blue" onclick="setScene1()" position="-3 1 -3" rotation="0 90 0 " depth="2" height="4" width="0.5">
<a-text value="Return to Lobby" position="-1 0 -0.5" color="black" rotation="0 -90 0" ></a-text>
</a-box> <!-- End of scene2, calling returning to scene1-->
<a-plane color="#CCC" height="2" width="2"></a-plane>
<a-box scale="1 1 1" color="skyblue" position="3 0 -5" rotation="45 45 45">
<a-animation attribute="position" to="3 10.5 -5" direction="alternate" dur="2000" repeat="indefinite"></a-animation>
<a-animation attribute="scale" begin="mouseenter" dur="200" to="2.3 2.3 2.3"></a-animation>
<a-animation attribute="scale" begin="mouseleave" dur="200" to="2 2 2"></a-animation>
<a-animation attribute="rotation" begin="click" dur="2000" to=" 360 405 45" ></a-animation>
</a-box>
<a-text value="Welcome to Scene 3" position="-1.5 5 -3" scale="2 2" color="black"></a-text>
</a-entity>
</a-scene>
<script type="text/javascript">
function setScene2() {
// console.log('kkk')
document.getElementById('scene1').setAttribute('visible', 'false')
document.getElementById('scene2').setAttribute('visible', 'true')
// document.querySelector('#ambient2').emit('aaa');
// document.querySelector('#fading-cube').emit('fade');
}
function setScene1() {
// console.log('kkk')
document.getElementById('scene2').setAttribute('visible', 'false')
document.getElementById('scene1').setAttribute('visible', 'true')
document.getElementById('scene3').setAttribute('visible', 'false')
// document.querySelector('#ambient1').emit('aaa');
// document.querySelector('#fading-cube').emit('fade');
}
function setScene3(){
document.getElementById('scene1').setAttribute('visible', 'false')
document.getElementById('scene3').setAttribute('visible', 'true')
}
</script>
</body>
</html>回答 1
Stack Overflow用户
发布于 2017-12-20 05:25:48
默认情况下，您的相机设置为0 0 5。如果你想回到那个位置，只需在每次“切换场景”时将该位置更改为默认位置。这实际上改变了实体包装器的可见性。
如果你的相机有一个id camera，你可以像这样抓取它：
function setScene2() {
// console.log('kkk')
document.getElementById('scene1').setAttribute('visible', 'false')
document.getElementById('scene2').setAttribute('visible', 'true')
document.getElementById('camera').setAttribute('position', '0 0 5')
// document.querySelector('#ambient2').emit('aaa');
// document.querySelector('#fading-cube').emit('fade');
}
function setScene1() {
// console.log('kkk')
document.getElementById('scene2').setAttribute('visible', 'false')
document.getElementById('scene1').setAttribute('visible', 'true')
document.getElementById('scene3').setAttribute('visible', 'false')
document.getElementById('camera').setAttribute('position', '0 0 5')
// document.querySelector('#ambient1').emit('aaa');
// document.querySelector('#fading-cube').emit('fade');
}
function setScene3() {
document.getElementById('scene1').setAttribute('visible', 'false')
document.getElementById('scene3').setAttribute('visible', 'true')
document.getElementById('camera').setAttribute('position', '0 0 5')
}否则你就得用document.querySelector([camera]).抓取了
Working fiddle here。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47879551
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号