aframe-particle-system-component
aframe-particle-system-component copied to clipboard
IdeaSpaceVR
Particle system not working with aframe 1.3
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>
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
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
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
@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.
@diarmidmackenzie Same method with you.
In short, I copy and paste the latest js inside
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
@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"
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.
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?
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.
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.
Fixed version also available at: https://www.npmjs.com/package/@c-frame/aframe-particle-system-component