Achieving Depth on Plane Geometry with 2D Texture in Three.js (Displacement Map Alternatives)

Questions
, , , ,
1

I’m trying to create a depth effect on a plane geometry in Three.js using a 2D image texture. However, the displacement map doesn’t provide the desired look. Are there any alternative approaches, such as using front and back images or other techniques, to achieve a realistic depth effect? Any suggestions would be greatly appreciated!

Untitled design
Untitled design813×281 65.1 KB

2

I think you are needlessly limiting your options by trying to make a plane (2D) look like it’s 3D.

However diligently you’ll work, the best you can hope for is a visualization which looks right from exactly one (1) view point only. If you’d want to view from an however minisculely different view point, you’d have to start all over.

The way to go is: modelling in 3D.

3 Likes
3

In theory, you could use a 3D vector displacement map to cause a 2D plane to display as a 3D object, However, this becomes more challenging where the object and/or texture is complex like your example. (I am not even sure how you could easily map the texture to your modified plane without distortion.)

As vietzutun.ch has noted, it makes far more sense for you to create your own 3D object (using something like Blender) and map the textures to your object. You could choose to make a simple object and use a normal or displacement map to create more detail.

4

Is there any way to stretch plane geometry along with its texture in the z-axis?

5

Assuming the texture is aligned with the x-y plane, “stretching” a plane along the z-axis would be called extrusion. Note however, that the process of extrusion does not automagically add any new information as to what the sides look like. Without additional information which you’d have to provide, all you’ll get is replication of the boundary texels of your initial texture map.

Like so: opengl - Apply 2D Texture on all faces of a 3D Cube - Game Development Stack Exchange

6

Use an image to 3D AI. I don’t have a specific recommendation, but searching for “Image to 3D AI” or “Image to Depth Map AI” will give you plenty of options.

This two look interesting:

7

Use scale, e.g. mesh.scale.set(1,1,2)?