パララックスエフェクトというと、マウスのスクロールに差異を持たせて奥行きを感じさせるのが一般的です。手前は早く、奥はゆっくり動かすことで、距離を感じさせるのはアニメやゲームでもよく行われている手法です。 今回紹介するParallax-effectはWebベースで、顔をトラッキングして行うパララックスエフェクトです。

Parallax-effectの使い方

この動きはWebカメラで認識した顔の動きに合わせて起こっています。

これも別なデモです。

Three.jsと連携している例。

Parallax-effectは写真の奥側がちょっとのぞけそうな、さらに奥行きによって2Dの写真が3Dであるかのように錯覚します。それがヘッドトラッキングによって起こっているので、より現実味が出ます。ぜひデモで体験してください。

Parallax-effectはJavaScript製のオープンソース・ソフトウェア（MIT License）です。

Parallax-effect with Three.js munrocket/parallax-effect: ??‍♂️ Parallax effect in javascript using face tracking. An immersive view in 3d with webcam.