3D rendering with 2D portion kept to scale


I was successful in using three.js to create 3D renderings with rotation. I realize this is the appropriate way to do so if you are assuming the 2D shape is just extended with a certain depth as the third dimension. I have a new requirement where the 2D portion needs to remain the same. As in there would be no rotation and that portion would remain to scale. The 3rd dimension would laid out behind it with the same proportions with diagonals drawn. Is this possible in three.js? If not, what would you call this type of 3D rendering? Any help is appreciated. I’ve attached an example. Thanks!


1 Like

See ExtrudeGeometry – three.js docs

The extrude example is helpful too

Hello - thank you! I am using extrudegeometry to handle. The problem is that the original 2D portion always ends up with some level of camera/lens distortion. In my example image, the 2D portion is exactly the same as what was started with and the 3rd dimension ends up in a kind of diagonal (which is not what you’d normally expect, but allows the scale to be kept). It seems I need some amount of rotation to display the 3rd dimension, but then the resulting image no longer has the other two dimensions in the original scale.

I was able to get this working using OrthographicCamera with a projectionmatrix.

This example was helpful: THREE.js Oblique Projection - JSFiddle - Code Playground