Dieline image to a box in Three.js

Question

I have created a dieline image using Three.js. Now I need to convert this dieline into a box.

This is my code for the dieline:

<script>
        var canvas;
        var imgElement = document.getElementById('my-image');
        var totalLength;
        var totalWidth;
        var boxHeight = 200;
        var boxWidth = 60;
        var boxDepth = 80;
        var foldHeight = 20;
        //var allObject = canvas.getObjects();
        initialCanvas(80, 225, boxHeight, foldHeight, boxWidth, boxDepth, 2);
        function initialCanvas(initX, initY, boxHeight, insertingFoldHeight, boxWidth, boxDepth, foldCuttingSize)
        {
            totalLength = 2*boxDepth + 2*boxHeight + insertingFoldHeight +100;
            totalWidth = 5*boxWidth;
            // $('#myCanvas').attr('width', totalLength);
            // $('#myCanvas').attr('height', totalWidth);

            canvas = new fabric.Canvas('myCanvas');
            new fabric.Image.fromURL('quality.png', function (oImg) {
                oImg.set({
                    width: canvas.width / 4,
                    height: canvas.height / 4,
                    originX: 'left',
                    originY: 'top'
                });
                oImg.set('angle', 20);
                //canvas.add(oImg);
            });

            new fabric.Image.fromURL('quality.png', function (oImg) {
                oImg.set({
                    width: canvas.width / 4,
                    height: canvas.height / 4,
                    originX: 'left',
                        coOrds : objects[i].getCoords()
                    }
                }else if(objects[i].get('type') == 'textbox'){
                    textFields[i] = {
                        text : objects[i].get('text'),
                        angle : objects[i].get('angle'),
                        height : objects[i].get('height'),
                        width : objects[i].get('width'),
                        left : objects[i].get('left'),
                        top: objects[i].get('top'),
                        coOrds : objects[i].getCoords()
                    }
                }
            }
            console.log(textures);
            console.log(textfields);
        }


        function setObjectProperties(canvas) { 
            var textureIndexes = Object.keys(textures);  
            var textfiledIndexes = Object.keys(textfields);  
            console.log(textureIndexes);
            console.log(textfiledIndexes);
            var objects = canvas.getObjects();
            for (var i in objects) {
                console.log(i);
                if(textureIndexes.indexOf(i) != -1){
                    console.log('UPADTE');
                    objects[i].set('angle', textures[i].angle);
                    objects[i].set('height', textures[i].height);
                    objects[i].set('width', textures[i].width);
                    objects[i].set('left', textures[i].left);
                    objects[i].set('top', textures[i].top);
                    objects[i].set('coOrds', textures[i].coOrds);
                }

            }
        }


    </script>           originY: 'top'
                });
                //oImg.set('angle', 20);
                //canvas.add(oImg);
            });

            var dieLineIntials = {
                boxLength: boxHeight,
                insertingFoldHeight: insertingFoldHeight,
                boxWidth: boxWidth,
                boxDepth: boxDepth,
                foldCuttingSize : foldCuttingSize,
                initX: initX,
                initY: initY
            };

            //var pointsInInch = 72;
            var pointsInInch = 72;

            var dieLineIntialsForPDF = {
                boxHeight: boxHeight * pointsInInch,
                insertingFoldHeight: insertingFoldHeight * pointsInInch,
                boxWidth: boxWidth * pointsInInch,
                boxDepth: boxDepth * pointsInInch,
                foldCuttingSize : foldCuttingSize* pointsInInch,
                initX: 150,
                initY: boxWidth * pointsInInch + 250
            };

            var startX = startY = pointX = pointY = width = height = 0;
            drawShipperBox(1,canvas, dieLineIntials);

            //ADDING CURVE*************************************************
            /*var y = 100;
            var x= 50
            var param = 'M '+x+','+y+' Q '+2*x+','+x/2+' '+3*x+','+y;
            var line = new fabric.Path(param, { fill: '', stroke: 'black'});
            line.selectable = false;
            canvas.add(line);*/
            //ADDING CURVE*************************************************
        }

        function getPDFFile () {
            html2canvas($("#myCanvas"), {
            onrendered: function(canvas) {         
                var imgData = canvas.toDataURL(
                    'image/png');              
                var doc = new jsPDF({
                    orientation: 'landscape',
                    unit: 'mm',
                    format: [totalWidth, totalLength]
                });
                doc.addImage(imgData, 'PNG', 10, 10);
                doc.save('sample-file.pdf');
            }
        });
        }

        var textures = {};
        var textfields = {};
        function getObjectProperties(canvas) {   
            var objects = canvas.getObjects();
            for (var i in objects) {
                if( objects[i].get('type') == 'image'){
                    textures[i] = {
                        src : objects[i].getSrc(),
                        angle : objects[i].get('angle'),
                        height : objects[i].get('height'),
                        width : objects[i].get('width'),
                        left : objects[i].get('left'),
                        top: objects[i].get('top'),
                        coOrds : objects[i].getCoords()
                    }
                }else if(objects[i].get('type') == 'textbox'){
                    textFields[i] = {
                        text : objects[i].get('text'),
                        angle : objects[i].get('angle'),
                        height : objects[i].get('height'),
                        width : objects[i].get('width'),
                        left : objects[i].get('left'),
                        top: objects[i].get('top'),
                        coOrds : objects[i].getCoords()
                    }
                }
            }
            console.log(textures);
            console.log(textfields);
        }

        function setObjectProperties(canvas) { 
            var textureIndexes = Object.keys(textures);  
            var textfiledIndexes = Object.keys(textfields);  
            console.log(textureIndexes);
            console.log(textfiledIndexes);
            var objects = canvas.getObjects();
            for (var i in objects) {
                console.log(i);
                if(textureIndexes.indexOf(i) != -1){
                    console.log('UPADTE');
                    objects[i].set('angle', textures[i].angle);
                    objects[i].set('height', textures[i].height);
                    objects[i].set('width', textures[i].width);
                    objects[i].set('left', textures[i].left);
                    objects[i].set('top', textures[i].top);
                    objects[i].set('coOrds', textures[i].coOrds);
                }
            }

        }

    </script>

Can someone help me with this? This is my dieline image:

Answer 1

Most of us on this site are visually oriented persons. Some of us surely are also brilliant programmers and probably could easily say which code you should get and insert to automatically extrude and bend your shape to a 3D model of a box. I unfortunately must skip it.

But there are other ways. As already mentioned, you can make the box in 3D modelling software. I took your line pattern screenshot, made a fast manually traced copy of it in a CAD program, extruded some thickness and bended some faces.

The software wasn't simplified freeware, but a trial version of real thing. It seemingly really understands in its sheet metal mode, how actual bendings happen, so it didn't allow bendings until there was inserted small cuts in corners, where 2 or 3 bendings meet and the bending lines were placed so that there's not two faces in the same 3D space.

Here's some screenshots:

Graphical demonstration needs printed surface images and texts. This is a random example copied and pasted from Photoshop:

The magenta areas are curved zones which I asked to be highlighted. The next image is an example of added hole to make the bending possible. It's the bottom corner where 3 bendings meet:

Complexity like this maybe is essential for predictable metal works, but for graphical demonstration purposes it's an overkill. Any 3D modelling program handle the box making if you can live without exact material thickness an you do not need physically realistic curved bends.

The next image is a screenshot from easy to use freeware (=DesignSpark Mechanical). The surfaces have no thickness, you simply rotate them to the wanted angle positions. The rotation axles are the seams.

.

After extruding some thickness to surfaces, removing the easy to see work colors and pasting one surface print image the final result in freeware is:

It's not much worse than the perfectly bended version. Both of them have the same major weakness: They are not photorealistically rendered. They look out drawings.

CAD programs haven't photorealistical rendering except premium price versions. Programs for arty 3D modelling are generally much better equipped for it.

As already suggested there's also a midway-route: Package designing software.

Answer 2

When you say you need to convert this to a box, what exactly do you mean?

Do you mean you want to send this to a packaging manufacturer, and get a physical box prototype back from them?

If so, you must choose a packaging manufacturer with which to work, check to see what their file specifications are, and send them your packaging design and die-lines, typically in the same Illustrator file - but you must check with them to see what they want, how they want the layers named, what labeling you need on the die-lines, how much bleed they want for each shape, how they want to to specify colour separations and all those other fun details of getting a job printed, cut and produced.

Or do you mean you want to use an application / plug-in like Origami to emulate the folding of this into a box?

You can also accomplish that same task in any decent 3D DCC* (**Digital Content Creation) application, e.g.: Blender, Modo, 3DS, Maya, C4D or Lightwave, of course, and then also gain a huge range of other functions within those dedicated 3D tools which you won't get otherwise, but for most non-3D design folks just wanting to see a mid-quality render of their dielines looking like a final product, Boxshot's Origami works pretty well with arguably a very shallow learning curve.

I was hesitant to post this as an answer as you'd not replied to my comment asking for clarification, but I think this should actually put this query to bed unless there's something I'm missing.

Hope this (somehow) helps.