Perspective tracking using gyroscope data

Questions
, ,
1

Hi everyone!

I have spent the past 4 hours trying to replicate this fantastic effect with threejs on my phone.
There is a perspective tracking due to the gyroscope data of the mobile phone.

I don’t understand if the camera rotation is fake and the objects are simply transformed according to the gyro data (thus keeping the camera always in the same position), or if the camera is actually rotated in function of the gyro data, but it is also repositioned and recalibrated so that it can fits perfectly the 3d object (the cage box).

Or it is an extremely more difficult problem and I’m on the wrong path…

What do you think? Ideas?

1 Like
2
  1. It looks absolutely amazing.
  2. Hm, you can try using deviceorientation demo. In the demo, the magenta box is placed in the middle of the scene, so the effect is a bit different, but if you placed the rear edge of the box on the middle of the scene (ie. entire box is always in front of the camera) and tweaked camera rotation speed, it may give the same effect. :thinking:
3

I created a sandbox just last night using the deviceorientation controls

Here the result: https://hlnwl.csb.app/

The cage is a boxgeometry with a shadermaterial applied on it (backside face).
It is fixed at a certain position in front of the camera and is not transformed in any way. So obviously, if you move the device you don’t have the desired perspective effect. You simply move within the scene, exactly like the example you linked to me :slight_smile:

4

Well, it took me a while but in the end I did it :slight_smile:

The effect I found to be the off-axis projection effect, is explained very well in this article (and in all the links contained in it).

Here the fullpage app → https://ugpfn.csb.app/
Here the code → off-axis projection efx - CodeSandbox

2 Likes