ITエンジニア/デザイナ向けにオープンソースを毎日紹介

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

今回紹介する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.

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2