MegaEdit 3D provides the ability to preview normal MegaEdit products in 3D form. This allows your end users to visualise how their final product is actually going to appear.
We utilise Blender, a freely available 3D modelling package (not associated with Infigo), to allow us to link areas on our MegaEdit canvas to areas on a 3D model. This means that when an end user is interacting with a MegaEdit product template, such as inputting text or imagery, those same input resources will be visible on the 3D preview.
The majority of the setup of the 3D Preview is done within Blender, where you create (or import) the 3D model and define how a 2D template (such as your product's dieline) relates to the 3D model you have created.
Examples of MegaEdit products with 3D Preview
This short tutorial series aims to show you the basics and fundamentals of configuring your MegaEdit products for 3D preview.
With such as a vast array of products and possible variations of how they are to be presented, it is impossible to create a one-size-fits-all tutorial series.
We will look at setting up a 3D preview for a cardboard box product. This involves a significant amount of preparation within Blender, the 3D modelling package which has no association with Infigo. We will not be detailing how to create a Blender model. All we will be discussing is the general functionality and techniques required to go from 3D Blender model to a variable 3D preview in MegaEdit.
Step 1 | Gather your resources
You will need:
- A 3D model of your product
- 2D image(s) to use as your template (such as a dieline). We'll find out more on these later.
Step 2 | Linking your 2D image and 3D model
We need to link our 2D image (dieline or template) to our 3D model by adding them to the same Blender file.
Next, we define a material on the 3D model which utilises our 2D image for its colouring.
This results in the 2D image becoming a skin for the 3D model, however it will be fairly nonesensical at this stage!
Step 3 | Linking parts of your mesh to areas on your 2D templates
Our next step is to fine tune which sections of our 3D model mesh correspond to areas of our 2D template.
We do this by selecting mesh elements in the 3D view and transforming those elements on the 2D image so they sit in the correct place.
Step 4 | Configure your MegaEdit product to use your 3D model
Once we've exported the data from Blender, we're ready to move into Infigo!
There's a little bit of coding to do (no more than modifying a few lines) and we need to make sure our MegaEdit product is set up with all the right resources and settings!
This means canvas, stock, cliparts and so on. We'll also need to make our 2D and 3D models available in Infigo's CSS Override area.
Step 5 | Set up the MegaEdit editor experience
Our final stage is within the MegaEdit editor itself. Start by overlaying your 2D image on the MegaEdit canvas.
In our example we're going to give our customers a few fixed boxes to input their data into, such as image and text fields.
Position these fields so they correspond with the mesh mapping you did in Blender. That way, whatever is placed into those locations will automatically be transposed onto the 3D model!
Fully configuring a MegaEdit product with 3D preview will require a few different resources and pieces of software. In this section, we'll take a look at these requirements.
- 3D Preview module license | MegaEdit's 3D preview capabilities form a separate module and license within the Infigo software. Get in contact with your Customer Success Manager if you would like more information or to discuss this in further detail.
- Blender 2.79 | This is an older version of the 3D modelling software, which is still available for download from the web. We require an older version of Blender as we utilise an add-on/ plugin which is no longer compatible with more recent versions.
- THREE | A plugin for Blender which allows us to generate required json files from the Blender model. This add-on has been depreciated and is unlikely to be available on the web. If you require this plugin, please get in touch with Infigo who can assist.
- Visual Studio Code | Recommended free software available on the web. This will allow you to easily make any minor changes required to either the json files from Blender or the 3D config script required by MegaEdit. If you would prefer not to use this, Notepad is also a viable software option.
- Dieline or template creation tool | Illustrator, Photoshop or even Paint will suffice for a basic dieline. There are also a multitude of other creation tools, along with websites which can create dielines for you.
- A physical mouse | Trust me, Blender is virtually unusable without a mouse with a central scroll wheel!
- MegaEdit knowledge | A working knowledge of MegaEdit is required, as the usual product configuration steps need to be followed.
- Blender modelling knowledge | If you are planning to create your own 3D models, you will require knowledge on how to construct models (or import models created elsewhere) into Blender. This is a widely used software package with a great deal of user generated educational content.
The key to MegaEdit 3D is having both a 2D and 3D template.
Your 2D template would usually be your product's dieline. This would form the main content of your MegaEdit canvas, onto which your end users can add their own personalisation. This 2D template allows us to ensure that elements such as imagery and text are added to the correct place, both for the final output file and for the conversion into a 3D preview.
The 2D template is also used within Blender and is key to identifying certain areas of your dieline to which faces on the 3D model should be linked.
Sometimes a product may not lend itself to a dieline, such as items of clothing. In these cases, you can utilise a more generic template, which is essentially providing you with areas to input your various variable elements on your product.
The example below shows a very simple template for this same box product, should we not be using a dieline.
Please note: You do not explicitly need to have just one dieline or template. Blender will let you assign different images to different areas of your 3D model, should this be more applicable to your application.
However you choose to create your dieline or template, ensure you export them with the relevant textures or colouring.
When we use a template image within Blender, the "texture" of the 3D model will use this provided image. So with my cardboard box for example, I'm providing Blender with the image with the non-printed elements coloured with the stock colour.
In comparison, your final output file from Infigo should not contain the stock colour. You should have another version of a template(s) which consider this.
It is important to note that there are many ways of setting up your 3D preview enabled MegaEdit model, which will largely depend on the requirements of your specific product. Our cardboard box example is just a simplified example of one way of accomplishing this.
Adding your Dieline to 3D Blender Model | ME_3D_005
In this tutorial, we'll take a look at the process followed in Blender 2.79 to import your dieline / template and to assign that image to a "material" which will be used on your 3D model.
The end result will be areas of the dieline image being used to apply a texture to the 3D model.
Please note: This is not designed as a Blender tutorial so will not go through all of the Blender commands and requirements. We will be sticking strictly to the process required for your eventual MegaEdit 3D model.
1. We begin in Blender
We will start within Blender, where we already have our 3D model open
2. Navigate to the UV/Image Editor section
In this section we will upload our dieline or template image.
3. Click the Image menu and Open Image
4. Select your required image
5. The image will now be imported
This will form the basis of our texturing on the 3D model. Our aim in later steps will be to place sections of the 3D models mesh onto this image, in order to replicate the image onto the 3D model itself.
6. Next we will define a material, click the Materials tab and then add a new material
This will instantly assign the new material to our 3D model and you should see it change colour slightly.
7. Next, navigate to the Node Editor
We will use the Node Editor to assign our dieline image as the colour of the newly created material
8. Switch the render mode to Cycles Render
This will give us access to the option we need in the next step
9. Back on the Node Editor screen, navigate to Image Texture and add it to our nodes
10. Click and drag to connect the Colour node of the "Image Texture" to the other available Colour node.
11. Assign your newly uploaded dieline or template image to the Image Texture
12. You will likely now see your dieline or template image being used on the 3D model
This is not a given at this stage, later steps may need to be followed to see this.
What is happening here is that the mesh of the 3D model is being split into separate sections or "islands" and is being placed onto your 2D dieline image.
Next, we will see how to view this.
13. Navigate back to the UV/Image Editor section
14. Select the 3D viewer and press the Tab key to switch to Edit mode
This will display the 3D model's mesh.
15. You will now also see how this mesh has been distributed onto your 2D dieline image
16. If you cannot see the 2D image being transposed onto the 3D model mesh, then you may not yet have a UV Mapping
Click on the 3D viewer window and hit "U" on your keyboard. This will bring up the UV Mapping menu.
This provides multiple options as to how the mesh is split and placed onto the 2D image. For this example, click Smart UV Project.
17. Click here
18. If prompted, you can edit some of these settings to control the initial layout of the UV mapping (So how the mesh is split and placed onto your 2D dieline)
Linking 2D Dieline Locations to the 3D Model Mesh in Blender | ME_3D_006
In this tutorial, we'll take a look at the process followed in Blender 2.79 to assign specific parts of your 3D model's mesh onto specific areas of your 2D dieline or guide image.
The end result will be we are able to visibly see that areas of the mesh are positioned in strategic areas of the 2D dieline image.
Please note: This is not designed as a Blender tutorial so will not go through all of the Blender commands and requirements. We will be sticking strictly to the process required for your eventual MegaEdit 3D model.
1. We again begin in Blender
We'll start in Blender with our 3D model opened. We are continuing from the previous tutorial, where our UV Mapping has already been started but not refined.
If you cannot see the 3D model mesh you may not be in "Edit" mode. Click the 3D viewer and hit the Tab key until you see the mesh being displayed.
2. Select your first group of elements to position relative to your dieline or template
In my example, our aim is ensure that a large image can be placed onto one of the boxes faces.
I've selected the group of elements which correspond to this location.
3. Navigate to the UV/Image Editor tab
You will see the mesh you have selected on the 3D model is displayed on the 2D image, however its positioning and sizing is likely wrong at this stage.
4. Selection options are located at the bottom of the screen. Select the option allowing you to highlight entire islands of mesh elements.
5. Right click on the element island to select it
6. Press the G key to to enable grab mode, and move your element island to the location corresponding with the selected elements on the 3D model.
7. Press the S key to enable scale mode and resize your selected element island to match the size and position of the corresponding selected elements on the 3D model.
8. If required, press the R key to rotate the selected element island, so that it matches your 3D model.
9. Repeat these steps for any of the 3D model elements you need to map to specific locations on the 2D dieline / template
10. Right click here
11. We need to ensure the rest of our elements, that we don't intend to map to specific locations on the 2D dieline / template, are positioned in a suitable location
Begin by selecting the 3D viewer and pressing the A key. This will highlight all elements and will show all element islands on the 2D image.
12. Select the window with the 2D view and click the A key until all element islands are selected
13. Hold Shift and right click over the element islands you have already positioned to deselect them
14. Use the keys G and S to position the remaining elements in a suitable location
In my case, I wish the rest of the elements to always display the main canvas colour. In this example that is the cardboard colour. So, I move the remaining element islands to a 'cardboard' area which we are not intending to modify as part of our variable product.
You can of course position all element islands correctly if you wish, however this may often be surplus to requirements.
15. Next, we will export a json file which can be used by MegaEdit.
This requires the THREE plugin, which due to age has been depreciated and generally unavailable. If you need this, you will need to contact Infigo.
16. Select a file location, give it a name and click Export THREE
Linking your 3D Model to your MegaEdit Product | ME_3D_007
In this tutorial, we'll take a look at the process of getting your recently exported json file from Blender into your MegaEdit model for use in the 3D preview.
The end result of this tutorial will be the completed configuration of the required back-end elements. Then, in the next tutorial, we will take a look at tidying up the front-end, for a better MegaEdit editor experience.
1. Open your recently created JSON file from Blender
My preference is to use Visual Studio Code, however Notepad or another text file reader will suffice.
2. Navigate to the section related to the 'materials' used in the model.
Currently, the JSON will be referencing the material (which we use to project our 2D image onto our 3D model) as it was named in Blender. In the context of our JSON file, this name has no meaning.
We need to replace this and add an additional line of config.
3. JSON modifications
The DbgName section should be changed to suit the page of your MegaEdit canvas which will host its contents.
Essentially, it's possible that we have mapped sections of our 3D model to different 2D images. When linking this to a MegaEdit product, those 2D images will be referenced by different pages in your MegaEdit product.
So, our line of code below states: "DbgName":"CatfishPage_1|width=2048&x=0&y=0&bgLayer=true",
This means this particular material (or 2D image) and the elements that are mapped to it will be controlled by the contents of page 1 of our MegaEdit product.
As such, changing to "CatfishPage_2" will link the material to page 2 of our MegaEdit product.
We also need to add a 2nd line named mapDiffuse, which provides a fallback option should the artwork not be available to the system.
Here's the code modifications to add in full, you will need to modify it to suit your needs:
"DbgName":"CatfishPage_1|width=2048&x=0&y=0&bgLayer=true", "mapDiffuse":"MyFile.png",
4. Copy the following code into a code/text editor
The below code is the config code for the 3D preview. In this example we will only be modifying the basics, however this code allows you to perform a range of customisation options on the 3D preview, such as:
Rotate and transform the 3D model
Change the camera position
Add or change the position and characteristics of lighting
Animate the product to automatically rotate
And much more
Copy the code below for the config:
{
sceneLink: "",
softwareRendererScene: "",
useObjectLoader: false,
showStats: false,
computeVertexNormals: true,
textureBackground: "#006633",
forceSoftwareRenderer: false,
showAddToBasketButton: true,
camera: {
cameraPos: {
x: .5,
z: -0.8,
y: 0
},
fov: 80,
zNear: null,
zFar: null,
up: {
x: 0,
y: 0,
z: 1
}
},
background: null, //"#ff0000",
controls: {
type: "orbit"
},
lights: [{
type: "ambient",
color: "#FFFFFF",
intensity: 1.6
},
{
type: "point",
color: "#FFFFFF",
pos: {
x: -50,
y: -200,
z: -100
},
intensity: 0.18
},
{
type: "point",
color: "#FFFFFF",
pos: {
x: 0,
y: 40,
z: 10
},
intensity: 0.18
},
{
type: "point",
color: "#FFFFFF",
pos: {
x: 1,
y: 8,
z: 1
},
intensity: 0.18
}
],
animateScene: {
speedZ: 0.0023, //looks like the y axis
speedX: 0, //seems correct as x
speedY: 0 //looks like z
},
model: {
translation: {
x: 0,
y: -1,
z: 0
},
rotation: {
x: 0,
y: 0,
z: 0
}
}
}
5. Navigate to the CSS Override area of your Infigo storefront
Upload your modified JSON file to this area and click the Copy button to copy the link to clipboard.
6. Input the copied link into the sceneLink and softwareRendererScene lines of the code you pasted earlier
The initial link will have a number at the start (such as 2463522), replace these with 0.
So the result will be something like the following for the first 2 lines:
sceneLink: "/0/Handler/CSSOverride/GetImage/76/BoxDemoGuide.json",
softwareRendererScene: "/0/Handler/CSSOverride/GetImage/76/BoxDemoGuide.json",
7. Create or navigate to a MegaEdit product you wish to apply the 3D preview to.
8. Click to access the MegaEdit config options
9. Specify the number of pages for the MegaEdit product
This should match the number of 2D images you used in your Blender file.
As a reminder, we could have used multiple 2D images and map different areas of each image to different elements on our 3D model.
In our example with the cardboard box, we have used only 1 2D image showing the entire dieline, so we only need to have 1 page in MegaEdit.
10. Select 3D Preview from the Preview Type dropdown
Note: You will need to have purchased the 3D module in order to do this.
11. Copy and paste the entire config code you were working on earlier in the Preview Config area
12. If not done so already, assign resources to your MegaEdit product
For the canvas, ensure you are assigning a canvas that is the same size as the 2D image you are using (your dieline or template).
Create a clipart category in which you should place your 2D images (dielines or templates).
The form these clipart images take could differ based on your final product requirements.
For example in my cardboard box product, I will add a version of my dieline where the actual material is saved as transparent. When added to my MegaEdit product, this means I can control the material colour using my MegaEdit stock but this colour will not appear on the output.
Ensure you are also assigning the mandatory Stock and Output Types resources.
If you require any other resources such as additional Clipart and Fonts, assign those as well.
We will not go through the creation of these resources within this tutorial. Other resources covering this area available in the Infigo Academy.
13. Launch the product
14. Launch the MegaEdit editor
15. By default, your canvas will be displayed
At present in our example, the canvas is blank
16. Click on Preview
17. The 3D model should now be displayed, mimicking your 2D canvas
Configuring your MegaEdit Product for 3D Preview | ME_3D_008
In this tutorial, we'll take a look at preparing the front-end of your product for 3D preview. That is, the editor experience in the MegaEdit editor that your user will experience.
Please note: The example we're showing here is very basic product configuration for demo purposes. As with many things in Infigo and MegaEdit, there are a great deal of customisation capabilities. Take a look at some of the sample 3D products provided in an earlier tutorial for more context on the editor experience that can be achieved in MegaEdit's 3D Preview mode.
1. Starting point
We begin where the previous tutorial left off. We have imported our 3D model into our MegaEdit product via JSON and have set up all of the standard MegaEdit resources such as canvas, stock, output type and cliparts.
Remember, we created a clipart cateory which contains our 2D dieline or template.
Finally, we launched the MegaEdit editor for this product.
2. Add your dieline or template to the canvas
3. Resize the dieline or template to fit the canvas
Your canvas should have been created to match the sizing of your 2D dieline or template.
4. Add variable elements to your canvas
Add elements (either static or variable) to your canvas, positioning them in the same location as the element islands we positioned in Blender.
In this example, we have added a range of variable elements including text, imagery and colour selection boxes.
5. As a reminder, here's how our element islands were configured in Blender
Remember, these were linked to groups of elements on our 3D model.
6. Click on Preview
7. Preview the 3D model
Review the generated 3D model to confirm everything is working correctly.
We can see mixed results in this example. The coloured sections and text are working correctly, however the logo is incorrectly rotated when transposed onto the 3D model.
In this case, we would need to go back to Blender and rotate the element island. Once done, the JSON would need to be re-exported and added to Infigo once again.
