Question

这是我为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），

但除非我没有将悬停文本组件放在正确的位置，否则我无法让它工作。有什么建议？感谢。

Answer 1

使用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"。

Answer 2

真的无法让它发挥作用，但这是有用的：

添加此脚本，该脚本以实体为目标，并切换其不透明度：

<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经验的人。

在鼠标上显示文本

2 个答案: