Programatically generate cardboard box

Questions
,
1

Hi All, thanks in advance for any advice, I’m a complete Three.JS noob but a relatively experienced coder and I’m familiar with 3d.

I’d like to know what the best approach to solving this problem. I’d like to generate some custom geometry, basically the custom geometry I’m trying to generate needs to be similar to a cardboard box. So a box, but with the front or top of the box having flaps that open.

I’d also like to be able to animate the box so that it opens and closes, I’d ideally like to generate dozens of these with variable height, depth, etc

I’ve looked into using BufferGeometry and setting a bunch of vertices, but I’m not familiar with the limitations of creating geometry this way. Will I for instance be able to create a buffer geometry object with the top panels and then in that same function rotation axises for the box to be able to open and close? Or is there some other approach that I’m not even familiar with?

.

hinged
hinged842×595 3.19 KB

2

I think I would create the box in a tool like Blender, have the flaps as separate models, and join all (for example GLTF-) models in a ThreeJS group object to represent the complete box.

1 Like
3

Take a look at these things.

Magic Box example 9

( see Addon to create special / extended geometries
and
GitHub - hofk/THREEg.js: three.js addon to create special or extended geometries. The addon generates indexed or non indexed BufferGeometries.)

The example
weiße Weihnacht
uses the old Geometry. You have to update to BufferGeometry.

see THREE.Geometry will be removed from core with r125

2 Likes
4

Written 5 years ago, but I modified the related jsfiddle to the latest revision (0.132.2): javascript - Folding rectangles to form a cube using three.js - Stack Overflow

1 Like
5

The animation part can be done it different ways.

Like using a dummy object
as surrogate or just manipulating vertex position. This attachment create what you asked for. To get animation going, move the cursor over the canvas and press “A” on keyboard.

Box_oc.html (5.8 KB)

6

Amazing! thank you so much!