Question

我目前正在使用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>

Answer 1

默认情况下，您的相机位于0 0 5。如果您想返回该位置，只需在每次切换场景时将位置更改为默认值即可。这实际上改变了实体包装器的可见性。

如果你的相机有一个身份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]).

抓住它

工作小提琴here。

返回场景时设置相机默认位置

1 个答案: