【发布时间】：2017-12-20 16:54:22
【问题描述】：
我目前正在使用 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>
【问题讨论】：
标签： javascript html aframe