[SOLVED] How to replace ./images/star2.png with image texture src in particle-system="preset: dust; texture: ./images/star2.png; particleCount: 2000;

How to replace ./images/star2.png with image texture src in particle-system="preset: dust; texture: ./images/star2.png; particleCount: 2000;

I am working on an aframe ar app on 8thwall. I am using particle system. Seems that the texture is not loaded from the local system. How can I replace the texture path with an http link?

The code extract that does not work is below

<a-scene> 
<a-entity
    id="model"
    gltf-model="#art"
    visible="false"
    shadow="receive: false"
    xrextras-hold-drag
    xrextras-two-finger-rotate
    xrextras-pinch-scale
    position="0 0 0"
    scale="0.3 0.3 0.3"
    rotation="0 0 0"
    particle-system="preset: dust; texture: ./images/star2.png; particleCount: 2000; 
    cubemap-realtime>
  </a-entity>
</a-scene>

Solution

If you want to provide a link, you can just paste it where the texture is expected:

particle-system="texture: https://website/image.jpg"

Indeed the particles look blank at first. But if you move close, the image is there, but its washed out, and bright. So i guess the preset also changes color, opacity, and the blending mode.

If you change it to white (color) / 1 (opacity) / normal (blending), the image looks correctly:

<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="https://ideaspacevr.github.io/aframe-particle-system-component/dist/aframe-particle-system-component.js"></script>
<a-scene>
  <a-entity particle-system="preset: dust; texture: https://i.imgur.com/wjobVTN.jpeg; 
            particleCount: 2000; color: #FFFFFF; opacity: 1;blending: 1;">
  </a-entity>
</a-scene>