3

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.

gman
  • 100,619
  • 31
  • 269
  • 393
hyewon330
  • 45
  • 1
  • 12
  • Do you have a list of faces? – neeh Feb 24 '17 at 11:57
  • No I only have the set of xyz coordinate data. I would like to make a function which creates faces. – hyewon330 Feb 24 '17 at 12:15
  • There are several ways to generate faces from a vertex list. Is your vertex count a multiple of 3 ? – neeh Feb 24 '17 at 12:25
  • The set of coordinates should be vertices, but I couldn't figure out how to generate triangles out of the coordinates. – hyewon330 Feb 24 '17 at 12:30
  • A very simple way to do is to generate a face (a triangle) every 3 vertices (this requires to have a multiple of 3 vertices). – neeh Feb 24 '17 at 12:41
  • Thank you for your comments. Do you have any idea how I should create a multiple of 3 vertices out of given coordinates? – hyewon330 Feb 24 '17 at 12:53

1 Answers1

2

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.

linuxpirates
  • 101
  • 1
  • 7
  • Thanks for your comment. I have many sets of space data, it could also be other shapes (e.g. pentagon upright box or etc). The coordinates should form a room shape and the room shapes will form a building. Is there any way to draw polyline(using x, y values) and make it upright box with given z value(height)? – hyewon330 Feb 24 '17 at 12:45
  • And, when I use BoxGeometry, could I give the center/location for the box? – hyewon330 Feb 24 '17 at 12:56
  • This is where my knowledge of three.js reaches its limit, but logically you would either have to define the faces on the outside, or extrude a 2D shape upwards. Check out the source code from [this page](https://stemkoski.github.io/Three.js/Shapes.html), which includes many basic shapes: – linuxpirates Feb 24 '17 at 14:37
  • Thank you so much. Helped me a lot! – hyewon330 Feb 24 '17 at 15:06