Create a Graphic Tee

This guide will walk you through how to create a simple graphic tee using the SDK. We'll load an image and place it on the front of the shirt.

INFO

Check out the Create a Design guide before this one, it has info on setting up your development environment and most of the code below, which we'll skip here.

Example
Code
Breaking It Down
Loading Your Own Artwork

Example

The tee below is rendered by the exact code in the next section -- drag to rotate it, scroll to zoom.

Code

example.ts

React Usage

LiveExample.tsx

1import { Core3D, Material, Model, Quality } 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 design = core3d.createDesign();
11    const model = await core3d.loadModel(Model.Tee);
12    const cotton = await core3d.loadMaterial(Material.Cotton);
13
14    design.setModel(model);
15
16    for (const mesh of design.listMeshes()) {
17        design.apply(cotton, mesh);
18    }
19
20    const graphic = await core3d.loadGraphic('/images/graphic.png');
21    const zone = design.listZones().find(zone => /front/i.test(zone.getName()));
22
23    if (zone) {
24        const assignment = design.apply(graphic, zone);
25        assignment.setSize(20, 'cm');
26        assignment.setQuality(Quality['4k']);
27    }
28
29    await design.render();
30
31    const scene = await core3d.loadScene({
32        layout: 'front',
33        target: design,
34    });
35
36    scene.fit();
37    scene.start();
38
39    return {
40        scene,
41    };
42}
43
44export {
45    main,
46};

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 create an empty design, load the publicly available t-shirt model and cotton material, set the model on the design, and apply the cotton material to every mesh.

example.ts

10    const design = core3d.createDesign();
11    const model = await core3d.loadModel(Model.Tee);
12    const cotton = await core3d.loadMaterial(Material.Cotton);
13
14    design.setModel(model);
15
16    for (const mesh of design.listMeshes()) {
17        design.apply(cotton, mesh);
18    }

Now the part this guide is actually about. We load our artwork as a graphic, then find the Zone we want to place it in.

Zones are the printable regions defined on a model -- the t-shirt model has a few, so we search for one named something like "front" rather than hard-coding an index.

example.ts

20    const graphic = await core3d.loadGraphic('/images/graphic.png');
21    const zone = design.listZones().find(zone => /front/i.test(zone.getName()));

Applying the graphic to the zone returns an assignment, which is the handle you use to position, scale, rotate, and set the resolution of that particular placement. Here we size the graphic to 20cm across and render it at 4k so the artwork stays sharp up close.

example.ts

23    if (zone) {
24        const assignment = design.apply(graphic, zone);
25        assignment.setSize(20, 'cm');
26        assignment.setQuality(Quality['4k']);
27    }

Quality is per-assignment, so you can spend resolution where it matters and keep it low elsewhere. Quality is an enum rather than a plain string union -- reach for Quality['4k'] instead of '4k'.

Finally we render the design, boot up a scene, fit() the viewport to the design, and start() the scene to enable controls and auto-updates.

example.ts

29    await design.render();
30
31    const scene = await core3d.loadScene({
32        layout: 'front',
33        target: design,
34    });
35
36    scene.fit();
37    scene.start();

Loading Your Own Artwork

The example above passes a URL to loadGraphic(), which is the quickest way to get going -- any path your page can reach will do, including a file in your app's public directory.

loadGraphic() also accepts an Upload URI (core3d:upload:...) if you'd rather store artwork in your Core3D account. You can create an upload via the Create Upload endpoint, an SDK method (await core3d.api.uploads.create({ file: File })), or by following the Generate An Image guide to use our AI features.

// a URL, absolute or relative to your page
await core3d.loadGraphic('/images/graphic.png');
await core3d.loadGraphic('https://example.com/artwork.png');

// an Upload stored in your Core3D account
await core3d.loadGraphic('core3d:upload:...');

Create a Graphic Tee

Contents

Example

Code

Breaking It Down

Loading Your Own Artwork

Get in touch