three-vignette-background

(demo)

A soft vignette background for ThreeJS demos with a simplex noise grain. This returns a THREE.Mesh with a plane geometry and a shader which does not project into camera space, and so it fits across the entire device viewport.

Currently, browserify is required to use this module as it has a hard dependency on glslify, a browserify transform.

Also see gl-vignette-background.

Install

npm install three-vignette-background --save

Example

var createOrbitViewer = require('three-orbit-viewer')(THREE)
var createBackground = require('./')

var app = createOrbitViewer({
  clearColor: 'rgb(40, 40, 40)',
  clearAlpha: 1.0,
  fov: 55,
  position: new THREE.Vector3(0, 2, -2)
})

// add a default background
var background = createBackground()
app.scene.add(background)

// ... setup rest of scene ...

See demo.js for another usage example.

Usage

background = createBackground([opt])

Creates a new vignette background with some default options. Turning the grainScale or noiseAlpha to zero will not compute the grain noise.

• geometry the geometry to use, defaults to new PlaneGeometry(2, 2, 1)
• colors an array of two colors to use; either strings or THREE.Color objects; default [ '#fff', '#283844' ]
• aspect aspect ratio for grain and vignette; default 1
• grainScale how large to scale the grain particles, default 0.005
• grainTime the time offset for animating grain; default 0
• noiseAlpha the alpha to blend the noise onto the background, default 0.25
• smooth an [x, y] array or THREE.Vector2 with the low and high smoothstep values for the vignetting, default [ 0, 1 ]
• scale a number, [x, y] array, or THREE.Vector2 with the scaling for the vignette, default 1
• offset a [x, y] array or THREE.Vector2 to offset the vignette; default [0, 0]
• aspectCorrection a boolean, default false, as to whether to correct the vignette scale to the aspect value

background.style(opt)

Re-style the background. Any values that are specified in opt will be set, others will not be changed. Takes all the same values except geometry, which must be set at creation time.

License

MIT, see LICENSE.md for details.