parallax-effect 

Parallax effect in javascript using face tracking, can be a good improvement for 3d scenes. This library uses TFJS with WASM backend on CPU, so your GPU will be free. Supports lazy loading.

Inspired by @lucknknock C# demo

$3

* deepview
* pixi.js
* three.js


$3

Run npm install parallax-effect and import it as ES module
``js
import * as Parallax from '../dist/parallax-effect.mjs';
Parallax.init( view => {
console.log( view );
} );
`
or add it in script tag
`js


`

$3


View in code below is a 3d vector with components similar to spherical coordinates: x/y in range [-1, 1] and proportional to angle, z is proportional to distance from camera to head. Also you can check for successfull init or change default settings: smoothing, default distance between eyes to change z, threshold in blazeface model or change tfjs source links from jsdelivr to unpkg / own server.
`js
Parallax.init(
view => {
console.log( view.x, view.y, view.z );
}, {
smoothEye: 0.8, // smoothing eye (x, y)
smoothDist: 0.25, // smoothing distance (z)
defautDist: 0.12, // parameter for distance estimation
threshold = 0.85 // blazeface detection probability
}
).then( rafId => {
console.log( 'cancelAnimationFrame(' + rafId + ')' );
}).catch( errorMessage => {
console.log( errorMessage );
} );
``

$3

- [x] smoothing head detection with EMA
- [x] support for iOS/Macs
- [x] lazy load for tfjs
- [x] three.js/pixi.js examples
- [x] mouse fallback
- [ ] gyroscope fallback

$3

Feel free to make issues or/and contribute.