svg - 在 A-Frame 中渲染 SVG 图标的正确解决方案是什么，这样我的某些图形就不会出现这种模糊效果？

Question

我的 A-frame 应用程序是一个基本的 360 照片之旅。正如您在下面看到的，我正在为游览“热点”渲染 svg 图标。一些图标加载正常，但其他图标对它们有模糊效果。如果它有助于我创建 codepen 来展示我如何实现 SVG 图标：https ://codepen.io/trentontri/pen/JQyNrE

<a-scene cursor="rayOrigin: mouse">
 <a-assets>
  <a-mixin id="icon-animation" geometry="primitive: ring; radiusInner: 0.5; radiusOuter: 0.8;" material="color: #fff; opacity: 0.5" animation="property: geometry.radiusOuter; from: 0.8; to: 1.2; dur: 1000; easing: easeInOutSine; dir:alternate; loop: true;">
 </a-mixin>
 <a-asset-item id="icon-plus" src="https://gist.githubusercontent.com/trentontri/876c8050c5353ef44dcb1bada768c6a9/raw/e116742c4d461e0d404e60e07fe6c785a781c0ba/icon-plus.svg"></a-asset-item>
 </a-assets>

<a-entity position="0 1.8 -3">
 <a-entity mixin="icon-animation">
  <a-entity svg="src: #icon-plus;"></a-entity>
 </a-entity>
</a-entity>

 <a-entity id="rig">
  <a-entity id="camera" camera look-controls></a-entity>
 </a-entity>
</a-scene>

Answer 1

看起来您的+符号与蓝色圆圈在 z 轴交战。见这里：https : //en.wikipedia.org/wiki/Z-fighting 给他们一个不同的 position.z 值，这样他们就不会占据同一个平面。