Search code examples
three.jsgeometryifc

How to convert x, y, z coordiate data to geometry (vertex, face) in three.js?


I have sets of [x,y,z] coordinate data, which forms one space.

e.g. (0,0,-3000),(1848,0,-3000),(1848,-5177,-3000),(0,-5177,-3000), (0,0,0),(1848,0,0),(1848,-5177,0),(0,-5177,0)

I would like to render the space coordinates using three.js. I'm trying to create a function which creates geometry object to render. However, it seems quite tricky to set vertices and faces.

Is there a simple way to render xyz coordinate to geometry in three.js?

Or is it possible to draw 2D shape(with x, z) and make it 3D(with z)? because for each geometries, it has even height as you see at the given coordinate example.


Solution

  • Concept

    To define geometry in 3D you need:

    • Points in 3D space; and
    • Information about how your points connect.

    For an arbitrary shape, you need to specify faces which join 3 or more of your points.

    Alternatively, if you make assumptions about your shape (for instance, from your example coordinates, it seems like you are drawing an upright box) you may only need to supply coordinates.

    Example

    From your example above, your box seems to have:

    height: 3000 ; width: 1848 ; depth:5177

    which enables you to use:

    geometry = new THREE.BoxGeometry( 1848 , 3000 , 5177 );
    

    Side note: a box should have 8 vertices, not 10. You have included [0,0,-3000] and [0,0,0] twice.