在 aframe 中添加指向 GLTF 对象的链接答案

【问题标题】：Add link to GLTF object in aframe在 aframe 中添加指向 GLTF 对象的链接
【发布时间】：2019-11-07 15:12:54
【问题描述】：

是否可以添加指向 GLTF 3d 对象的链接（由标记触发？）

我已经尝试了通常的“a-link”方法，onClick 方法，甚至应用了一个 id 并使用了 jQuery - 都没有运气 - 任何帮助将不胜感激。

<a-scene embedded arjs>
  <a-marker id="dragon" preset="custom" type="pattern" url="pattern-dragonfly.patt">
    <a-entity animation-mixer="clip: *;" scale="1.5 1.5 1.5" gltf-model-next="src: url(dragon.gltf);"></a-entity>
  </a-marker>

  <a-entity camera></a-entity>
</a-scene>

【问题讨论】：

什么是gltf-model-next？为什么不使用built-in component？
当然可以将gltf模型变成链接。它涉及添加 raycaster 系统，并创建一个自定义组件，该组件遍历 gltf 模型以查找与 raycaster 返回的匹配项，然后调用执行链接的函数，这可能会打开一个新的 Web 浏览器选项卡。或许准确地描述你想要发生的事情对你来说是有意义的。
@Diego gltf-model-next 无需单独的 a 资产即可工作
@Thomas，谢谢 - 基本上，当用户触摸 3D 对象时，我希望他们被带到一个网站 - 有没有你建议的工作示例？

标签： aframe gltf

【解决方案1】：

要完成这项工作，您需要创建一个带有光线投射器的光标，以及一个用于 gltf 的自定义组件。

 <a-entity id="mouseCursor" cursor="rayOrigin: mouse" raycaster="objects: .clickable"></a-entity>
 <a-entity id="tree" gltf-model="#gltftree" scale="5 5 5" treeman class="clickable"  ></a-entity>

在自定义组件中，首先遍历 gltf 并存储对您想要交互的模型的引用，像这样

 init: function(){
                let el = this.el;
                let self = this;
                self.trees = [];              
                el.addEventListener("model-loaded", e =>{
                    let tree3D = el.getObject3D('mesh');
                    if (!tree3D){return;}    
                  console.log('tree3D', tree3D);
                    tree3D.traverse(function(node){
                        if (node.isMesh){   
                          console.log(node);
                          self.trees.push(node);                          
                          node.material = new THREE.MeshStandardMaterial({color: 0x33aa00});
                        }
                    });
              });

然后你创建事件侦听器来检测相交事件，并保存已相交的对象，并突出显示它，以便用户知道它是实时的，就像这样

el.addEventListener('raycaster-intersected', e =>{  
                self.raycaster = e.detail.el;
                let intersection = self.raycaster.components.raycaster.getIntersection(el);
                  console.log('click', intersection.object.name, self.mouseOverObject, 
                            intersection.object.name != self.mouseOverObject );  
                if (self.mouseOverObject != intersection.object.name){
                  intersection.object.material.emissive = new THREE.Color(0xFFFF00);
                  intersection.object.material.emissiveIntensity = 0.5; 
                } else {
                   intersection.object.material.emissive = new THREE.Color(0x000000);
                  intersection.object.material.emissiveIntensity = 0.0; 
                }                  
                  self.mouseOverObject = intersection.object.name;
              });

               el.addEventListener('raycaster-intersected-cleared', e =>{  
                self.trees.forEach(function(tree){
                   tree.material.emissive = new THREE.Color(0x000000);
                  tree.material.emissiveIntensity = 0.0; 
                });    
                  self.mouseOverObject = null;
              });

最后添加一个操作超链接的点击监听，像这样

  el.addEventListener('click', function(){
                console.log(self.mouseOverObject);
                if(self.mouseOverObject === "Trunk_A"){
                  console.log('link');
                  let url = 'https://supermedium.com/supercraft/';
                  let win = window.open(url, '_blank');
                  win.focus();
                }
              });

glitch here

点击主干激活超链接。

【讨论】：

谢谢！（为延迟回复道歉）