How to manipulate frustum in three.js

680 Views Asked by At

I saw this great implementation of a parallax view, which creates an illusion of depth and I want to build something similar in Three.js.

http://www.anxious-bored.com/blog/2018/2/25/theparallaxview-illusion-of-depth-by-3d-head-tracking-on-iphone-x

However, it seems that a non-symmetric camera frustum is needed. That means that the frustum of the camera is somehow fixed to the rendered object.

My question is, how do I realize that in three.js? Is it possible to manipulate the frustum corners or frustum sides?

Here you can see the top down view on my camera.

Looking strait to the object

After moving the camera to the left

2

There are 2 best solutions below

0
On BEST ANSWER

You could use setViewOffset so skew the frustum. You can also directly manipulate the cameras projection matrix.

1
On

The solution to my problem was the projection matrix as pailhead already suggested. Changing the 8. and 9. index of the matrix array does the affine transformation in x and y direction.

https://i.stack.imgur.com/Qrjb0.png