search

hiukim / mind-ar-js

Web Augmented Reality. Image Tracking, Face Tracking. Tensorflow.js
MIT License
2.24k stars 417 forks source link

Aframe particles system component does not work with MindAR? #93

Closed RajSriShanker closed 2 years ago

RajSriShanker commented 2 years ago

I'm having issues getting any sort of particle system to be incorporated with MindAR, the particle do not seem to visible no matter the values I incorporate. Anyone else also getting this issue?

This is the particle system I am using to get particle to appear: https://www.npmjs.com/package/aframe-particle-system-component

vincentfretin commented 2 years ago

If you're using aframe 1.2.0, the latest release of https://www.npmjs.com/package/aframe-particle-system-component is not compatible with the THREE version included in aframe 1.2.0. An update was merged in October 2021 in the master branch https://github.com/IdeaSpaceVR/aframe-particle-system-component that is compatible with aframe 1.2.0, but is not yet released. You can use the master build like this:

<script src="https://cdn.jsdelivr.net/gh/IdeaSpaceVR/aframe-particle-system-component@master/dist/aframe-particle-system-component.min.js"></script>
RajSriShanker commented 2 years ago

@vincentfretin thank you for the clarification

I've added <script src="https://cdn.jsdelivr.net/gh/IdeaSpaceVR/aframe-particle-system-component@master/dist/aframe-particle-system-component.min.js"></script>

and also incorporated the preset <a-entity position="0 2.25 -15" particle-system="preset: snow"></a-entity>

However I'm still unable to see any particles being emitted within my marker scene. I've changed the position, size and texture. Have you incorporated particles before? If so do you have a basic example of this with MindAR marker? 

<head>
  <meta charset="utf-8">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <!--Need this for iOS-->
  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  <!--Need this for Android-->
  <script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.0.0/dist/mindar-image.prod.js"></script>
  <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.0.0/dist/mindar-image-aframe.prod.js"></script>
  <script
    src="https://cdn.jsdelivr.net/gh/IdeaSpaceVR/aframe-particle-system-component@master/dist/aframe-particle-system-component.min.js"></script>
  <script src="script.js"></script>
  <link rel="stylesheet" href="styles.css">
</head>
<a-scene mindar-image="uiScanning: #example-scanning-overlay; imageTargetSrc:businesscard_qrmarker_5.mind"
    vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false" loading-screen="enabled: false">
    <!--Asset Management-->
    <a-assets>
    </a-assets>
    <!--Camera-->
    <a-camera position="0 0 0" look-controls="enabled: false" cursor="fuse: false; rayOrigin: mouse;"
      raycaster="far: 10000;objects: .clickable"></a-camera>
    <!--Main Scene Area-->
    <a-entity id="marker-target" mindar-image-target="targetIndex: 0">
      <a-entity position="0 2.25 -15" particle-system="preset: snow"></a-entity>
    </a-entity>
  </a-scene>

Thank you for the help regardless!

vincentfretin commented 2 years ago

We have the snow particles on the networked-aframe examples https://github.com/networked-aframe/networked-aframe Does this work directly in <a-scene> ? If you don't see the snow only when you put the particle-system as a child of a marker, then I can't help you further, I never used mind-ar-js.

RajSriShanker commented 2 years ago

I'm such a idiot, thank you @vincentfretin I got it working! I put the the particle entity outside on of the marker section and it started working!

vincentfretin commented 2 years ago

Ok, I'm glad it works for you. I thought you wanted the snow only after having scanned the marker or something like that. If you want such thing, if there is an event emitted when a marker is scanned (I don't know the lib, so I don't know if there is one), you can probably add the particule-system dynamically with javascript. You can close the issue and mark as answered the discussion if it's ok for you.