Skip to content
A three.js based particle script to create particle system easily and efficiently.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
config
demo
dist
doc
server
src
test
.DS_Store
.babelrc
.editorconfig
.eslintrc.js
.gitignore
.npmignore
.nycrc
.nycrc-ts
.travis.yml
CHANGELOG.md
CHANGELOG.zh-CN.md
LICENSE
README.md
TODO.md
package-lock.json
package.json
tsconfig.json
tslint.json

README.md

Three-particle

license Build Status npm NPM downloads Percentage of issues still open

A three.js based particle script to create particle system easily and efficiently.

Compatibility

Unit tests guarantee support on the following environment:

IE CH FF SF OP IOS Android Node
6+ 29+ 55+ 9+ 50+ 9+ 4+ 4+

Note: Compiling code depend on ES5, so you need import es5-shim to compatible with IE6-8, here is a demo

Directory

├── demo - Using demo
├── dist - Compiler output code
├── doc - Project documents
├── src - Source code directory
├── server - Start a local server when dev
├── test - Unit tests
├── CHANGELOG.md - Change log
└── TODO.md - Planned features

Demo

You can view example on Github page !

Usage

Using npm, download and install the code.

$ npm install --save three three-particle

For webpack or similar environment:

import * as THREE from 'three'; // based lib
import * as TP from 'three-particle';

// same as three.js
// create renderer, scene, camera, etc...
const renderer = new THREE.WebGLRenderer();
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// what you really need to do
// create particle system by three-particle
const emitter = new TP.ExplosionEmitter();
const sphere = new TP.Sphere();
emitter.addParticle(sphere);
scene.add(emitter);

(function render() {
    requestAnimationFrame(render);
    emitter.update(); // if not, particles will not be updated
    renderer.render(scene, camera);
})();

For commonjs environment:

const THREE = require('three');
const TP = require('three-particle');

For browser environment:

<script src="https://unpkg.com/three@0.102.1/build/three.js"></script>
<script src="node_modules/three-particle/dist/index.js"></script>

Documents

Contribution Guide

How to switch JS and TS

  • srctype and scripts in package.json
  • require file of test/test.js
  • require file of test/browser/index.html

For the first time to run, you need to install dependencies firstly.

$ npm install

To develop the project:

$ npm run dev

You can start up a local server to load some static resource (eg: font, img) when using font-loader or image-texture. Then visit localhost:1234 in your browser.

$ npm run serve

To build the project:

$ npm run build

To run unit tests:

$ npm test

Note: The browser environment needs to be tested manually under test/browser

Modify the version number in package.json, modify the version number in README.md, modify the CHANGELOG.md, and then release the new version.

$ npm run release

Publish the new version to NPM.

$ npm publish

Warning

Please don't update npm package rollup-plugin-typescript2, or you will get an error.

[!] Error: Entry module cannot be external

Contributors

contributors

Change Log

CHANGELOG.md

TODO

TODO.md

Current Users

Relative links

You can’t perform that action at this time.