Какое правильное решение для рендеринга SVG-иконок внутри A-Frame, чтобы я не получал этот размытый эффект на некоторых моих графиках?

Question

My A-frame app - это базовый тур по 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, чтобы они не занимали одну и ту же плоскость.