Create A Graphic Tee

Note: 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.

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.

Contents

• Step 1 — The Code
• Step 2 — Breaking It Down

Step 1 — The Code

In this step we'll create a new design and render it in the browser. We'll show the full snippet here so that you can get a sense of the entire process and we'll break down each part afterwards.

import { Core3D, Material, Model } from '@core3d/sdk';
import { Adapter } from '@core3d/sdk-adapter-three';

const core3d = new Core3D({
    apiKey: '...', // your Core3D API token
    createAdapter: ctx => new Adapter(ctx),
});

const design = core3d.createDesign();
const model = await core3d.loadModel(Model.Tee);
const cotton = await core3d.loadMaterial(Material.Cotton);

design.setModel(model);

for (const mesh of design.listMeshes()) {
    design.apply(cotton, mesh);
}

const graphic = await core3d.loadGraphic('core3d:upload:0190cc0f-54ce-70a2-8a75-22df198772c3');
const zone = design.listZones().find(zone => /front/i.test(zone.name));

design.apply(graphic, zone);

await design.render();

const scene = await core3d.loadScene({
  layout: 'front',
  size: [512, 512],
  target: design,
});

scene.fit();
scene.start();

document.body.append(scene.element);

Step 2 — Breaking It Down

Let's review the changes here vs. what's in the Create A Design guide.

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.name));

design.apply(graphic, zone);

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...