Question

这就是我正在从事的工作：360 Tour。我有一个嵌入式A帧场景，只需要一个简单的热点图标，当用鼠标单击该图标时，它将加载一个新页面（将观众带到游览中的另一个房间）。它必须是嵌入式的，这样我才能将css样式的响应式HUD停靠在框架的侧面。

似乎有效的可点击区域正在偏移，具体取决于窗口大小。 This thread sounds similar to my problem，但他们的解决方案是更新的组件脚本，该脚本现已合并到主要的A框架脚本（？）中。

是否存在我要忽略的光标设置？我是A-Frame的新手...（ checks watch ）...上周，从那之前的一周开始是Javascript的新手，所以如果这很简单，我不会感到惊讶。我误会了

任何指导或技巧都将不胜感激。这是我的A型相框：

<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;
  });
}
});

Answer 1

高级答案是将A-Frame应用程序移到I-Frame中，并使用postMessage控制A-Frame场景，以便它可以在保持应用程序状态和2D HUD的同时进行导航。

嵌入式A框架和rayOrigin：鼠标

1 个答案: