顯示鼠標文本在球

這是我調整了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

顯示鼠標文本在球

回答

相關問題