# three-effectcomposer-es6

> @alteredq's EffectComposer plugin for three.js ported for use with ES6

Latest version **0.0.4** (published 2016-12-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install three-effectcomposer-es6
pnpm add three-effectcomposer-es6
yarn add three-effectcomposer-es6
bun add three-effectcomposer-es6
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.4 |
| Published | 2016-12-20 |
| First published | 2016-12-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | alteredq |
| Maintainers | superhighfives |
| Keywords | three, composer, effect, post, processing, shader, fragment, render |

## Links

- npm: https://www.npmjs.com/package/three-effectcomposer-es6
- Repository: https://github.com/superhighfives/three-effectcomposer-es6
- Homepage: https://github.com/superhighfives/three-effectcomposer-es6#readme
- Issues: https://github.com/superhighfives/three-effectcomposer-es6/issues
- npm.io page: https://npm.io/package/three-effectcomposer-es6

## Recent versions

- 0.0.4 (latest) — 2016-12-20
- 0.0.3 — 2016-12-15
- 0.0.2 — 2016-12-14
- 0.0.1 — 2016-12-13

## README

# three-effectcomposer-es6 #

ES6-friendly version of `THREE.EffectComposer`, which offers a quick
GLSL post-processing implementation.

Full credit goes to [@alteredq](http://github.com/alteredq) for writing this,
and to [@hughsk](http://github.com/hughsk) for the Browserify-friendly version. The original source can be found
[here](http://mrdoob.github.com/three.js/examples/webgl_postprocessing.html).

## Installation ##

``` bash
npm install three-effectcomposer-es6
```

## Usage ##

``` javascript
import { WebGLRenderer, Scene, PerspectiveCamera } from 'three'
import EffectComposer, { RenderPass, ShaderPass, CopyShader } from 'three-effectcomposer-es6'

class Main {
  constructor () {
    const renderer = new WebGLRenderer()
    const scene = new Scene()
    const camera = new PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000)

    // When you've made your scene, create your composer and first RenderPass
    this.composer = new EffectComposer(renderer)
    this.composer.addPass(new RenderPass(scene, camera))

    // Add shaders! Celebrate!
    // const someShaderPass = new ShaderPass(SomeShader)
    // this.composer.addPass(someShaderPass)

    // And draw to the screen
    const copyPass = new ShaderPass(CopyShader)
    copyPass.renderToScreen = true
    this.composer.addPass(copyPass)
  }

  animate () {
    // Instead of calling renderer.render, use
    // composer.render instead:
    this.composer.render()
    window.requestAnimationFrame(this.animate)
  }
}

const main = new Main()
main.animate()
```

---
_Source: https://npm.io/package/three-effectcomposer-es6 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._