How to make a cube out of six bounding boxes

Hello, I’m very new to Threejs but not programming. I’m starting a project, I’m trying to build a Cubequadtree (customer cube object that has a Quadtree for each side). The problem I’m running into currently is how do I form 6 bounding boxes so that they make a cube?

How the result has to look like?

just a regular cube object that is made of bounding boxes for each side. the confusion that I have is how do I stitch these bounding boxes together so that they look like a cube. It should look like this

Do you mean something like this?

From the Collection of examples from


2022-02-25 19.51.03

1 Like

no looking to create fat line edges.

Are you talking about boxes (width x height x depth) or rectangles (width x height)?

Width 1px width edges, it’s even shorter:

var boxGeometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
var edgesGeometry = new THREE.EdgesGeometry( boxGeometry );
var edgesMaterial = new THREE.LineBasicMaterial( { color: 0x4080ff } );
var wireframe = new THREE.LineSegments( edgesGeometry, edgesMaterial );

I stumbled upon this solution you gave, to build a box out of planes. Which is partially the answer to my problem. I just need to build a 6 sided box out of Box3

Box3 is a math object.

If you want to build a cube of 6 thin boxes, won’t they have cross sections in cube’s corners?

Maybe you’ll need to build something similar to this: Get OrbitControls Azimuth Angle - #2 by prisoner849

I’m trying to re-engineer a tutorial I saw on how to Generating Procedural Planets with Level-of-Detail: 3D World Generation: #4 (Planetary LOD): Generating Procedural Planets with Level-of-Detail! - YouTube

you can jump to the 1:02 mark he starts to dive into the code. I’m not sure why he opted to use a Box3 to define each side of the box but I want to find out the reason.

The code can be found here on line 87: ProceduralTerrain_Part4/quadtree.js at 97ffc7ecb1624b274416e071fd8926165ca59d7a · simondevyoutube/ProceduralTerrain_Part4 · GitHub