# Programatically generate cardboard box

**URL:** <https://discourse.threejs.org/t/programatically-generate-cardboard-box/29865>\
**Category:** Questions\
**Tags:** animation, geometry\
**Created:** [September 12, 2021, 7:13pm UTC](https://discourse.threejs.org/t/programatically-generate-cardboard-box/29865 "2021-09-12T19:13:02Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Syllogism](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/syllogism/32/20854_2.png) [@Syllogism](https://discourse.threejs.org/u/Syllogism)\
**Post date:** [September 12, 2021, 7:13pm UTC](https://discourse.threejs.org/t/programatically-generate-cardboard-box/29865/1 "2021-09-12T19:13:02Z")

</div>

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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/5/c581bdb9d2dd43813a732160fe95371e697416aa.png)

---

<div class="post-metadata">

**Author:** ![awonnink](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/awonnink/32/22486_2.png) [@awonnink](https://discourse.threejs.org/u/awonnink)\
**Post date:** [September 12, 2021, 7:27pm UTC](https://discourse.threejs.org/t/programatically-generate-cardboard-box/29865/2 "2021-09-12T19:27:26Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [September 12, 2021, 7:50pm UTC](https://discourse.threejs.org/t/programatically-generate-cardboard-box/29865/3 "2021-09-12T19:50:19Z")

</div>

Take a look at these things.

* * *

[Magic Box](https://hofk.de/main/threejs/sandboxthreeg/MagicBoxTHREEg.html) example 9

( see [Addon to create special / extended geometries](https://discourse.threejs.org/t/addon-to-create-special-extended-geometries/1855)  
and  
[GitHub - hofk/THREEg.js: three.js addon to create special or extended geometries. The addon generates indexed or non indexed BufferGeometries.](https://github.com/hofk/THREEg.js))

* * *

The example  
[weiße Weihnacht](https://hofk.de/main/threejs/geometrie/03_weihnacht_wuerfel.html)  
uses the old Geometry. You have to update to BufferGeometry.

see [THREE.Geometry will be removed from core with r125](https://discourse.threejs.org/t/three-geometry-will-be-removed-from-core-with-r125/22401)

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [September 12, 2021, 8:06pm UTC](https://discourse.threejs.org/t/programatically-generate-cardboard-box/29865/4 "2021-09-12T20:06:03Z")

</div>

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](https://stackoverflow.com/a/41320905/4045502)

---

<div class="post-metadata">

**Author:** ![rrrr\_rrrr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/rrrr_rrrr/32/7697_2.png) [@rrrr\_rrrr](https://discourse.threejs.org/u/rrrr_rrrr)\
**Post date:** [September 13, 2021, 2:56pm UTC](https://discourse.threejs.org/t/programatically-generate-cardboard-box/29865/5 "2021-09-13T14:56:20Z")

</div>

The animation part can be done it different ways.

Like [using a dummy object  
as surrogate ](https://discourse.threejs.org/t/rotating-planegeometry-at-edge-like-a-door-using-dat-gui/19589/12) 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.  
[  
 ](https://discourse.threejs.org/uploads/short-url/6LbbN5atcKtOOwnEm9s41iwzpc.html)[Box\_oc.html](https://discourse.threejs.org/uploads/short-url/6LbbN5atcKtOOwnEm9s41iwzpc.html) (5.8 KB)

---

<div class="post-metadata">

**Author:** ![Syllogism](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/syllogism/32/20854_2.png) [@Syllogism](https://discourse.threejs.org/u/Syllogism)\
**Post date:** [September 13, 2021, 6:45pm UTC](https://discourse.threejs.org/t/programatically-generate-cardboard-box/29865/6 "2021-09-13T18:45:46Z")

</div>

> [@rrrr\_rrrr](#):
>
> using a dummy object  
> as surrogate

Amazing! thank you so much!