Particles are not showing

Help & Support
1

particles are not showing in my project.
working fine is playcanvas editor but not in vs code.
here is the link to playcanvas editor project : https://playcanvas.com/editor/scene/1229513
github repo link : https://github.com/umeryounas1236/playcanvas-bgscroller.git

2

I recommend trying to create the particles at runtime first in the Editor environment to ensure that it works there. Chances are that the entity/particle setup is incorrect in the React project.

3

also see here on how to create them from code (if that’s what you do)
http://playcanvas.github.io/#/graphics/particles-spark

1 Like
4

hi @yaustar i did the same thing above i also share a link to editor project in which particles works fine
but in my react project they kind of stuck at the top of screen.i used the same settings as in editor.
i treid to figure out whats the issue but so far no luck finding it.

6

@yaustar @mvaligursky here is my latest code
link to github repo : https://github.com/umeryounas1236/playcanvas-bgscroller.git
link to editor project : https://playcanvas.com/editor/scene/1229513

can u plz compare these .
i m trying really hard but still not able to find the issue.

import React, { useRef, useEffect } from “react”;

import BgImage from “./images/tile_nebula_green.jpeg”;

import ParticleImg from “./images/part_star_dff.jpeg”;

import * as pc from “playcanvas”;

const App = () => {

const canvas = useRef(null);

useEffect(() => {

const app = new pc.Application(canvas.current, {});

app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);

app.setCanvasResolution(pc.RESOLUTION_AUTO);

window.addEventListener("resize", () => app.resizeCanvas());

///--------------Main Camera-----------------/////////

const camera = new pc.Entity("main camera");

camera.enabled = true;

camera.addComponent("camera");

camera.camera.projection = pc.PROJECTION_ORTHOGRAPHIC;

camera.camera.clearColorBuffer = true;

camera.camera.clearDepthBuffer = true;

camera.camera.clearColor = new pc.Color(0, 0, 0);

camera.camera.frustumCulling = true;

camera.camera.orthoHeight = 10;

camera.camera.nearClip = 0.1;

camera.camera.farClip = 1000;

camera.camera.priority = 0;

camera.setLocalPosition(0, 10, 5);

camera.setLocalEulerAngles(-90, -180, 0); ///admin suggest this change before i was using setLocalRotation(x,y,z)

camera.setLocalScale(1, 1, 1);

app.root.addChild(camera);

///Main Camera ends

//------------------bg material---------------//////////

const bgMaterial = new pc.StandardMaterial();

bgMaterial.depthTest = true;

bgMaterial.depthWrite = true;

bgMaterial.cull = pc.CULLFACE_BACK;

bgMaterial.shadingModel = pc.SPECULAR_BLINN;

const asset = new pc.Asset("bg-img", "texture", {

  url: BgImage, //using react its an image

});

asset.preload = true;

app.assets.load(asset);

asset.on("load", (asset) => {

  bgMaterial.emissiveMap = asset.resource;

  bgMaterial.update();

});

//bg material ends

//---------------background script----------------////////////

var Bgscroller = pc.createScript("bgscroller");

Bgscroller.attributes.add("scrollSpeed", {

  type: "number",

  default: 0.1,

});

Bgscroller.attributes.add("tileSizeZ", {

  type: "number",

  default: 30,

});

Bgscroller.prototype._time = 0;

Bgscroller.prototype._startPosition = new pc.Vec3(0, 0, 0);

Bgscroller.prototype.initialize = function () {

  this._startPosition = this.entity.getPosition().clone();

};

Bgscroller.prototype.update = function (dt) {

  // const self = this;

  this._time += dt;

  function repeat(t, length) {

    if (t > 0) return t % length;

    return length + (t % length);

  }

  const newPosition = repeat(this._time * this.scrollSpeed, this.tileSizeZ);

  this.entity.setPosition(

    this._startPosition.clone().add(this.entity.forward).scale(newPosition)

  );

};

///background script ends

//---------------background------------------///////////

const background = new pc.Entity("background");

background.enabled = true;

background.addComponent("model");

background.model.type = "plane";

background.model.material = bgMaterial;

background.model.castShadows = true;

background.model.castShadowsLightmap = true;

background.model.receiveShadows = true;

background.setLocalPosition(0, -10, 0);

background.setLocalScale(15, 1, 30);

background.setLocalEulerAngles(0, 0, 0); ///admin suggest this change before i was using setLocalRotation(x,y,z)

background.addComponent("script");

background.script.create(Bgscroller);

app.root.addChild(background);

//background ends

//----------------background 1---------------///////////

const background1 = new pc.Entity("background 1");

background1.enabled = true;

background1.addComponent("model");

background1.model.type = "plane";

background1.model.material = bgMaterial;

background1.model.castShadows = true;

background1.model.castShadowsLightmap = true;

background1.model.receiveShadows = true;

background1.setLocalPosition(0, 0, 1);

background1.setLocalScale(1, 1, 1);

background1.setLocalEulerAngles(0, 0, 0); ///admin suggest this change before i was using setLocalRotation(x,y,z)

background.addChild(background1);

//background 1 ends

////-----------------------Particles----------------//

// set up random downwards velocity from -0.4 to -0.7

// const velocityCurve = new pc.CurveSet([

//   [0, 0], // x

//   [0, -0.7], // y

//   [0, 0], // z

// ]);

// const velocityCurve2 = new pc.CurveSet([

//   [0, 0], // x

//   [0, -0.4], // y

//   [0, 0], // z

// ]);

// const scaleCurve = new pc.Curve([0, 0.1]);

// const rotCurve = new pc.Curve([0, 100]);

// const rotCurve2 = new pc.Curve([0, -100]);

const Mpart = new pc.Entity("main-particle");

Mpart.enabled = true;

app.root.addChild(Mpart);

Mpart.setLocalPosition(0, -5, 16);

const p1 = new pc.Entity("p1");

p1.addComponent("particlesystem");

p1.particlesystem.autoPlay = true;

p1.particlesystem.numParticles = 200;

p1.particlesystem.lifetime = 10;

p1.particlesystem.rate = 0.8;

p1.particlesystem.rate2 = 1.2;

p1.particlesystem.loop = true;

p1.particlesystem.preWarm = true;

p1.particlesystem.intensity = 1;

p1.particlesystem.sort = pc.PARTICLESORT_NONE;

p1.particlesystem.blend = pc.BLEND_ADDITIVE;

p1.particlesystem.emitterShape = pc.EMITTERSHAPE_BOX;

p1.particlesystem.emitterExtents = new pc.Vec3(15, 1, 1);

// p1.particlesystem.velocityGraph = velocityCurve;

// p1.particlesystem.velocityGraph2 = velocityCurve2;

// p1.particlesystem.scaleGraph = scaleCurve;

// p1.particlesystem.rotationSpeedGraph = rotCurve;

// p1.particlesystem.rotationSpeedGraph2 = rotCurve2;

Mpart.addChild(p1);

const p2 = new pc.Entity("p2");

p2.addComponent("particlesystem");

p2.particlesystem.autoPlay = true;

p2.particlesystem.numParticles = 500;

p2.particlesystem.lifetime = 10;

p2.particlesystem.rate = 0.1;

p2.particlesystem.rate2 = 2.3;

p2.particlesystem.loop = true;

p2.particlesystem.preWarm = true;

p2.particlesystem.intensity = 1;

p2.particlesystem.sort = pc.PARTICLESORT_NONE;

p2.particlesystem.blend = pc.BLEND_ADDITIVE;

p2.particlesystem.emitterShape = pc.EMITTERSHAPE_BOX;

p2.particlesystem.emitterExtents = new pc.Vec3(15, 1, 1);

// p2.particlesystem.velocityGraph = velocityCurve;

// p2.particlesystem.velocityGraph2 = velocityCurve2;

// p2.particlesystem.scaleGraph = scaleCurve;

// p2.particlesystem.rotationSpeedGraph = rotCurve;

// p2.particlesystem.rotationSpeedGraph2 = rotCurve2;

Mpart.addChild(p2);

///Particles end

app.start();

});

return ;

};

export default App;

7

I’m afraid I don’t have time to debug the project. A quick look at the code shows that you aren’t setting any curves so chances are that they are all at 0, 0, 0.

You will need to create and apply curve graphs that match what the Editor sets by default.

Martin linked to the engine example. I recommend starting from that first.

3 Likes
8

i did try code from example it works fine .it just does’ nt work on background.
i will take a through look again.

9

@yaustar