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.
npm install three-vignette-background --save
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.
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 tonew PlaneGeometry(2, 2, 1)
colors
an array of two colors to use; either strings orTHREE.Color
objects; default[ '#fff', '#283844' ]
aspect
aspect ratio for grain and vignette; default 1grainScale
how large to scale the grain particles, default 0.005grainTime
the time offset for animating grain; default 0noiseAlpha
the alpha to blend the noise onto the background, default 0.25smooth
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 1offset
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 theaspect
value
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.
MIT, see LICENSE.md for details.