2017-12-19 9 views
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> 

답변

0

기본적으로 카메라는 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') 
} 

그렇지 않으면 당신은 바이올린 here 작업 document.querySelector([camera]).

하여 잡아해야 할 것이다.

+0

안녕하십니까, 답장을 보내 주셔서 감사합니다.하지만 어떻게 완료되었는지 예제를 보여줄 수 있습니까? 공통 클래스 방법을 사용하고 싶었지만 어떻게해야하는지 잘 모릅니다. 따라서 scene2와 scene3에 카메라 엔티티를 배치하려고 시도했지만 작동하지 않습니다. 나는 여전히 로비 장면으로 돌아 오면 시작하는 기본 카메라 위치에서 문제를 해결할 수 없었다. –

+0

@KeithOng 죄송합니다. 나는 당신이 실제로 다른 장면을 가지고있는 것은 아니지만 가시성을 전환하는 다른 엔티티를 보았다. 내 anwser + 바이올린을 업데이트했습니다. –