How to embedded three.quarksin three.js

Step 1

Install the three.quarks package with

yarn add three.quarks

Or

npm install three.quarks

Step 2

Download atom.json from our Marketplace or your Dashboard

Step 3

Embedded three.quarks json file in three.js

batchSystem = new THREE.QUARKS.BatchedParticleRenderer();
scene.add(batchSystem);
let loader = new THREE.QUARKS.QuarksLoader();
loader.setCrossOrigin("");
loader.load("./atom.json", batchSystem, (object3D)=>{
    particleSystems = object3D;
    scene.add(object3D);
}, ()=>{}, ()=>{});

Update the batch renderer in update loop

 function update(delta) {
    ...
    batchSystem.update(delta);
    ...
} 

Step 2-3 Alternative

How to Initialize a particle system from parameters without json

const batchSystem = new THREE.QUARKS.BatchedParticleRenderer();
const texture = new THREE.TextureLoader().load("atlas.png");
// Particle system configuration
const muzzle = {
    duration: 1,
    looping: false,
    startLife: new THREE.QUARKS.IntervalValue(0.1, 0.2),
    startSpeed: new THREE.QUARKS.ConstantValue(0),
    startSize: new THREE.QUARKS.IntervalValue(1, 5),
    startColor: new THREE.QUARKS.ConstantColor(new THREE.Vector4(1, 1, 1, 1)),
    worldSpace: false,

    maxParticle: 5,
    emissionOverTime: new THREE.QUARKS.ConstantValue(0),
    emissionBursts: [{
        time: 0,
        count: 1,
        cycle: 1,
        interval: 0.01,
        probability: 1,
    }],
    shape: new THREE.QUARKS.PointEmitter(),
    texture: new THREE.MeshBasicMaterial({map: texture, transparent: true, blending: AdditiveBlending}),
    startTileIndex: 91,
    uTileCount: 10,
    vTileCount: 10,
    renderOrder: 2,
    renderMode: RenderMode.Mesh
};

// Create particle system based on your configuration
muzzle1 = new THREE.QUARKS.ParticleSystem(batchSystem, {muzzle});
// developers can customize how the particle system works by
// using existing behavior or adding their own Behavior.
muzzle1.addBehavior(new THREE.QUARKS.ColorOverLife(new THREE.QUARKS.ColorRange(new THREE.Vector4(1, 0.3882312, 0.125, 1), new THREE.Vector4(1, 0.826827, 0.3014706, 1))));
muzzle1.addBehavior(new THREE.QUARKS.SizeOverLife(new THREE.QUARKS.PiecewiseBezier([[new Bezier(1, 0.95, 0.75, 0), 0]])));
// texture atlas animation
muzzle1.addBehavior(new THREE.QUARKS.FrameOverLife(new THREE.QUARKS.PiecewiseBezier([[new Bezier(91, 94, 97, 100), 0]])));
muzzle1.emitter.name = 'muzzle1';
muzzle1.emitter.position.x = 1;

// Add emitter to your Object3D
scene.add(muzzle1.emitter);
scene.add(batchSystem); 
    

Check more examples it Here