Generate a Design

This guide will walk you through how to generate a design programmatically.

While the Core3D SDK allows you to programmatically create a design, it may be too verbose for some scenarios where you just want to visualize an image on a model. The SDK's generateDesign helper can accept a set of resources and do the heavy lifting of applying those resources for you.

INFO

Design generation is also available via the API.

Example
Code
Breaking It Down

Example

Code

example.ts

React Usage

LiveExample.tsx

1import { Core3D, Model, Quality, isGraphicAssignment } from '@core3d/sdk';
2import { Adapter } from '@core3d/sdk-adapter-three';
3
4async function main() {
5    const core3d = new Core3D({
6        apiKey: '<your core3d api token>',
7        createAdapter: ctx => new Adapter(ctx),
8    });
9
10    const model = await core3d.loadModel(Model.Tee);
11
12    const resources = await Promise.all([
13        core3d.loadGraphic('/images/graphic-core3d.png'),
14        core3d.loadPattern('/images/pattern-03.png'),
15    ]);
16
17    const { design } = await core3d.generateDesign({
18        model,
19        resources,
20    });
21
22    // `generateDesign` creates the assignments for us, so we reach into the
23    // design afterwards to render the graphic at a higher resolution.
24    function sharpenGraphics() {
25        for (const modifier of design.modifiers) {
26            if (isGraphicAssignment(modifier)) {
27                modifier.setQuality(Quality['4k']);
28            }
29        }
30    }
31
32    sharpenGraphics();
33
34    await design.render();
35
36    const scene = await core3d.loadScene({
37        layout: 'front',
38        target: design,
39    });
40
41    scene.fit();
42    scene.start();
43
44    return {
45        generate: async () => {
46            await core3d.generateDesign({
47                design,
48                resources,
49            });
50
51            sharpenGraphics();
52
53            await design.render();
54        },
55        scene,
56    };
57}
58
59export {
60    main,
61};

Breaking It Down

First, we initialize the Core3D SDK. You'll need your own API token for this.

example.ts

5    const core3d = new Core3D({
6        apiKey: '<your core3d api token>',
7        createAdapter: ctx => new Adapter(ctx),
8    });

Then we load a publicly available t-shirt model.

example.ts

10    const model = await core3d.loadModel(Model.Tee);

Then we load the graphic and pattern resources. These point at files in the app's public directory, but loadGraphic() and loadPattern() also accept an Upload URI (core3d:upload:...) if you'd rather store artwork in your Core3D account.

example.ts

12    const resources = await Promise.all([
13        core3d.loadGraphic('/images/graphic-core3d.png'),
14        core3d.loadPattern('/images/pattern-03.png'),
15    ]);

Then, a call to the generateDesign helper. We pass in our model and resources, and the helper will apply them to the design by selecting randomly from a set of resource application conventions. Some examples are:

Apply the graphic to the center chest, or left sleeve
Make the graphic large (or small, or medium)
Rotate the pattern by 50%
... and so on

example.ts

17    const { design } = await core3d.generateDesign({
18        model,
19        resources,
20    });

Because generateDesign creates the assignments for us, anything we want to tune afterwards has to be found on the design rather than captured at apply time. Here we walk design.modifiers, pick out the graphic assignments with the isGraphicAssignment type guard, and raise each one to 4k so the artwork stays sharp.

We pull this into a function because regenerating replaces the assignments -- the generate helper below calls it again each time.

example.ts

22    // `generateDesign` creates the assignments for us, so we reach into the
23    // design afterwards to render the graphic at a higher resolution.
24    function sharpenGraphics() {
25        for (const modifier of design.modifiers) {
26            if (isGraphicAssignment(modifier)) {
27                modifier.setQuality(Quality['4k']);
28            }
29        }
30    }
31
32    sharpenGraphics();

Render the design to ensure the resources are loaded and applied.

example.ts

34    await design.render();

We then load a scene where we can display the design.

example.ts

36    const scene = await core3d.loadScene({
37        layout: 'front',
38        target: design,
39    });
40
41    scene.fit();
42    scene.start();

Then we return some helpers that can be utilized in the React component.

example.ts

44    return {
45        generate: async () => {
46            await core3d.generateDesign({
47                design,
48                resources,
49            });
50
51            sharpenGraphics();
52
53            await design.render();
54        },
55        scene,
56    };

Finally, on the component side, we hand main to the shared LiveExample component and give it an action, which renders the Generate button and wires its click handler to the example's generate function.

React Usage

1import { LiveExample } from '@/components/LiveExample';
2import { main } from './example';
3
4function Component() {
5    return (
6        <LiveExample
+7            action={{
+8                label: 'Generate',
+9                onClick: result => result.generate(),
+10            }}
+11            main={main}
12        />
13    );
14}
15
16export {
17    Component,
18};

Generate a Design

Contents

Example

Code

Breaking It Down

Get in touch