Search code examples
3d2dwebglcoordinatescomputational-geometry

2D to 3D coordinates conversion


I'm trying to convert geometrical shapes drawn in 2D to 3D. I'm searching for last two days I didn't get any solution how to make it work. Please direct me to a proper way.

For example I have four points to draw a shape, consider (2,2), (4,2), (4,6), (2,0). I managed to connect four points. Now, how it can be converted into 3D shape? Whether it is possible or not?

How the drawn 3D points will be plotted and the shape is been displayed on screen?

Thanks in Advance.


Solution

  • If i understand your problem correctly, what you need to do is:

    Convert your points into 3D points:

    A(2,2,0), B(4,2,0), C(4,6,0), D(2,0,0)

    Get "duplicate" points with a height:

    E(2,2,1), F(4,2,1), G(4,6,1), H(2,0,1)

    Create triangles from those points: (there might be mistakes in this example)

    Front side:
    E   EF 
    AB   B 
    
    Right side:
    F   FG
    BC   C
    
    Back side:
    G   GH
    CD   D
    
    Left side:
    D   DA
    HE   E
    
    Bottom:
    A  AB
    CD  D
    
    Top:
    E  EF
    GH  H
    

    => triangles (EAB),(EBF),(FBC),(FCG),(GCD),(GDH),(DHE),(DEA),(ACD),(ADB),(EGH),(EHF)

    Now all you have to do is draw those triangles.

    => You get some "cube like" shape

    If you have more complex shapes you need triangulation, as LJ_1102 wrote. (at least for top & bottom)

    Or of course you can use a Framework like Three.js that does all the work for you: http://threejs.org/examples/#webgl_geometry_shapes