Sam Webster
Created Jun 13, 2024Linking 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.
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.
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",
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
}
}
}
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",
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.
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.
