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.
- index.ts
1import { Core3D, Material, Model } from '@core3d/sdk';2import { Adapter } from '@core3d/sdk-adapter-three';34const core3d = new Core3D({5 apiKey: '...', // your Core3D API token6 createAdapter: ctx => new Adapter(ctx),7});89const design = core3d.createDesign();10const model = await core3d.loadModel(Model.Tee);11const cotton = await core3d.loadMaterial(Material.Cotton);1213design.setModel(model);1415for (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}2627await design.render();2829const scene = await core3d.loadScene({30 layout: 'front',31 size: [512, 512],32 target: design,33});3435scene.fit();36scene.start();3738document.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...