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
