gurifyuanin / three-particle

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

Three-particle

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.

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:

<!-- cdn -->
<script src="https://unpkg.com/three"></script>
<script src="https://unpkg.com/three-particle"></script>

<!-- local file -->
<script src="node_modules/three/build/three.min.js"></script>
<script src="node_modules/three-particle/dist/index.js"></script>

Documents

• API Document
• 接口文档
• HTML entry

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

• typescript-library-template
• jslib-base