Picture of Configuring your MegaEdit Product for 3D | ME_3D_007

Configuring your MegaEdit Product for 3D | ME_3D_007

Learn how to configure a MegaEdit product to use the 3D preview capabilities

Tutorial Video Transcript

A transcript of our tutorial video, ensuring you can find exactly what you need, when you need it.

You can search this page to find the relevant time-stamp in the video. Also, this text can be used as part of the tutorial search feature.

00:00:05:23 - 00:00:09:05
So as
I mentioned, there's a couple of small

00:00:09:06 - 00:00:12:06
tweaks
to lines of code that we need to do.

00:00:13:00 - 00:00:16:00
So let me just find.

00:00:17:16 - 00:00:20:24
The model that we were working with,

00:00:22:16 - 00:00:25:16
this is the Json file that we exported.

00:00:26:07 - 00:00:28:20
And what you can see that
contains is just a

00:00:28:20 - 00:00:31:25
lot of information
isn't really human readable.

00:00:32:12 - 00:00:36:19
however, what we're looking for,
I think, is that section in the middle

00:00:36:19 - 00:00:39:19
there. Yes.

00:00:41:22 - 00:00:42:20
Yeah.

00:00:42:20 - 00:00:44:03
So let's make everybody dizzy.

00:00:44:03 - 00:00:47:13
So there's a section in the middle
that we're focusing on,

00:00:47:13 - 00:00:51:14
a very specific bit of this,
which is this DB name.

00:00:54:05 - 00:00:57:29
So the DB name is blender

00:00:57:29 - 00:01:00:29
and the Json referencing the material
that we created

00:01:01:13 - 00:01:04:10
inside, blender itself.

00:01:04:10 - 00:01:07:19
Now in the context of our Json file here
that we're going to put in MegaEdit,

00:01:07:26 - 00:01:12:25
that name of the material has no real
meaning, so we need to replace this

00:01:13:09 - 00:01:15:28
and add it an additional line
of config in there as well.

00:01:18:23 - 00:01:21:23
So. What we're

00:01:21:23 - 00:01:24:23
actually going to replace that with is.

00:01:25:28 - 00:01:27:08
Well we're going to make it suit

00:01:27:08 - 00:01:31:11
the page of the MegaEdit canvas
that's going to host its contents.

00:01:32:05 - 00:01:35:05
So what I mean by this,
if we are doing a dieline

00:01:35:11 - 00:01:38:00
on our MegaEdit canvas,
which is the whole product,

00:01:38:00 - 00:01:40:24
we're only going to have one page,
you know, MegaEdit product.

00:01:40:24 - 00:01:44:08
So therefore we just need to reference
this material as being page

00:01:44:08 - 00:01:46:02
one of our MegaEdit products.

00:01:46:02 - 00:01:48:16
And what that's doing is it's what?

00:01:48:16 - 00:01:52:07
So our material was our dieline
that we specified in blender.

00:01:52:20 - 00:01:56:06
This is going to make sure it's
actually referencing the corresponding

00:01:56:19 - 00:01:59:19
MegaEdit canvas,
which by the way should be the same size.

00:02:01:00 - 00:02:04:00
So if I put that in here.

00:02:04:14 - 00:02:05:17
So I've got the code already

00:02:06:24 - 00:02:08:08
copied here so I can cheat.

00:02:08:08 - 00:02:11:08
So we.

00:02:16:00 - 00:02:17:03
And the second one as well.

00:02:17:03 - 00:02:17:14
There we go.

00:02:17:14 - 00:02:20:16
So DB
name has now been replaced with catfish.

00:02:20:16 - 00:02:21:07
Page one.

00:02:21:07 - 00:02:24:07
And for those that don't know,
catfish is the old name for Infigo

00:02:25:08 - 00:02:27:07
that's specifying page one.

00:02:27:07 - 00:02:28:00
And then we've got.

00:02:28:00 - 00:02:29:21
So just

00:02:29:21 - 00:02:31:13
that's available in the step
by step guides

00:02:31:13 - 00:02:32:25
I've given you if you need to copy it

00:02:32:25 - 00:02:36:06
and all you need to change if you've got
multiple changes, is the number there.

00:02:37:13 - 00:02:39:27
and then we've got this map
diffuse as well.

00:02:39:27 - 00:02:44:09
Now my understanding of the map diffuse,
is it just giving a backup,

00:02:44:23 - 00:02:48:02
a backup file
for that particular artwork.

00:02:48:14 - 00:02:51:14
So this case, it's not my file dot png.

00:02:51:16 - 00:02:55:13
It's whatever the name of our file was
or will be that we upload to Mega, it.

00:02:56:09 - 00:02:59:07
So to use as our 2D template.

00:02:59:07 - 00:03:02:18
So I think mine was called dieline.png.

00:03:07:14 - 00:03:07:25
That's it.

00:03:07:25 - 00:03:10:25
So I can save that.

00:03:13:04 - 00:03:14:28
Now the next thing we've got

00:03:14:28 - 00:03:17:28
is the actual config code for

00:03:18:00 - 00:03:20:26
this going to be included inside

00:03:20:26 - 00:03:23:26
majorette itself
to actually configure the 3D preview.

00:03:24:14 - 00:03:27:26
So you can use Visual Studio Code again,

00:03:28:24 - 00:03:31:24
or you can utilize notepad.

00:03:35:10 - 00:03:36:25
Again I've got it copied here.

00:03:36:25 - 00:03:39:25
So I'm just going to cheat.

00:03:50:10 - 00:03:51:17
That's a lot of spaces,

00:03:51:17 - 00:03:54:17
so I'm not sure it's
going to be too happy.

00:03:58:02 - 00:03:58:19
To work with it.

00:03:58:19 - 00:04:00:19
It doesn't work. It doesn't work. right.

00:04:00:19 - 00:04:02:22
So what we need to do in here
and remember,

00:04:02:22 - 00:04:05:22
this is the config for the 3D
preview itself.

00:04:05:22 - 00:04:08:22
This will go on your MegaEdit product.

00:04:09:06 - 00:04:10:22
There's two lines we need to fill in.

00:04:10:22 - 00:04:13:29
It's the scene
link and software renderer scene.

00:04:14:10 - 00:04:15:10
And what we're looking for here

00:04:15:10 - 00:04:19:04
is a link to our Json file
that we've just been editing.

00:04:20:09 - 00:04:20:19
Now. At the

00:04:20:19 - 00:04:24:07
moment we don't have a link, but
we need to actually upload the Json file

00:04:24:25 - 00:04:27:16
and our corresponding to the die line

00:04:27:16 - 00:04:30:16
or template into our MegaEdit

00:04:30:25 - 00:04:33:22
or into our video storefront.

00:04:33:22 - 00:04:36:25
So if I go to

00:04:36:25 - 00:04:39:25
I've got a lot of pages open,
so bear with me.

00:04:45:06 - 00:04:46:16
This one here.

00:04:46:16 - 00:04:51:18
So I'm going to start this from scratch
by going to CSS overrides.

00:04:51:19 - 00:04:54:27
Now many of you will be familiar
with the CSS override area.

00:04:55:27 - 00:04:59:06
One of its functions is the ability
to upload additional resources

00:04:59:06 - 00:05:02:06
to your storefront
for use in various locations.

00:05:02:19 - 00:05:05:27
So you can see I've already got a couple
of them been uploaded into here as my.

00:05:06:27 - 00:05:09:15
So I've been practicing for this webinar.

00:05:09:15 - 00:05:12:21
I'm also going to choose our
new Json file that we have.

00:05:14:08 - 00:05:17:08
So if I go.

00:05:18:26 - 00:05:20:24
Here.

00:05:20:24 - 00:05:23:01
So I'll start to model

00:05:23:01 - 00:05:25:24
upload
and you'll see that that will give us

00:05:25:24 - 00:05:29:04
an associated link that we can utilize.

00:05:29:04 - 00:05:32:19
And that's what we need to take into
that conflict that we're currently making.

00:05:33:16 - 00:05:36:14
Now we'd also upload our

00:05:36:14 - 00:05:38:20
our 2D template as well, in the same way

00:05:38:20 - 00:05:41:20
I've already got that
from a previous iteration I have utilized.

00:05:41:25 - 00:05:43:24
So that's fine.

00:05:43:24 - 00:05:46:06
I've already got that in.

00:05:46:06 - 00:05:49:06
However, I do need to take this text here.

00:05:50:02 - 00:05:53:02
This link.

00:05:53:13 - 00:05:56:00
Go back to my config.

00:05:56:00 - 00:05:59:06
Then I'm going to paste that
in both of those top two sections.

00:05:59:14 - 00:06:02:14
But I'm going to replace
that unique identifier that I with zero.

00:06:07:24 - 00:06:10:24
So a little bit of messing around
with the lines of code, but not too much.

00:06:10:26 - 00:06:11:22
That's all we need to do.

00:06:15:20 - 00:06:18:11
So let's put that to one side.

00:06:18:11 - 00:06:21:03
Now I'm
going to create our MegaEdit product.

00:06:21:03 - 00:06:24:11
So same way as you would normally create
the MegaEdit products.

00:06:24:11 - 00:06:27:11
No difference in this particular scenario.

00:06:27:15 - 00:06:29:19
So I'm going to rush through this.

00:06:29:19 - 00:06:32:19
If I go to product management,

00:06:32:19 - 00:06:34:13
add new,

00:06:34:13 - 00:06:36:22
choose MegaEdit products.

00:06:36:22 - 00:06:39:08
Let's put

00:06:39:08 - 00:06:42:08
3D preview webinar.

00:06:47:04 - 00:06:47:27
And then we're going to jump

00:06:47:27 - 00:06:50:27
straight to our MegaEdit config.

00:06:52:03 - 00:06:54:01
Now again
most of you should be familiar with this.

00:06:54:01 - 00:06:55:19
I think.

00:06:55:19 - 00:06:57:07
And a couple of changes
we're going to make.

00:06:57:07 - 00:06:59:01
One is the number of pages.

00:06:59:01 - 00:07:02:10
We're using only one page,
because our entire die

00:07:02:10 - 00:07:05:10
line is going to be on the one page.

00:07:08:18 - 00:07:11:29
If I scroll down a bit,
I'm going to make sure my preview type

00:07:11:29 - 00:07:16:22
is using 3D preview, which will be available to you if you have the the module.

00:07:17:28 - 00:07:19:23
And then we've got our preview config.

00:07:19:23 - 00:07:22:23
Now this is where I'm just going to copy
and paste.

00:07:25:23 - 00:07:28:23
From here.

00:07:38:01 - 00:07:41:01
Okay I'm going to save that.

00:07:43:13 - 00:07:43:29
Now again

00:07:43:29 - 00:07:47:00
as we normally would,
we've got our specification

00:07:47:00 - 00:07:50:14
of required resources and optional
resources to use in the model.

00:07:50:26 - 00:07:54:11
So the required ones
canvas stock output type,

00:07:54:18 - 00:07:57:19
optional ones, things like quick arts
fonts,

00:07:59:18 - 00:08:01:26
spot covers, that kind of thing.

00:08:01:26 - 00:08:05:17
So I'm not going to go through
making those on this webinar.

00:08:05:19 - 00:08:08:13
Again. There's loads of resources
on them for you go Academy.

00:08:08:13 - 00:08:10:16
I'm just going to actually assign them.

00:08:10:16 - 00:08:13:19
The only one I'm going to point out
is the canvas,

00:08:13:24 - 00:08:17:18
because that does need to be the same size
as the

00:08:18:04 - 00:08:20:22
image that you were utilizing inside
blender itself,

00:08:20:22 - 00:08:24:00
because then it can it knows
which areas of the canvas to map to

00:08:25:29 - 00:08:27:05
areas of the image,

00:08:27:05 - 00:08:30:05
and then the 3D model.

00:08:31:22 - 00:08:35:25
So. I'm

00:08:36:18 - 00:08:39:18
assuming I'm selecting the right ones
here from my previous attempts.

00:08:50:17 - 00:08:51:08
Another one I'll draw

00:08:51:08 - 00:08:54:20
your attention to is the actual clip arts.

00:08:55:17 - 00:08:58:24
So what I'm going to do
is create or import some clip art,

00:08:59:17 - 00:09:00:18
which is not going to be visible

00:09:00:18 - 00:09:04:03
to the customer,
but is visible to the administrator.

00:09:04:13 - 00:09:07:13
And this clip art category
is going to contain the actual

00:09:07:29 - 00:09:09:16
image of the die on itself.

00:09:09:16 - 00:09:13:18
So to the template now,
it may or may not be exactly

00:09:13:18 - 00:09:16:18
the same image that utilized in blender.

00:09:16:19 - 00:09:20:11
but basically it's going to give your
customers the workspace that they need.

00:09:20:11 - 00:09:23:12
So some kind of references
to where they need to to put things

00:09:23:19 - 00:09:25:06
to get it to appear on the 3D view.

00:09:26:22 - 00:09:29:02
I'll show you those in a moment.

00:09:29:02 - 00:09:32:02
assign some more.

00:09:47:00 - 00:09:50:28
And I think that's all we need.

00:09:56:06 - 00:09:59:06
We check my notes once again.

00:10:01:24 - 00:10:03:08
Okay,

00:10:03:08 - 00:10:04:12
so let me launch this.

00:10:04:12 - 00:10:07:04
Put a config,

00:10:07:04 - 00:10:10:18
the product page,
and let's give that a launch.

00:10:10:18 - 00:10:13:18
See if I've set it all correctly.

00:10:16:13 - 00:10:17:12
And there we go.

00:10:17:12 - 00:10:19:29
So one thing I'll point out here and again
is because there's

00:10:19:29 - 00:10:22:00
there's multiple ways of setting this up.

00:10:22:00 - 00:10:23:28
This is just the way
I've decided to do it.

00:10:23:28 - 00:10:29:14
I've created a stock which is, let's say,
very roughly the same color

00:10:29:14 - 00:10:33:09
as the cardboard stock that we're going
to actually print our things on.

00:10:33:26 - 00:10:36:09
and the reason I've done that is

00:10:36:09 - 00:10:40:04
because our final print output file,
we don't want it to have black coloring.

00:10:40:04 - 00:10:43:15
If we assign it to the actual stock
section of MegaEdit,

00:10:44:02 - 00:10:46:24
it means that we can get that color
in the background of our preview

00:10:46:24 - 00:10:50:07
like this,
but it won't be on the final output file,

00:10:50:29 - 00:10:52:25
and that will have a knock on effect
on the image

00:10:52:25 - 00:10:54:26
I use for our die line for our templates.

00:10:54:26 - 00:10:56:22
And I'll show you that in a moment.

00:10:56:22 - 00:10:58:07
However, for the moment.

00:10:58:07 - 00:11:00:16
So we've got our canvas.

00:11:00:16 - 00:11:02:24
And if I go to preview what we should see.

00:11:05:00 - 00:11:06:19
Is our brown box because it's

00:11:06:19 - 00:11:09:26
using the canvas that we've specified
which is currently empty.

00:11:09:26 - 00:11:12:26
Apart from the coloring.

00:11:13:26 - 00:11:16:26
So there we go.

 

Incomplete
Guide

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.

Creation Date: Jun 13, 2024
Created By: Sam Webster

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.

Open your recently created JSON file from Blender

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.

Navigate to the section related to the 'materials' used in the model.

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",

JSON modifications

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

}

}

}

Copy the following code into a code/text editor

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.

Navigate to the CSS Override area of your Infigo storefront

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",

Input the copied link into the sceneLink and softwareRendererScene lines of the code you pasted earlier

7. Create or navigate to a MegaEdit product you wish to apply the 3D preview to.

Create or navigate to a MegaEdit product you wish to apply the 3D preview to.

8. Click to access the MegaEdit config options

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.

Specify the number of pages for the MegaEdit product

10. Select 3D Preview from the Preview Type dropdown

Note: You will need to have purchased the 3D module in order to do this.

Select 3D Preview from the Preview Type dropdown

11. Copy and paste the entire config code you were working on earlier in the Preview Config area

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.

If not done so already, assign resources to your MegaEdit product

13. Launch the product

Launch the product

14. Launch the MegaEdit editor

Launch the MegaEdit editor

15. By default, your canvas will be displayed

At present in our example, the canvas is blank

By default, your canvas will be displayed

16. Click on Preview

Click on Preview

17. The 3D model should now be displayed, mimicking your 2D canvas

The 3D model should now be displayed, mimicking your 2D canvas