How do you create links in a-frame?

问题

I'm trying to link these curved images in a-frame to my other HTML Pages which are:

hall.html
clock.html
titanic.html

I've researched it online but haven't been able to find an answer so if anyone has any experience with a-frame the help would be appreciated.

Essentially what I'm trying to do is when someone looks at one of the curved images in a-frame it takes them to the HTML page.

Thanks

        <!DOCTYPE html>
        <html>
          <head>
            <meta charset="utf-8">
            <title>360Belfast</title>
            <meta name="description" content="Curved Images - A-Frame">
             <script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/0.7.1/aframe.min.js"></script> 
            <script src="js/build.js"></script>
          </head>
          <body>
              
            <a-scene background="color: white">
              <a-assets>
                <img id="mozvr" src="img/logo.png">
                <img id="shadow2" src="img/radial-shadow-2.png">
                <img id="ui1" src="img/ui-1.png">
                <img id="ui2" src="img/ui-2.png">
                <img id="ui3" src="img/ui-3.png">
                  <img id="3d" src="img/3d.png">
                  <img id="3dcity" src="img/3dcity.png">
                <img id="3dclock" src="img/3dclock.png">
                       
              </a-assets>
                
                
              <!-- <a-box id="blue-cube" position="-3.5 3.5 -2" rotation="30 30 0"
                  width="2" depth="2" height="2" color="blue"
                  href="#orange-cube"></a-box> -->

                    <a-curvedimage href="hall.html" src="#ui1" radius="5.7" theta-length="70" height="3.02"
                             rotation="0 155 0" scale="0.8 0.8 0.8"></a-curvedimage>
              <a-curvedimage src="#mozvr" radius="5.7" theta-length="20" height=".7"
                             opacity="0.6" rotation="0 250 0" position="0 2 0"></a-curvedimage>
                  <a-curvedimage src="#ui3" radius="5.7" theta-length="70" height="3.02"
                             rotation="0 80 0" scale="0.8 0.8 0.8" href="clock.html"></a-curvedimage>
              <a-curvedimage src="#ui2" radius="5.7" theta-length="70" height="3.02"
                             rotation="0 -130 0" scale="0.8 0.8 0.8" href="titanic.html"></a-curvedimage>
               <a-curvedimage src="#3d" position="0 -2.5 0" radius="5.7" theta-length="70" height="3.02"
                             rotation="0 -130 0" scale="0.8 0.8 0.8"></a-curvedimage>
                 <a-curvedimage src="#3dclock" position="0 -2.5 0" radius="5.7" theta-length="70" height="3.02"
                             rotation="0 80 0" scale="0.8 0.8 0.8" href="model.html"></a-curvedimage>
                 <a-curvedimage src="#3dcity" position="0 -2.5 0" radius="5.7" theta-length="70" height="3.02"
                             rotation="0 155 0" scale="0.8 0.8 0.8"></a-curvedimage>

              <a-image position="0 -5 0" src="#shadow2" rotation="-90 0 0" scale="6 6 6"></a-image>
               
              <a-entity position="0 0 1">
               <a-camera>
                <a-cursor color="#4CC3D9"></a-cursor>
                  </a-camera>
              </a-entity>
                
            <a-sky background="color: white"></a-sky>
                
            </a-scene>
          </body>
        </html>

回答1:

Use the link component:

<a-curvedimage link="href: hall.html; on: click"></a-curvedimage>

Note that In-VR navigation is only supported by Firefox, Oculus Browser, Samsung Internet and Supermedium.

来源：https://stackoverflow.com/questions/54091783/how-do-you-create-links-in-a-frame

标签

aframe

webvr