Create a Graphic Tee

This guide will walk you through how to create a simple graphic tee using the SDK. We'll load a custom 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.

Contents

Step 1 — The Code

In this step we'll create a new design and render it in the browser. Building upon the create a design guide, we add a few new lines to apply a graphic to the design.

1import { Core3D, Material, Model } from '@core3d/sdk';
2import { Adapter } from '@core3d/sdk-adapter-three';
3
4const core3d = new Core3D({
5 apiKey: '...', // your Core3D API token
6 createAdapter: ctx => new Adapter(ctx),
7});
8
9const design = core3d.createDesign();
10const model = await core3d.loadModel(Model.Tee);
11const cotton = await core3d.loadMaterial(Material.Cotton);
12
13design.setModel(model);
14
15for (const mesh of design.listMeshes()) {
16 design.apply(cotton, mesh);
17}
18
+19const graphic = await core3d.loadGraphic('core3d:upload:0190cc0f-54ce-70a2-8a75-22df198772c3');
+20const zone = design.listZones().find(zone => /front/i.test(zone.getName()));
+21
+22if (zone) {
+23 const assignment = design.apply(graphic, zone);
+24 assignment.setSize(20, 'cm');
+25}
26
27await design.render();
28
29const scene = await core3d.loadScene({
30 layout: 'front',
31 size: [512, 512],
32 target: design,
33});
34
35scene.fit();
36scene.start();
37
38document.body.append(scene.element);

Step 2 — Breaking It Down

We add a few new lines to load a graphic, find a Zone with a name like "front", and apply the graphic to that zone.

const graphic = await core3d.loadGraphic('core3d:upload:0190cc0f-54ce-70a2-8a75-22df198772c3');
const zone = design.listZones().find(zone => /front/i.test(zone.getName()));
if (zone) {
const assignment = design.apply(graphic, zone);
assignment.setSize(20, 'cm');
}

You'll have to swap in an Upload URI (core3d:upload:...) that your account has access to -- you can create an upload by using the Create Upload endpoint, an SDK method (await core3d.api.uploads.create({ file: File })), or follow the Generate An Image guide to utilize our AI features.

And the result is...

graphic tee

Get in touch

We'd love to learn more about your vision and how we can help.

PressPrivacyTermsSupportCopyright © 2024 Core3D, Inc. All Rights Reserved.