【发布时间】：2019-03-23 04:16:28
【问题描述】：
这就是我的工作：360 Tour。我有一个嵌入式 A-Frame 场景，只需要一个简单的热点图标，当用鼠标单击时会加载一个新页面（将观众带到游览中的另一个房间）。它必须被嵌入，这样我才能将一个 css 风格的响应式 HUD 停靠在框架的一侧。
似乎活动的可点击区域正在根据窗口大小进行偏移。 This thread sounds similar to my problem 但他们的解决方案是更新了组件脚本，并且该脚本现在已合并到主 A-Frame 脚本中（？）。
是否有我忽略的光标设置？我是 A-Frame 的新手......（检查手表）......上周和一周前的 Javascript 新手，所以如果它很简单，我不会感到惊讶我误会了。
非常感谢任何指导或提示。这是我的 A-Frame：
<div id="vrwindow">
<a-scene embedded="true" antialias="true" cursor="rayOrigin:mouse" >
<a-assets>
<img id="granite" crossorigin="" src="images/granite.png">
<img id="quartzite" crossorigin="" src="images/quartzite.png">
<img id="frost" crossorigin="" src="images/frost.png">
<img id="fieldstone" crossorigin="" src="images/fieldstone.png">
<img id="riverrock" crossorigin="" src="images/riverrock.png">
<img id="baltic" crossorigin="" src="images/baltic.png">
<img id="alpine" crossorigin="" src="images/alpine2.png">
<img id="linen" crossorigin="" src="images/linen.png">
<img id="hawthorne" crossorigin="" src="images/hawthorne.png">
<img id="hemingway" crossorigin="" src="images/hemingway.png">
<img id="hickory" crossorigin="" src="images/hickory2.png">
<img id="hotspot" crossorigin="" src="images/bedroom.png">
</a-assets>
<a-sky id="bigimage" src="images/guestroom.jpg" rotation="0 -90 0">
</a-sky>
<a-circle navigate-on-click="url: junkroom.html"
src="images/bedroom.png" position="-2 0 -8"></a-circle>
<a-camera fov="70" look-controls> </a-camera>
</a-scene>
</div>
以及我正在使用的组件脚本
AFRAME.registerComponent('navigate-on-click', {
schema: {
url: {default: ''}
},
init: function () {
var data = this.data;
var el = this.el;
el.addEventListener('click', function () {
window.top.location.href = data.url;
});
}
});
【问题讨论】：
-
你可以使用 I-Frame 吗？如果 HUD 需要与 A-Frame 应用程序通信，您可以使用 I-Frame postmessage。
-
是的！这很好用。对 javascript 非常陌生，所以我仍在学习可用的解决方案，谢谢您的指导。