AFrame射线投射器的`objects`字段不适用于自定义光标原始对象。

huangapple
go评论44阅读模式
英文:

AFrame raycaster `objects` field not working for custom cursor primitive

问题

我正在尝试注册一个自定义光标原语，但是射线投射器似乎无法检测到具有clickable类的对象。

以下是我的代码：

AFRAME.registerPrimitive('a-animated-cursor', {
  defaultComponents: {
    raycaster: {
      objects: '.clickable',
    },
    cursor: {
      rayOrigin: 'mouse',
      fuseTimeout: '500',
    },
    geometry: {
      primitive: 'ring',
      radiusOuter: 0.016,
      radiusInner: 0.01,
      segmentsTheta: 32,
    },
    material: {
      color: 'white',
      shader: 'flat',
      opacity: 0.8,
    },
    position: {
      x: 0,
      y: 0,
      z: -1,
    },
    animation__click: {
      property: 'scale',
      startEvents: 'click',
      easing: 'easeInCubic',
      dur: 150,
      from: {
        x: 0.1,
        y: 0.1,
        z: 0.1,
      },
      to: {
        x: 1,
        y: 1,
        z: 1,
      },
    },
    animation__fusing: {
      property: 'scale',
      startEvents: 'fusing',
      easing: 'easeInCubic',
      dur: 1500,
      from: {
        x: 1,
        y: 1,
        z: 1,
      },
      to: {
        x: 0.1,
        y: 0.1,
        z: 0.1,
      },
    },
    animation__mouseleave: {
      property: 'scale',
      startEvents: 'mouseleave',
      easing: 'easeInCubic',
      dur: 500,
      to: {
        x: 1,
        y: 1,
        z: 1,
      },
    },
  },
});

以下是光标的工作方式，它不是一个原语：

<a-cursor
  id="cursor"
  color="white"
  rayOrigin="mouse"
  raycaster="objects: .clickable"
  fuseTimeout="500"
  animation__click="property: scale; startEvents: click; easing: easeInCubic; dur: 150; from: 0.1 0.1 0.1; to: 1 1 1"
  animation__fusing="property: scale; startEvents: fusing; easing: easeInCubic; dur: 1500; from: 1 1 1; to: 0.1 0.1 0.1"
  animation__mouseleave="property: scale; startEvents: mouseleave; easing: easeInCubic; dur: 500; to: 1 1 1"
></a-cursor>
英文:

I'm trying to register a custom cursor primitive, however, the raycaster doesn't seem to detect objects with the clickable class

Here's my code:

AFRAME.registerPrimitive(&#39;a-animated-cursor&#39;, {
  defaultComponents: {
    raycaster: {
      objects: &#39;.clickable&#39;,
    },
    cursor: {
      rayOrigin: &#39;mouse&#39;,
      fuseTimeout: &#39;500&#39;,
    },
    geometry: {
      primitive: &#39;ring&#39;,
      radiusOuter: 0.016,
      radiusInner: 0.01,
      segmentsTheta: 32,
    },
    material: {
      color: &#39;white&#39;,
      shader: &#39;flat&#39;,
      opacity: 0.8,
    },
    position: {
      x: 0,
      y: 0,
      z: -1,
    },
    animation__click: {
      property: &#39;scale&#39;,
      startEvents: &#39;click&#39;,
      easing: &#39;easeInCubic&#39;,
      dur: 150,
      from: {
        x: 0.1,
        y: 0.1,
        z: 0.1,
      },
      to: {
        x: 1,
        y: 1,
        z: 1,
      },
    },
    animation__fusing: {
      property: &#39;scale&#39;,
      startEvents: &#39;fusing&#39;,
      easing: &#39;easeInCubic&#39;,
      dur: 1500,
      from: {
        x: 1,
        y: 1,
        z: 1,
      },
      to: {
        x: 0.1,
        y: 0.1,
        z: 0.1,
      },
    },
    animation__mouseleave: {
      property: &#39;scale&#39;,
      startEvents: &#39;mouseleave&#39;,
      easing: &#39;easeInCubic&#39;,
      dur: 500,
      to: {
        x: 1,
        y: 1,
        z: 1,
      },
    },
  },
});

And here's the working of the cursor, which isn't a primitive:

      &lt;a-cursor
        id=&quot;cursor&quot;
        color=&quot;white&quot;
        rayOrigin=&quot;mouse&quot;
        raycaster=&quot;objects: .clickable&quot;
        fuseTimeout=&quot;500&quot;
        animation__click=&quot;property: scale; startEvents: click; easing: easeInCubic; dur: 150; from: 0.1 0.1 0.1; to: 1 1 1&quot;
        animation__fusing=&quot;property: scale; startEvents: fusing; easing: easeInCubic; dur: 1500; from: 1 1 1; to: 0.1 0.1 0.1&quot;
        animation__mouseleave=&quot;property: scale; startEvents: mouseleave; easing: easeInCubic; dur: 500; to: 1 1 1&quot;
      &gt;&lt;/a-cursor&gt;

答案1

得分: 1

我认为它正在点击，但动画改变了 "to" 对象，所以它卡住了。如果您提供一个字符串比例，它似乎可以工作：

const box = document.querySelector("a-box")
box.addEventListener("click", () => {
  // 点击时随机颜色
  let hex = '#' + (Math.random() * 0xFFFFFF << 0).toString(16).padStart(6, '0');
  box.setAttribute("color", hex)
})

<script src="https://aframe.io/releases/1.4.1/aframe.min.js"></script>
<script>
  AFRAME.registerPrimitive('a-animated-cursor', {
    defaultComponents: {
      cursor: {
        rayOrigin: 'entity',
        fuseTimeout: '500',
        fuse: true
      },
      raycaster: {
        objects: '.clickable',
      },
      geometry: {
        primitive: 'ring',
        radiusOuter: 0.016,
        radiusInner: 0.01,
        segmentsTheta: 32,
      },
      material: {
        color: 'black',
        shader: 'flat',
      },
      position: { x: 0, y: 0, z: -1 },
      animation__fusing: {
        property: 'scale',
        startEvents: 'fusing',
        easing: 'easeInCubic',
        dur: 500,
        from: "1 1 1",
        to: "0.1 0.1 0.1"
      },
      animation__click: {
      property: 'scale',
      startEvents: 'click',
      easing: 'easeInCubic',
      dur: 150,
      to: "1 1 1",
      from: "0.1 0.1 0.1"
    },
    animation__mouseleave: {
      property: 'scale',
      startEvents: 'mouseleave',
      easing: 'easeInCubic',
      dur: 500,
      to: "1 1 1"
    }
   },
  });
</script>

<a-scene>
  <a-camera>
    <a-animated-cursor></a-animated-cursor>
  </a-camera>
  <a-box class="clickable" position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
  <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
</a-scene>

请注意，这只是提供了代码的翻译，没有其他内容。

英文:

I think it's clicking, but the animation changes the "to" object, so it gets stuck. If you provide a string scale, it seems to be working:

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-js -->

const box = document.querySelector(&quot;a-box&quot;)
box.addEventListener(&quot;click&quot;, () =&gt; {
// random color on click
let hex = &#39;#&#39;+(Math.random() * 0xFFFFFF &lt;&lt; 0).toString(16).padStart(6, &#39;0&#39;);
box.setAttribute(&quot;color&quot;, hex)
})

<!-- language: lang-html -->

&lt;script src=&quot;https://aframe.io/releases/1.4.1/aframe.min.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
AFRAME.registerPrimitive(&#39;a-animated-cursor&#39;, {
defaultComponents: {
cursor: {
rayOrigin: &#39;entity&#39;,
fuseTimeout: &#39;500&#39;,
fuse: true
},
raycaster: {
objects: &#39;.clickable&#39;,
},
geometry: {
primitive: &#39;ring&#39;,
radiusOuter: 0.016,
radiusInner: 0.01,
segmentsTheta: 32,
},
material: {
color: &#39;black&#39;,
shader: &#39;flat&#39;,
},
position: { x: 0, y: 0, z: -1 },
animation__fusing: {
property: &#39;scale&#39;,
startEvents: &#39;fusing&#39;,
easing: &#39;easeInCubic&#39;,
dur: 500,
from: &quot;1 1 1&quot;,
to: &quot;0.1 0.1 0.1&quot;
},
animation__click: {
property: &#39;scale&#39;,
startEvents: &#39;click&#39;,
easing: &#39;easeInCubic&#39;,
dur: 150,
to: &quot;1 1 1&quot;,
from: &quot;0.1 0.1 0.1&quot;
},
animation__mouseleave: {
property: &#39;scale&#39;,
startEvents: &#39;mouseleave&#39;,
easing: &#39;easeInCubic&#39;,
dur: 500,
to: &quot;1 1 1&quot;
}
},
});
&lt;/script&gt;
&lt;a-scene&gt;
&lt;a-camera&gt;
&lt;a-animated-cursor&gt;&lt;/a-animated-cursor&gt;
&lt;/a-camera&gt;
&lt;a-box class=&quot;clickable&quot; position=&quot;-1 0.5 -3&quot; rotation=&quot;0 45 0&quot; color=&quot;#4CC3D9&quot;&gt;&lt;/a-box&gt;
&lt;a-plane position=&quot;0 0 -4&quot; rotation=&quot;-90 0 0&quot; width=&quot;4&quot; height=&quot;4&quot; color=&quot;#7BC8A4&quot;&gt;&lt;/a-plane&gt;
&lt;/a-scene&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月12日 23:10:37
  • 转载请务必保留本文链接：https://go.coder-hub.com/76458002.html
  • aframe
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定