Develop Reference

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

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

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

What time should we must be use invert a projection matrix in opengl programing

## Rencently I saw has someone to invert a projectionMatrix to draw their 3D scene using webgl programming, I don't know the function of to invert a projectionMatrix to project the scene. I don't know what happen when you invert a projectionMatrix,
mat4.perspective(perspectiveMatrix, Math.PI/2, ratio, 0.1, 10);
mat4.invert(projectionInverse, projectionMatrix);
.....
mat4.multiply(modelViewProjectMatrix, modelViewMatrix, projectionInverse);
webGL.gl.uniformMatrix4fv(shader.uniforms['proj_inv'], false, modelViewProjectMatrix);
Is anyone could tell me what exactly happen when you invert a projectionMatrix,

A typical projection matrix converts from a frustum of camera space into clip space (well, once you divide by w) so an inverse projection would convert from clip space back into camera space.
Typical uses are converting from screen space -> clip space -> camera space so you can do picking. That's not usually used in a shader though.
Another other common use is if you want to display a frustum to represent what a camera scenes in a 3D modeling package. In other words you have a modeling package that has 2 or more cameras. The camera the modeling package is using to view the 3D scene and the cameras in the scene that will later be used to render the scene from. To visualize which way those cameras are pointing you can render a 2 unit (-1 + 1) wireframe cube through the inverse projection. That will project the cube into the shape of a the frustum that match what that camera sees
The live frustum diagram near the bottom of this page uses that technique

ThreeJS - Keep object in Camera view at all times

I am using threejs in a project where I need to keep a basic object in my scene just in front of the camera, whichever way the camera is pointed. I am using the Orbit Controls plugin for movement and want to move the object around the scene so it is always in the middle of the camera view (same distance away all the time).
I am a relative newcomer to threejs so am not sure how to approach this - thoughts would be appreciated!

Before rendering your scene, you need to update the position of your object by placing it in front of the camera, for that you can use camera.position and camera.getWorldDirection(), then do the math to compute what should be the position of your object.

How do I make the Three.js camera look at the face of an object?

I'm have a sphere made of hexagons and pentagons and I am trying to make the camera look at a particular hexagon directly - so the centre of a user's view is the hex and it is flat.
The hexagons are made using the hexasphere.js plugin (https://github.com/arscan/hexasphere.js/tree/master). I am able to extract information from a mesh object which makes up a hex. But I don't know how to take the object info and tell the camera where to go.
I have tried using the normal matrix element of the mesh and finding the euler angles - but I don't know what to then do with them.

Ok, I've found a solution. The hexasphere plugin provides the centre point of a face with hexasphereObj.tiles[i].centrePoint which is a point object and this has a method project(radius, percent) which gets the coordinates of a point at a projection from the centre of the hexasphere and through the centre of the face.
I was then able to move the camera to this projected point and have it lookAt the centre of the hexasphere.

THREE.js Render target texture will not draw in a different scene

So if any THREE.js pros can understand why I can't get the WebGLRenderTarget to be used as a material for a plane in another scene I'd be pretty happy.
How it works right now is I create a scene with a perspective camera which renders a simple plane. This happens in the Application object.
I also have a WaveMap object that uses another scene and an orthographic camera and using a fragment shader draws the cos(x) * sin(y) function on another quad that takes up the entire screen. I render this to a texture and then I create a material that uses this texture.
I then pass that Material to be used in the Application object to draw the texture on the first plane I mentioned.
Problem is for some reason I could get this to work in the scene with the orthographic camera inside the WaveMap object but not in the scene with the perspective camera in the Application object after passing the material over. :(
I've tried simply passing a simple material with a solid color and that works but when I try to pass over a material which uses a WebGLRenderTarget as a texture it doesn't show up anymore.
https://github.com/ArminTaheri/rendertotexture-threejs

You need to clone any material/texture that you want to render by two different renderers.
var materialOnOther = originalMaterial.clone();
Prior to r72 you needed to force the image buffers for the textures to be updated like so:
materialOnOther.uniforms.exampleOfATexture.value.needsUpdate = true;