Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Particle system not working with aframe 1.3 #66

Open
Oceanestars opened this issue Apr 30, 2022 · 10 comments
Open

Particle system not working with aframe 1.3 #66

Oceanestars opened this issue Apr 30, 2022 · 10 comments

Comments

@Oceanestars
Copy link

Hi,
This is my first time using this so I'm super sorry if this was mentioned somewhere.
I tried using the particle system to create rain and I tested independently from my project. One with version 1.0 and one with 1.3. It worked with 1.0 but doesn't work with 1.3. Is there something additional I need to do? Thanks!

Aframe Version 1.0

<!DOCTYPE html> 
  <html>
    <head>
      <meta charset="utf-8">
      <title>A-Frame Particle System Component Example</title>
      <meta name="description" content="Hello, World!">
      <script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>
      <script src="aframe.min.js"></script>
      <script src="https://unpkg.com/[email protected]/dist/aframe-animation-component.min.js"></script>
      <script src="https://unpkg.com/[email protected]/dist/aframe-particle-system-component.min.js"></script>
      <script src="https://unpkg.com/aframe-outline@%5E1.1.0/build/aframe-outline.min.js"></script>
      <script src="https://unpkg.com/[email protected]/dist/aframe-extras.animation-mixer.js"></script>
    </head>

    <body>
      <a-scene>
      
      <a-entity position="0 2.25 -15" particle-system="preset: snow"></a-entity>
      
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-box position="-1 0.5 -4" rotation="0 45 0" width="1" height="1" depth="1"  color="#4CC3D9"></a-box>
      <a-cylinder position="1 0.75 -4" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      
      <a-sky color="#000000"></a-sky>
      
      </a-scene>
    </body>
  </html>

Aframe Version 1.3

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>A-Frame Particle System Component Example</title>
    <meta name="description" content="Hello, World!">
    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
    <script src="aframe.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/aframe-animation-component.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/aframe-particle-system-component.min.js"> 
     </script>
    <script src="https://unpkg.com/aframe-outline@%5E1.1.0/build/aframe-outline.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/aframe-extras.animation-mixer.js"></script>
  </head>

  <body>
    <a-scene>
      <a-entity position="0 2.25 -15" particle-system="preset: snow"></a-entity>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-box position="-1 0.5 -4" rotation="0 45 0" width="1" height="1" depth="1"  color="#4CC3D9"></a-box>
      <a-cylinder position="1 0.75 -4" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>

      <a-sky color="#000000"></a-sky>
    </a-scene>
  </body>
</html>
@lijualivenow
Copy link

I am facing the same issue, the particle is not working in Aframe versions 1.1.0, 1.2.0, and 1.3.0. But it is working for 1.0.0 or lower

@robin-price
Copy link

I have the same problem, I think its down to Aframe moving to webgl 2?

https://discourse.threejs.org/t/webgl2-breaking-custom-shader/16603/4

@diarmidmackenzie
Copy link
Contributor

With A-Frame 1.3.0, I hit errors with the version served by unpkg, but everything worked fine with the version taken from the dist folder of this repo.

https://github.com/IdeaSpaceVR/aframe-particle-system-component/blob/master/dist/aframe-particle-system-component.min.js

@dirkk0
Copy link

dirkk0 commented Jun 25, 2022

@diarmidmackenzie thanks!
I was trying it out only with rain which didn't work so I nearly gave up on this.

Turn out you have to add size for some reason, so
<a-entity position="0 3 -5" particle-system="preset: rain; particleCount: 10000; size: 0.1;"></a-entity>
works while
<a-entity position="0 3 -5" particle-system="preset: rain;"></a-entity>
throws errors.

@Shellcial
Copy link

Shellcial commented Jun 25, 2022 •
edited
Loading

@diarmidmackenzie Same method with you.
In short, I copy and paste the latest js inside </script> and it works in A-frame 1.3.0

In my case, I use A-frame 1.3.0 and 8th Wall.
From the UNPKG link, https://unpkg.com/browse/[email protected]/dist/
the latest version is 1.1.3, it will have the below warning and error
| THREE.BufferAttribute: .dynamic has been deprecated. Use .usage instead.
| THREE.BufferGeometry: .addAttribute() has been renamed to .setAttribute().
| THREE.WebGLProgram: Shader Error 0 - VALIDATE_STATUS false Program Info Log: Vertex shader is not compiled. VERTEX ERROR: ...(and a very long error list)

You can see from its latest update in github (4 months ago), the Three.js attribute has been updated. I tried to copy this js and paste in <script> and it works. (of course using the min version will work too)
https://github.com/IdeaSpaceVR/aframe-particle-system-component/blob/master/dist/aframe-particle-system-component.js

@dirkk0 yes, the error said map method can only apply on array. Seems that the size is not set to an array for the preset default: "rain"

@diarmidmackenzie
Copy link
Contributor

diarmidmackenzie commented Jun 27, 2022 •
edited
Loading

Or for a working link from a CDN, I think this ought to work:
https://cdn.jsdelivr.net/gh/IdeaSpaceVR/aframe-particle-system-component@latest/dist/aframe-particle-system-component.min.js

One downside of using this vs. taking a local copy is that this link is not stable, it will automatically update to the latest code on master when it is updated.

@evanmcarlson
Copy link

why is the most recent build not available on unpkg or cdnjs as a release version? is it safe to consider this build v1.1.4?

@vincentfretin
Copy link

vincentfretin commented Jan 5, 2023 •
edited
Loading

Use the latest commit hash in the url to have a stable url
https://cdn.jsdelivr.net/gh/IdeaSpaceVR/aframe-particle-system-component@a7c3d3b/dist/aframe-particle-system-component.min.js
This works on aframe 1.3.0.
For aframe 1.4.0, you will need #68 and create your own build.

@diarmidmackenzie
Copy link
Contributor

For A-Frame 1.4.1 (and also earlier versions) I recommend this version:

https://cdn.jsdelivr.net/gh/c-frame/[email protected]/dist/aframe-particle-system-component.min.js

Includes fixes for #68, #71, along with earlier fixes.

@diarmidmackenzie diarmidmackenzie mentioned this issue Jan 11, 2023
Open
@diarmidmackenzie
Copy link
Contributor

Fixed version also available at: https://www.npmjs.com/package/@c-frame/aframe-particle-system-component

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
8 participants
@vincentfretin @dirkk0 @robin-price @Shellcial @diarmidmackenzie @Oceanestars @evanmcarlson @lijualivenow