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?
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
Well, it took me a while but in the end I did it
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