Importing to Code

Use EditorConfig to load and configure particle systems from editor exports.

Basic Usage

import { EditorConfig, Particles } from "@threeparticles/core";
import exportData from "./fire-effects-threeparticles.json";
 
const config = EditorConfig.load(exportData).project("Fire Effects").emitter("campfire").build();
 
const particles = new Particles(config);
scene.add(particles);
particles.start();

API

All methods chain together, ending with .build() to produce the final ParticlesConfig.

// Minimal - just project and emitter
const config = EditorConfig.load(data).project("Effects").emitter("fire").build();
 
// With texture loading
const config = EditorConfig.load(data)
  .project("Effects")
  .emitter("fire")
  .onImage((path) => loader.load(path))
  .build();
 
// Access position from builder
const builder = EditorConfig.load(data).project("Effects").emitter("fire");
const position = builder.position; // [x, y, z] | undefined
const config = builder.build();

Method	Description
`EditorConfig.load(data)`	Creates instance from JSON export data
`.project(id)`	Selects a project by ID
`.emitter(id)`	Selects an emitter within the project
`.onImage(resolver)`	Sets texture resolver `(path: string) => THREE.Texture`
`.build()`	Returns final `ParticlesConfig`
`.position`	Get position offset `[x, y, z] \| undefined`

Loading with Textures

The exported JSON stores texture paths as strings. To load the actual textures, use onImage():

import * as THREE from "three/webgpu";
import { EditorConfig, Particles } from "@threeparticles/core";
import exportData from "./effects-threeparticles.json";
 
const loader = new THREE.TextureLoader();
 
const config = EditorConfig.load(exportData)
  .project("Effects")
  .emitter("fire")
  .onImage((path) => loader.load(`/assets/${path}`))
  .build();
 
const particles = new Particles(config);
scene.add(particles);
particles.start();

Multiple Emitters

Load multiple emitters from the same export:

const fireConfig = EditorConfig.load(exportData)
  .project("Campsite")
  .emitter("fire")
  .onImage(resolve)
  .build();
 
const smokeConfig = EditorConfig.load(exportData)
  .project("Campsite")
  .emitter("smoke")
  .onImage(resolve)
  .build();
 
const fire = new Particles(fireConfig);
const smoke = new Particles(smokeConfig);
 
scene.add(fire, smoke);
fire.start();
smoke.start();

Applying Position

Use the position getter to apply the editor's position offset:

const builder = EditorConfig.load(exportData)
  .project("MyProject")
  .emitter("effect")
  .onImage(resolve);
 
const particles = new Particles(builder.build());
if (builder.position) {
  particles.base.position.set(...builder.position);
}

Error Handling

The methods throw if the project or emitter is not found:

try {
  const config = EditorConfig.load(exportData).project("Unknown").emitter("effect").build();
} catch (error) {
  console.error(error.message);
  // "Project "Unknown" not found in export"
}

TypeScript Types

Import the types for full type safety:

import type { ExportProject, ParticlesConfig } from "@threeparticles/core";
 
const data: ExportProject[] = await fetch("/effects.json").then((r) => r.json());

Exporting API Reference