如何在框架中创建链接?
How do you create links in a-frame?
我正在尝试 link 将这些弯曲的图像在一帧中添加到我的其他 HTML 页面,这些页面是:
hall.html
clock.html
titanic.html
我已经在网上进行了研究,但未能找到答案,所以如果有人对 a-frame 有任何经验,我们将不胜感激。
本质上,我想做的是,当有人查看 A 帧中的其中一张弯曲图像时,会将他们带到 HTML 页面。
谢谢
<!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>
使用link组件:
<a-curvedimage link="href: hall.html; on: click"></a-curvedimage>
请注意,只有 Firefox、Oculus 浏览器、Samsung Internet 和 Supermedium 支持 In-VR 导航。
我正在尝试 link 将这些弯曲的图像在一帧中添加到我的其他 HTML 页面,这些页面是:
hall.html
clock.html
titanic.html
我已经在网上进行了研究,但未能找到答案,所以如果有人对 a-frame 有任何经验,我们将不胜感激。
本质上,我想做的是,当有人查看 A 帧中的其中一张弯曲图像时,会将他们带到 HTML 页面。
谢谢
<!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>
使用link组件:
<a-curvedimage link="href: hall.html; on: click"></a-curvedimage>
请注意,只有 Firefox、Oculus 浏览器、Samsung Internet 和 Supermedium 支持 In-VR 导航。