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)
I literally have no idea what does this mean
But the default BoxGeometry already does do that ? The corner vertices are stored in the position attribute.
(A relatively cleaner box-construction-from-vertices code can be found also in BoxHelper.)
BoxGeometry does not (the vertices are not 8).
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.
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.
isnt BoxHelper essentially what the topic starter already has, as described in
Yep, it looks so.
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
I guess this idea would work best for you then:
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