Question

在点击时创建链接到其他网址的3d模型的任何提示吗？

更详细地讲，我已将3d模型加载到一个场景中，并且希望在单击时将模型链接到另一个URL。

我正在这样预加载模型资产：

<a-assets>

<a-asset-item id="foo-obj" crossorigin="anonymous" src="https://cdn.glitch.com/62d6d539-d638-4686-ba78-f926cc1d10a8%2FPortal_FInal.obj?1544456633029"></a-asset-item>
<a-asset-item id="foo-mtl"  src="assets/models/Portal_FInal2.mtl"></a-asset-item>  
</a-assets>

然后按如下方式将模型调用到场景中：

<a-obj-model id="link" src="#foo-obj" mtl="#foo-mtl"  position="3 -3 -11" rotation="0 45 0"> ></a-obj-model>

我尝试将href属性添加到对象无济于事。我能够将相机和光标移到场景中。但是我没有得到光标来识别链接。有什么建议吗？

Answer 1

尽管有一个link组件，但它会创建“类似门户”的几何形状。如果只希望模型重定向到另一个页面，则可以使用link s source code：

编写一个非常简单的组件。

AFRAME.registerComponent('redirect', {
  schema {
    href: {default: ''}
  },
  init() {
     // react to the click
     this.el.addEventListener('click', (e)=>{
       // navigate to another url
       window.location = this.data.href
     })
  }
}

并像这样使用它

<a-obj-model redirect="href: google.com"></a-obj-model>

Answer 2

现在，假设您拥有n个（多个）资产：

<a-assets>

<a-asset-item id="foo1-obj" crossorigin="anonymous" src="whatever"></a-asset-item>
<a-asset-item id="foo1-mtl"  src="whatever"></a-asset-item>

<a-asset-item id="foo2-obj" crossorigin="anonymous" src="whatever1"></a-asset-item>
<a-asset-item id="foo1-mtl"  src="whatever2"></a-asset-item>

...

<a-asset-item id="foon-obj" crossorigin="anonymous" src="whatevern"></a-asset-item>
<a-asset-item id="foon-mtl"  src="whatevern"></a-asset-item>

</a-assets>

，因此是n个a-obj模型：

<a-obj-model redirect="href: example1.com"></a-obj-model>
<a-obj-model redirect="href: example2.com"></a-obj-model>

...

<a-obj-model redirect="href: examplen.com"></a-obj-model>

无论您单击哪个a-obj-model，按照先前的建议进行操作都会打开example1.com。

即：

单击具有以下重定向内容的a-obj-model：“ href：example3.com”将重定向到example1.com，而不是预期的example3.com

这是完整的代码：

<!DOCTYPE html>
<html>
<title>Test</title>
  <head>
    <meta charset="utf-8"/>
    <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-event-set-component@3.0.3/dist/aframe-event-set-component.min.js"></script>    
    <script src="https://rawgit.com/mayognaise/aframe-mouse-cursor-component/master/dist/aframe-mouse-cursor-component.min.js"></script>    
  </head>

<script>

    AFRAME.registerComponent('redirect', {

      schema: {
        href: {default: ''}
      },

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

         // react to the click
         this.el.addEventListener('click', function () {
           // navigate to another url
           window.location = data.href;
         })
      }
    });

</script>  

<body>

<a-scene cursor="rayOrigin: mouse">

    <a-assets>
        <a-asset-item id="background-obj" src="3Dmodel-background.obj"></a-asset-item>
        <a-asset-item id="background-mtl" src="3Dmodel.mtl"></a-asset-item>

        <a-asset-item id="wb-1-obj" src="3Dmodel-wb-1.obj"></a-asset-item>              
        <a-asset-item id="wb-2-obj" src="3Dmodel-wb-2.obj"></a-asset-item>              
        <a-asset-item id="wb-3-obj" src="3Dmodel-wb-3.obj"></a-asset-item>
        <a-asset-item id="wb-4-obj" src="3Dmodel-wb-4.obj"></a-asset-item>              
        <a-asset-item id="wb-6-obj" src="3Dmodel-wb-6.obj"></a-asset-item>              
    </a-assets>

    <a-entity raycaster="objects:.landscape,.environmentGround,.environmentDressing; far:0.5;"> 

    <a-camera
        position="-0.5 2 5"
        scale="2 2 2"
        wasd-controls-enabled="true"        
        wasd-controls="acceleration: 175; fly: true"
        look-controls-enabled="true"
        look-controls="reverseTouchDrag: true; reverseMouseDrag: false"
    >
    </a-camera>

    <a-obj-model
        obj-model="obj: #background-obj; mtl: #background-mtl"
    </a-obj-model>

    <a-obj-model
        redirect="href: example1.com"
        obj-model="obj: #wb-1-obj; mtl: #background-mtl"
    </a-obj-model>

    <a-obj-model
        redirect="href: example2.com"
        obj-model="obj: #wb-2-obj; mtl: #background-mtl"
    </a-obj-model>

    <a-obj-model
        redirect="href: example3.com"
        obj-model="obj: #wb-3-obj; mtl: #background-mtl"
    </a-obj-model>

    <a-obj-model
        redirect="href: example4.com"
        obj-model="obj: #wb-4-obj; mtl: #background-mtl"
    </a-obj-model>

    <a-obj-model
        redirect="href: example6.com"
        obj-model="obj: #wb-6-obj; mtl: #background-mtl"
    </a-obj-model>  

<a-sky color="#17191b"></a-sky>

</a-scene>
</body>
</html>

请问如何打开正确的URL的任何提示？

单击时为3d模型创建链接的提示

2 个答案: