Parallax effect for web using face tracking. Image-based 3d display with tfjs.
npm install parallax-effectParallax 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

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 tagjs`
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 );
} );
``- [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
Feel free to make issues or/and contribute.