显示鼠标文本在球

这是我调整了360图库代码：显示鼠标文本在球

https://glitch.com/edit/#!/wild-aftershave

下面是一个MCV版本：https://glitch.com/edit/#!/good-soup

我有一个链接模板：

<script id="link" type="text/html"> 
      <a-entity class="link" 
      hover-text="value: I am hovered." 
      rotation="-45 0 0" 
      position="-4 0 0" 
      geometry="primitive: sphere; radius: .5" 
      material="shader: flat; src: ${thumb};" 
      event-set__1="_event: mousedown; scale: 1 1 1" 
      event-set__2="_event: mouseup; scale: 1.2 1.2 1" 
      event-set__3="_event: mouseenter; scale: 1.2 1.2 1" 
      event-set__4="_event: mouseleave; scale: 1 1 1" 
      set-image="on: click; target: #image-360; src: ${src}" 
      sound="on: click; src: #click-sound" 
      ></a-entity> 


     </script>

个人图像链接：

<a-entity id="links" layout="type: circle; radius: 4; angle: ;" position="2 -2 .1"> 

     <a-entity template="src: #link" data-src="#coney" data-thumb="#coney-thumb"> 

     <!-- animation to show once a link has been clicked--> 
     <a-animation attribute="rotation" 
       dur="5000" 
       begin="click" 
       from="" 
       to="0 0 20" 
       repeat="0"></a-animation> 

     </a-entity>

x20 ...

还有一个光标/相机。

此刻，当你改变图像，动画播放，以显示你已经看到的图像（旁白：不能得到透明度的工作，因为它是一个实体内的动画另一个实体内）。我想知道如何在注视时将文本悬停在图像链接上。

我试过悬停文字脚本的位置：

（A-sphere show text on mouse over or attach a text to a-sphere），

，但除非我不把悬停文本组件在正确的地方，我不能让它工作。有什么建议么？谢谢。

来源

2017-07-24 philip.big_L

首先，我链接的代码。其次，我在帖子中编辑了现在的重要部分。所以收回downvote。 –

使用value，不content。

el.setAttribute('text', {content: data.content});

您还可以使用event-set__text="_event: mouseenter; text.value: 'Hello'"或event-set__text="_event: mouseenter; _target: #someText; text.value: "Hello"。

来源

2017-07-25 02:33:51 ngokevin

谢谢凯文！我尝试将悬停文本脚本更改为值而不是内容，并将悬停文本放在单独的链接中，但这不起作用。然后我删除了脚本并尝试了事件集并将其放入链接模板中？也没有工作，但这可能是由于我不知道如何事件设置的东西工作。 –

https://glitch.com/edit/#!/join/8dca8c1c-f1d0-4102-ba1e-20df2a5fefb4这是我试图去工作，希望迷你版...如果你能看到我的代码是否正确 –

'＃someText'通过ID指向一个实体，你需要创建它来保存文本。 – ngokevin

真的不能得到它的工作，但这里是没有工作：

添加这个脚本，它的目标实体，并触发其不透明度：

<script> 
     document.querySelector('a-scene').addEventListener('enter-vr', function() { 
     var link = document.querySelector('.bottom-left').style.visibility = "hidden"; 
     }); 
     document.querySelector('.target').addEventListener('mouseenter', function() { 
     var toggle = document.querySelector('.toggle').setAttribute('opacity', 100); 
     var text = document.querySelector('.text').setAttribute('opacity', 100); 
     }); 
     document.querySelector('.target').addEventListener('mouseleave', function() { 
     setTimeout(function() { 
      var toggle = document.querySelector('.toggle').setAttribute('opacity', 0); 
      var text = document.querySelector('.text').setAttribute('opacity', 0); 
     }, 100); 
     });

然后，让一架飞机时，你想要显示文本的文本里面：

<a-plane class="toggle" color="#2582EF" height="1.25" width="2.5" scale="0.8 0.8 0.8" rotation="0 -90 0" 
       position="3 -5 .3" opacity="0" visible="true" material="color:#2582EF;opacity:0" geometry="primitive:plane;height:1.25;width:2.5"> 
     <a-text class="text" text="anchor:align;width:4.5;color:#FFFFFF;align:center;opacity:0;font:https://cdn.aframe.io/fonts/Exo2SemiBold.fnt; 
            value:Hey" 
       letterspacing="1.3" width="4.5" color="#FFFFFF" align="center" opacity="0" scale="0.5 0.5 0.5" 
       position="0 0 0" rotation="0 0 0" visible="true"> 
     </a-text> 
     </a-plane>

然后在实体要充当目标切换你只需要添加

class="target"

和中提琴...只需要进行一个新的飞机，脚本，并为每个目标的东西，虽然。它不干净，但适用于没有javaScript体验的人。

来源

2017-07-25 17:28:44

显示鼠标文本在球

回答

相关问题