Search code examples
javascriptgraphicsthree.jsfrustumcamera-projection

How to manipulate frustum in three.js


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


Solution

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