我正在使用AR.js和Aframe,因此当我单击模型时,它将加载URL。

当我使用基本的盒子形状时,下面的方法工作正常,但是当我添加3D模型时,模型需要花费几秒钟的时间来加载,然后在加载后执行document.location.href函数,但是我只想在模型为点击?

<html>
    <head>
      <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
      <script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.0/aframe/build/aframe-ar.js"></script>

      <script>
        AFRAME.registerComponent('mas', {

          init: function () {
            var data = this.data;
            var el = this.el;  // <a-box>

            el.addEventListener('click', function () {
              console.log('click');
              masClick();
            });

            function masClick() {
              document.location.href = "http://www.google.com";
            };
          }
        });
      </script>

    </head>

    <body style='margin : 0px; overflow: hidden;'>

    <a-scene embedded arjs='sourceType: webcam;' cursor="rayOrigin: mouse">

      <a-entity rotation="0 90 0" dur="7000" mas>
        <a-gltf-model src="scene.gltf" scale="0.05 0.05 0.05" position='0 0.5 0' >
          <a-animation 
             dur="8000" 
             attribute="rotation" 
             to="0 360 0" 
             repeat="indefinite">
          </a-animation>   
        </a->
      </a-entity>

      <a-marker-camera preset='hiro'></a-marker-camera>
    </a-scene> 

    </body>
    </html>

#1楼 票数:0

cursor组件放在<a-marker>实体中时, cursor起作用:

<a-marker preset='hiro' cursor="rayOrigin: mouse">
  .....
</a-marker>

在这里 codepen。

  ask by Jemes translate from so

未解决问题?本站智能推荐:

1回复

Aframe-通过点击拇指加载场景

我正在寻找通过点击拇指加载AFrame场景的方法。 我正在尝试使用图片滑块,每张图片后面都应该有一个3D场景。 因此,如果我单击滑块中的图片,则会在前景中弹出aframe场景,例如使用不同的天空纹理。 我尝试了多种方法,但没有任何方法可行。 我可以通过一个新窗口加载一个新场景,但这不是
1回复

Aframe和Angular2模型不会加载

我试图使用Angular加载aframe模型,但是在调用.obj和.mtl时,我看到的只是一个空白屏幕。 我还在控制台上收到一条警告,提示“ core:a-assets:warn资产加载在3000毫秒内超时”。 我也试过把'a-assets timeout =“ 10000”放进去; 但我
1回复

Aframe0.8.0无法加载某些GLTF模型

我一直在使用Aframe制作小型应用程序。 我遇到了一些来自Poly的未加载模型。 这里是链接: 模式1:Hill链接: https : //poly.google.com/view/biVS28j2w4g GLTF 2.0链接: https ://poly.googleuserc
1回复

Aframe-reactgltf2模型已加载但为空

我正在Aframe-react应用程序中加载gltf2模型,在检查器中该模型看起来已加载但显示为空。 .gltf 1.0,.gltf 2.0和.glb格式会发生这种情况。 它们在在线模型查看器中看起来不错,但在Aframe React应用中却没有显示。 加载模型 和 渲染发生在
1回复

为什么在Aframe中加载模型时会丢失.obj纹理?

我已经在Maya中创建了一个模型,然后将其导出为.obj文件。 Maya都创建了.obj和.mtl文件,但没有引用.mtl文件中的纹理图像,因此我在文件末尾手动添加了它,如下所示: map_Kd paht/to/texture_image/texture_image.png 当我将.o
1回复

Aframe如何在加载GLTF模型后重置默认比例

我正在尝试制作一个应用程序,它以 GLTF 格式从 Google poly 添加模型。 我遇到了一些模型在添加到场景中时非常大的问题,我通过使用边界框最大值和最小值计算它们的大小并设置缩放量来解决这个问题。 现在,当我打开检查器并拖动以缩放对象时,将对象添加到场景后,即使进行少量拖动,对象也会变得非
1回复

Aframe自动缩放和自动居中加载模型

我一直在尝试制作一个应用程序,该应用程序可以使用Google Poly的模型并将其放在iframe中。 最初的问题是模型太大或太小,因此aframe社区向我建议了一种最佳方法,该方法可以工作一段时间,但在更改缩放比例和旋转度时会出错。 这是我用来确保模型正确缩放的组件。 上面的方法有
1回复

触摸或鼠标点击触发aframe对象的点击事件时有问题

我无法让我的代码在单击事件时触发功能。 无论是在桌面还是移动 chrome 浏览器上它都不起作用。 如果我进入检查器模式,我意识到在对象的一小部分区域中,我可以单击它并触发它,但是如果我离开检查器 (strg+alt+i),它就不起作用。 在我看来,有些事情不会触发事件的正确点。 这让我发疯。 我希