### Install and Run Examples Source: https://github.com/alchemist0823/three.quarks/blob/master/README.md Commands to install dependencies, build the project, and run the interactive examples. ```bash npm install npm run build npm run examples ``` -------------------------------- ### Run Project Examples Source: https://github.com/alchemist0823/three.quarks/blob/master/CONTRIBUTING.md Verify that all project examples function correctly. This is a crucial step before submitting a Pull Request. ```bash npm run examples ``` -------------------------------- ### Install three.quarks Source: https://github.com/alchemist0823/three.quarks/blob/master/README.md Install the library using npm. ```bash npm install three.quarks ``` -------------------------------- ### Install and Build Project Dependencies Source: https://github.com/alchemist0823/three.quarks/blob/master/CONTRIBUTING.md Install project dependencies using npm and then build the project. Ensure Node.js and optionally Yarn are installed. ```bash npm install npm run build ``` -------------------------------- ### Install quarks.r3f for React Integration Source: https://github.com/alchemist0823/three.quarks/blob/master/README.md Install the React Three Fiber integration package along with the core library. ```bash npm install quarks.r3f three.quarks ``` -------------------------------- ### Quick Start: Create a Particle System Source: https://github.com/alchemist0823/three.quarks/blob/master/README.md Initialize a particle system with basic properties and add it to the scene and batch renderer. Update the batch renderer in the animation loop. ```javascript import * as THREE from 'three'; import { BatchedRenderer, ParticleSystem, ConstantValue, IntervalValue, ConstantColor, PointEmitter, RenderMode } from 'three.quarks'; // 1. Create the batch renderer (manages all particle systems) const batchRenderer = new BatchedRenderer(); scene.add(batchRenderer); // 2. Define your particle system const particles = new ParticleSystem({ duration: 2, looping: true, startLife: new IntervalValue(1, 2), startSpeed: new ConstantValue(5), startSize: new IntervalValue(0.1, 0.3), startColor: new ConstantColor(new THREE.Vector4(1, 1, 1, 1)), maxParticle: 100, emissionOverTime: new ConstantValue(20), shape: new PointEmitter(), material: new THREE.MeshBasicMaterial({ map: yourTexture, transparent: true }), renderMode: RenderMode.BillBoard }); // 3. Add to scene and renderer scene.add(particles.emitter); batchRenderer.addSystem(particles); // 4. Update in your animation loop function animate() { const delta = clock.getDelta(); batchRenderer.update(delta); renderer.render(scene, camera); requestAnimationFrame(animate); } ``` -------------------------------- ### Importing Three.js and Three.quarks Source: https://github.com/alchemist0823/three.quarks/blob/master/packages/quarks.examples/webgpu.html This snippet shows the necessary imports for using three.js and the three.quarks library in a WebGPU context. Ensure these paths are correct for your project setup. ```javascript { "imports": { "three": "./js/three.module.js", "three.quarks": "./js/three.quarks.esm.js" } } ``` -------------------------------- ### Particle Behaviors with three.quarks Source: https://github.com/alchemist0823/three.quarks/blob/master/packages/quarks.r3f/README.md Shows how to import and use behaviors from 'three.quarks' to animate particle properties over their lifetime. Includes examples for SizeOverLife, ColorOverLife, and SpeedOverLife. ```tsx import { SizeOverLife, ColorOverLife, SpeedOverLife, RotationOverLife, Gradient, PiecewiseBezier, Bezier, Vector4, } from 'three.quarks' const behaviors = useMemo(() => [ // Size fades out new SizeOverLife(new PiecewiseBezier([[new Bezier(1, 0.8, 0.4, 0), 0]])), // Color gradient new ColorOverLife(new Gradient([ [new Vector4(1, 0.8, 0.2, 1), 0], [new Vector4(1, 0.3, 0.1, 1), 0.5], [new Vector4(0.5, 0.1, 0.1, 0), 1], ])), // Speed decay new SpeedOverLife(new PiecewiseBezier([[new Bezier(1, 0.5, 0.2, 0), 0]])), ], []) ``` -------------------------------- ### Quick Start Fire Effect Source: https://github.com/alchemist0823/three.quarks/blob/master/packages/quarks.r3f/README.md A React Three Fiber component demonstrating a fire particle effect using quarks.r3f. It utilizes ConeEmitter and SizeOverLife behaviors. ```tsx import { Canvas } from '@react-three/fiber' import { QuarksProvider, ParticleSystem } from 'quarks.r3f' import { ConeEmitter, SizeOverLife, PiecewiseBezier, Bezier, RenderMode } from 'three.quarks' function FireEffect() { const shape = useMemo(() => new ConeEmitter({ angle: 0.3, radius: 0.2 }), []) const behaviors = useMemo(() => [ new SizeOverLife(new PiecewiseBezier([[new Bezier(1, 0.8, 0.4, 0), 0]])) ], []) return ( ) } function App() { return ( ) } ``` -------------------------------- ### React Three Fiber: Fire Effect Example Source: https://github.com/alchemist0823/three.quarks/blob/master/README.md Define a fire particle effect declaratively using React components and hooks. Ensure the effect is wrapped in QuarksProvider within a Canvas. ```tsx import { Canvas } from '@react-three/fiber' import { QuarksProvider, ParticleSystem } from 'quarks.r3f' import { ConeEmitter, SizeOverLife, PiecewiseBezier, Bezier, RenderMode } from 'three.quarks' function FireEffect() { const shape = useMemo(() => new ConeEmitter({ angle: 0.3, radius: 0.2 }), []) const behaviors = useMemo(() => [ new SizeOverLife(new PiecewiseBezier([[new Bezier(1, 0.5, 0.2, 0), 0]])) ], []) return ( ) } function App() { return ( ) } ``` -------------------------------- ### Run Project Tests Source: https://github.com/alchemist0823/three.quarks/blob/master/CONTRIBUTING.md Execute all project tests to ensure code quality and functionality. This command should be run before submitting a Pull Request. ```bash npm test ``` -------------------------------- ### useParticleSystem Hook Source: https://github.com/alchemist0823/three.quarks/blob/master/packages/quarks.r3f/README.md Imperatively create particle systems using the useParticleSystem hook. Returns system, emitter, and control methods. ```tsx import { useParticleSystem } from 'quarks.r3f' function MyParticles() { const { system, emitter, play, pause, restart } = useParticleSystem({ duration: 5, looping: true, startLife: [1, 2], // ... other props }) return } ``` -------------------------------- ### useParticleSystem Hook Source: https://github.com/alchemist0823/three.quarks/blob/master/packages/quarks.r3f/README.md Imperative hook for creating particle systems with configurable properties. ```APIDOC ## useParticleSystem(props) ### Description Imperative hook for creating particle systems. ### Usage ```tsx import { useParticleSystem } from 'quarks.r3f' function MyParticles() { const { system, emitter, play, pause, restart } = useParticleSystem({ duration: 5, looping: true, startLife: [1, 2], // ... other props }) return } ``` ``` -------------------------------- ### Emitter Shapes in three.quarks Source: https://github.com/alchemist0823/three.quarks/blob/master/packages/quarks.r3f/README.md Illustrates how to import and instantiate different emitter shapes from 'three.quarks', including ConeEmitter, SphereEmitter, and PointEmitter, with their common configuration options. ```tsx import { ConeEmitter, SphereEmitter, PointEmitter } from 'three.quarks' // Cone emitter (good for fire, fountains) const cone = new ConeEmitter({ angle: 0.3, radius: 0.2, arc: Math.PI * 2 }) // Sphere emitter (good for explosions, magic effects) const sphere = new SphereEmitter({ radius: 0.5, thickness: 0.2 }) // Point emitter const point = new PointEmitter() ``` -------------------------------- ### Play Multiple Effect Instances Source: https://github.com/alchemist0823/three.quarks/blob/master/README.md Clone a loaded effect to play multiple instances simultaneously. Use QuarksUtil to manage playback and auto-cleanup. ```javascript // Clone and play the effect multiple times const instance = loadedEffect.clone(); scene.add(instance); QuarksUtil.addToBatchRenderer(instance, batchRenderer); QuarksUtil.setAutoDestroy(instance, true); // Auto-cleanup when finished QuarksUtil.play(instance); ``` -------------------------------- ### Load VFX from JSON Source: https://github.com/alchemist0823/three.quarks/blob/master/README.md Load a pre-designed effect from a JSON file and add it to the batch renderer. Ensure the effect is added to the scene. ```javascript import { QuarksLoader, QuarksUtil, BatchedRenderer } from 'three.quarks'; const batchRenderer = new BatchedRenderer(); const loader = new QuarksLoader(); loader.load('effects/explosion.json', (effect) => { QuarksUtil.addToBatchRenderer(effect, batchRenderer); scene.add(effect); }); scene.add(batchRenderer); ``` -------------------------------- ### Flexible Prop Types for Particle Properties Source: https://github.com/alchemist0823/three.quarks/blob/master/packages/quarks.r3f/README.md Demonstrates the different types of values that can be assigned to particle properties like startLife, startSpeed, and startSize. Supports constant values, random ranges, and custom value generators. ```tsx startLife={2} ``` ```tsx startLife={[1, 3]} ``` ```tsx startLife={new IntervalValue(1, 3)} ``` ```tsx startLife={new PiecewiseBezier([[new Bezier(1, 2, 3, 4), 0]])} ``` -------------------------------- ### useQuarks Hook Source: https://github.com/alchemist0823/three.quarks/blob/master/packages/quarks.r3f/README.md Access the BatchedRenderer from context for advanced operations. ```APIDOC ## useQuarks() ### Description Access the BatchedRenderer from context. ### Usage ```tsx import { useQuarks } from 'quarks.r3f' function MyComponent() { const { batchedRenderer } = useQuarks() // Use for advanced operations } ``` ``` -------------------------------- ### ParticleSystem Component Source: https://github.com/alchemist0823/three.quarks/blob/master/packages/quarks.r3f/README.md Declarative particle system component with flexible prop types for configuring particle emission and behavior. ```APIDOC ## ParticleSystem ### Description Declarative particle system component with flexible prop types. ### Props | Prop | Type | Description | |------|------|-------------| | `duration` | `number` | System duration in seconds | | `looping` | `boolean` | Whether to loop the system | | `startLife` | `number | [min, max] | ValueGenerator` | Particle lifetime | | `startSpeed` | `number | [min, max] | ValueGenerator` | Initial particle speed | | `startSize` | `number | [min, max] | ValueGenerator` | Initial particle size | | `startColor` | `{r,g,b,a} | ColorGenerator` | Initial particle color | | `startRotation` | `number | [min, max] | ValueGenerator` | Initial rotation | | `emissionOverTime` | `number | [min, max] | ValueGenerator` | Particles per second | | `shape` | `EmitterShape` | Emitter shape (ConeEmitter, SphereEmitter, etc.) | | `material` | `Material` | Three.js material for particles | | `renderMode` | `RenderMode` | BillBoard, StretchedBillBoard, Mesh, Trail | | `behaviors` | `Behavior[]` | Array of particle behaviors | | `uTileCount` | `number` | Texture atlas horizontal tiles | | `vTileCount` | `number` | Texture atlas vertical tiles | | `worldSpace` | `boolean` | Emit in world space | | `position` | `[x, y, z]` | Emitter position | | `rotation` | `[x, y, z]` | Emitter rotation (Euler angles) | | `scale` | `[x, y, z]` | Emitter scale | | `autoPlay` | `boolean` | Start playing automatically (default: true) | ### Ref API ```tsx const systemRef = useRef(null) // Control methods systemRef.current.play() systemRef.current.pause() systemRef.current.restart() systemRef.current.stop() // Access underlying objects systemRef.current.system // ParticleSystem instance systemRef.current.emitter // ParticleEmitter (Object3D) ``` ``` -------------------------------- ### ParticleSystem Ref API Source: https://github.com/alchemist0823/three.quarks/blob/master/packages/quarks.r3f/README.md Control particle systems imperatively using a ref. Access underlying system and emitter objects. ```tsx const systemRef = useRef(null) // Control methods systemRef.current.play() systemRef.current.pause() systemRef.current.restart() systemRef.current.stop() // Access underlying objects systemRef.current.system // ParticleSystem instance systemRef.current.emitter // ParticleEmitter (Object3D) ``` -------------------------------- ### useQuarks Hook Source: https://github.com/alchemist0823/three.quarks/blob/master/packages/quarks.r3f/README.md Access the BatchedRenderer from context using the useQuarks hook for advanced operations. ```tsx import { useQuarks } from 'quarks.r3f' function MyComponent() { const { batchedRenderer } = useQuarks() // Use for advanced operations } ``` -------------------------------- ### QuarksEffect Component Source: https://github.com/alchemist0823/three.quarks/blob/master/packages/quarks.r3f/README.md Load particle effects from JSON files with React Suspense support. ```APIDOC ## QuarksEffect ### Description Load particle effects from JSON files with React Suspense support. ### Usage ```tsx import { Suspense } from 'react' import { QuarksEffect } from 'quarks.r3f' function MyEffect() { return ( ) } // Preload effects QuarksEffect.preload('/effects/explosion.json') ``` ``` -------------------------------- ### QuarksProvider Component Source: https://github.com/alchemist0823/three.quarks/blob/master/packages/quarks.r3f/README.md The QuarksProvider is a required wrapper component that manages the BatchedRenderer for all child particle systems. All particle systems must be children of QuarksProvider. ```APIDOC ## QuarksProvider ### Description Required wrapper component that manages the `BatchedRenderer` for all child particle systems. ### Usage ```tsx {/* All particle systems must be children of QuarksProvider */} ``` ``` -------------------------------- ### QuarksProvider Usage Source: https://github.com/alchemist0823/three.quarks/blob/master/packages/quarks.r3f/README.md The QuarksProvider must wrap all particle systems. It manages the BatchedRenderer. ```tsx {/* All particle systems must be children of QuarksProvider */} ``` -------------------------------- ### QuarksEffect Component Source: https://github.com/alchemist0823/three.quarks/blob/master/packages/quarks.r3f/README.md Load particle effects from JSON files with React Suspense support. Use Suspense for fallback. ```tsx import { Suspense } from 'react' import { QuarksEffect } from 'quarks.r3f' function MyEffect() { return ( ) } // Preload effects QuarksEffect.preload('/effects/explosion.json') ``` -------------------------------- ### useQuarksEffect Hook Source: https://github.com/alchemist0823/three.quarks/blob/master/packages/quarks.r3f/README.md Load JSON effects with Suspense using the useQuarksEffect hook. Returns group, systems, and control methods. ```tsx import { useQuarksEffect } from 'quarks.r3f' function MyEffect() { const { group, systems, play, pause, restart } = useQuarksEffect('/effect.json') return } // Preload useQuarksEffect.preload('/effect.json') ``` -------------------------------- ### useQuarksEffect Hook Source: https://github.com/alchemist0823/three.quarks/blob/master/packages/quarks.r3f/README.md Hook for loading JSON effects with Suspense, providing access to the effect group and control methods. ```APIDOC ## useQuarksEffect(url) ### Description Hook for loading JSON effects with Suspense. ### Usage ```tsx import { useQuarksEffect } from 'quarks.r3f' function MyEffect() { const { group, systems, play, pause, restart } = useQuarksEffect('/effect.json') return } // Preload useQuarksEffect.preload('/effect.json') ``` ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.