Picture of An Overview of 3D Preview Configuration | ME_3D_003

An Overview of 3D Preview Configuration | ME_3D_003

In this video, the presenter outlines the process of setting up a 3D model for use in MegaEdit 3D Preview. The steps include gathering resources (3D model and 2D template), linking the 2D image and 3D model in Blender, mapping mesh parts to the 2D template, configuring the MegaEdit product with a JSON file, and setting up the MegaEdit editor experience to ensure a user-friendly interface for customers.

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:08:23
so let me start off our

00:00:09:06 - 00:00:11:27
description here
with a very high level overview.

00:00:11:27 - 00:00:14:27
So before I dig into the details
of prepping this thing,

00:00:14:29 - 00:00:18:12
just a quick five step basic process
as to what I'm going to do.

00:00:18:12 - 00:00:21:12
And then we'll go through it
in a little bit more detail.

00:00:21:16 - 00:00:23:28
So the first thing is to actually gather
our resources.

00:00:23:28 - 00:00:25:24
This is what I've just been talking about.

00:00:25:24 - 00:00:28:23
So you would require a 3D model,
which again,

00:00:28:23 - 00:00:31:15
we're not going to be creating today.

00:00:31:15 - 00:00:33:08
That's that's just in blender.

00:00:33:08 - 00:00:37:28
Or if you get your model from elsewhere,
what we're going to be focusing on

00:00:37:28 - 00:00:41:27
is just the prep work for that model
and then the 2D image as well.

00:00:42:09 - 00:00:45:09
Now we'll talk about this later
on in more detail,

00:00:45:09 - 00:00:48:00
but that, as I mentioned,
can either be a Di line

00:00:48:00 - 00:00:51:28
or it can be a template
if some other form.

00:00:52:19 - 00:00:56:05
It's also worth me saying
that you don't just need one template

00:00:56:05 - 00:00:57:13
if that's not suitable,

00:00:57:13 - 00:01:00:29
so you don't have to have just one image
which you link to the entirety

00:01:00:29 - 00:01:02:06
of your 3D model.

00:01:02:06 - 00:01:05:15
You can have it so there's multiple
different pages of canvas,

00:01:05:27 - 00:01:09:24
which have multiple images
which can be mapped to different areas

00:01:10:03 - 00:01:12:09
of your 3D model. And again, it's very

00:01:14:06 - 00:01:16:04
model and product specific

00:01:16:04 - 00:01:19:04
as to how you might utilize those.

00:01:21:12 - 00:01:23:08
Step two again,
which we'll see a bit later

00:01:23:08 - 00:01:27:16
on, is linking
that 2D image and the 3D model.

00:01:28:05 - 00:01:33:03
So we add to do this
we add them to the same blender file.

00:01:33:12 - 00:01:35:02
So again we're saying out of Infigo

00:01:35:02 - 00:01:37:17
at this particular stage
we are just using blender.

00:01:37:17 - 00:01:38:25
We get the 3D model.

00:01:38:25 - 00:01:41:25
We get the 2D model
both inside our blender file.

00:01:41:29 - 00:01:45:12
And then what we're essentially doing
is defining a material

00:01:45:19 - 00:01:48:18
to our 3D model.

00:01:48:18 - 00:01:52:12
And we're using the 2D template

00:01:52:21 - 00:01:56:02
as the visual appearance of that material.

00:01:56:14 - 00:01:59:14
And what it basically means is that
we're laying one of them over the other.

00:01:59:23 - 00:02:02:29
And as you can see on the image
on the left hand side here, what

00:02:02:29 - 00:02:07:18
that will give you initially
is just a big mishmash of it,

00:02:07:18 - 00:02:10:27
trying to transpose
that entire 2D model onto the 3D model.

00:02:11:06 - 00:02:15:07
It's now a job to figure out which bit
rates to which match them together.

00:02:20:22 - 00:02:23:06
So as I've just been saying, step
three is linking

00:02:23:06 - 00:02:26:09
parts of your mesh
to areas on your 2D template.

00:02:26:29 - 00:02:29:29
Now, in a lot of the models
I demonstrated, there,

00:02:30:03 - 00:02:33:07
the entirety of that

00:02:33:07 - 00:02:36:17
3D model mesh
will be mapped to the 2D model.

00:02:36:28 - 00:02:40:00
And what it basically means
is that you can add resources to anywhere

00:02:40:00 - 00:02:44:25
on that canvas, anywhere on that dieline
and it will show on the 3D model.

00:02:45:25 - 00:02:47:09
This is the best way to do it.

00:02:47:09 - 00:02:49:13
That means you've got
the most versatility.

00:02:49:13 - 00:02:53:00
What we're going to do in
our example is just map particular areas,

00:02:53:00 - 00:02:54:26
just to keep it nice and simple.

00:02:54:26 - 00:02:57:23
And what it means as a result is
we can keep the model

00:02:57:23 - 00:03:00:07
in MegaEdit really locked down

00:03:00:07 - 00:03:03:26
so that we're controlling
what our customers are able to put on.

00:03:03:26 - 00:03:06:25
So we keep it within the confines
of what we want them to do.

00:03:11:17 - 00:03:14:23
Step four is to actually configure
the MegaEdit product

00:03:14:23 - 00:03:16:06
for using in our 3D model.

00:03:16:06 - 00:03:19:06
So I'm talking about more of the back
end side of things here.

00:03:19:25 - 00:03:22:03
it's actually very, very easy to do this.

00:03:22:03 - 00:03:25:17
So what we're essentially doing is
once we've set up the blender file,

00:03:26:02 - 00:03:30:01
we're exporting a Json file from blender
that we'll see later on.

00:03:30:25 - 00:03:33:25
And then there's a couple of lines of code
that we need to change.

00:03:34:04 - 00:03:37:14
And then we put that Json file
into our Infigo storefront.

00:03:38:07 - 00:03:41:10
We've got a little bit of config
for our 3D preview

00:03:41:11 - 00:03:45:05
which again you need to modify 1
or 2 lines of it to make it compatible.

00:03:45:20 - 00:03:48:07
Paste that into your MegaEdit product

00:03:48:07 - 00:03:52:29
and beyond actually
doing your usual MegaEdit configuration.

00:03:52:29 - 00:03:58:09
So canvas specifications, stock
specification, output type, specification.

00:03:58:21 - 00:04:00:03
That's really all that you need to do.

00:04:01:03 - 00:04:03:21
So the
actual specification of the 3D preview

00:04:03:21 - 00:04:07:29
in MegaEdit side of things
isn't too bad at all.

00:04:08:04 - 00:04:11:04
Most of the practice
I've mentioned is in blender.

00:04:14:02 - 00:04:15:03
And then finally, step

00:04:15:03 - 00:04:19:01
five is the setup of the Mega
Add a MegaEdit Editor experience.

00:04:19:01 - 00:04:22:14
Now this is where
that versatility comes in.

00:04:23:08 - 00:04:25:15
so we've seen loads of different examples
of the different ways

00:04:25:15 - 00:04:26:22
you can set this up,

00:04:26:22 - 00:04:29:22
but you just make sure you're making it
a nice experience for your customers.

00:04:30:18 - 00:04:32:24
And how you do
that will depend on your particular

00:04:32:24 - 00:04:35:24
product.

 

Incomplete
Guide

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!