Box Geometry using 8 vertex

Questions
1

I wanted to create a box using its vertices. I was able to create a box by drawing 8 lines to create top and bottom planes and 4 lines to connect 4 of these vertices. But is there a way i could create a box using box geometry which provides 8 vertices of the box itself (corner points)

2

I literally have no idea what does this mean :pensive:

3

But the default BoxGeometry already does do that :thinking: ? The corner vertices are stored in the position attribute.

(A relatively cleaner box-construction-from-vertices code can be found also in BoxHelper.)

4

BoxGeometry does not (the vertices are not 8). BoxHelper does.

Edit: my statement above refers to the number of vertices in the BufferAttribute. As I understand it now, the original question is different. It is not how to create a box WITH 8 vertices, but how to create a box FROM 8 vertices. So BoxGeometry, mentioned by @mjurczyk, is still a valid option.

1 Like
5

This should be rather easy, unless you have never done it before. I’d assume the following: you have 8 vertices and you want to draw a box, so that these vertices are vertices of the box. It was not clear whether you want a box with faces, or just a box with edges.

  • If the 8 points define edges aligned to the axes, you can calculate the midpoint and the size of the box and then you can use BoxGeometry (or as @mjurczyk suggested BoxHelper).
  • Otherwise, you have to construct the box manually by creating its BufferAttributes (at least ‘position’, but you might also want ‘normal’).
  • Alternatively, you can just give the 8 vertices to the THREE.ConvexGeometry and it will create the box for you.
6

isnt BoxHelper essentially what the topic starter already has, as described in

1 Like
7

Yep, it looks so.

8

Sorry, yes what i meant was, If i have 8 points in an array, which is in order 1 2 3 4 bottom plane and 5 6 7 8 top plane how could i create a box using these points with help of box geometry.

            8-----------------7
         /  |              /  |
     5-----------------6      |
     |      |          |      |
     |      4-----------------3    
     |    /            |   /
     1-----------------2

could someone help me with code itself how to be able to use it

	this.setAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );

i did go through the code from buffer geometry and tried the example by creating a plane from example but i also had an issue when i turn the camera this plane vanishes i need to do come back to view point again to make it visible

9

I guess this idea would work best for you then:

10

Here is a short demo to get you started. It creates two of the sides of a box. I’m sure you can add the other 4 sides. Keep in mind the following:

  • each side is actually two triangles, because this is how Three.js (and WebGL) works
  • the order of vertices within a triangle should look counter-clockwise if you look at the object from outside
  • each vertex needs normal vector and instead of manually providing it, it is calculated by computeVertexNormals

https://codepen.io/boytchev/full/MWzQqZJ

image