0
현재 단일 HTML 파일 내에서 장면 전환을 수행하기 위해 aframe을 사용하고 있습니다. 예를 들어, 로비가 있고, 장면 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/[email protected]^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>
안녕하십니까, 답장을 보내 주셔서 감사합니다.하지만 어떻게 완료되었는지 예제를 보여줄 수 있습니까? 공통 클래스 방법을 사용하고 싶었지만 어떻게해야하는지 잘 모릅니다. 따라서 scene2와 scene3에 카메라 엔티티를 배치하려고 시도했지만 작동하지 않습니다. 나는 여전히 로비 장면으로 돌아 오면 시작하는 기본 카메라 위치에서 문제를 해결할 수 없었다. –
@KeithOng 죄송합니다. 나는 당신이 실제로 다른 장면을 가지고있는 것은 아니지만 가시성을 전환하는 다른 엔티티를 보았다. 내 anwser + 바이올린을 업데이트했습니다. –