Create an All-Over Print Tee
This guide will walk you through how to create a simple all-over print tee using the SDK. We'll load a repeating pattern and apply it to every part of the model.
Contents
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 } from '@core3d/sdk';2import { Adapter } from '@core3d/sdk-adapter-three';34async function main() {5 const core3d = new Core3D({6 apiKey: '<your core3d api token>',7 createAdapter: ctx => new Adapter(ctx),8 });910 const design = core3d.createDesign();11 const model = await core3d.loadModel(Model.Tee);12 const cotton = await core3d.loadMaterial(Material.Cotton);13 const pattern = await core3d.loadPattern('/images/pattern-01.jpg');1415 design.setModel(model);1617 for (const mesh of design.listMeshes()) {18 design.apply(cotton, mesh);19 design.apply(pattern, mesh);20 }2122 await design.render();2324 const scene = await core3d.loadScene({25 layout: 'front',26 target: design,27 });2829 scene.fit();30 scene.start();3132 return {33 scene,34 };35}3637export {38 main,39};
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 and load our resources -- the publicly available t-shirt model, the cotton material, and the pattern we want to print.
Patterns are loaded with loadPattern() rather than loadGraphic(). The distinction matters: a graphic is a single non-repeating image placed inside a Zone, whereas a pattern tiles across whatever it's applied to. That's what makes it the right fit for an all-over print.
- example.ts
10 const design = core3d.createDesign();11 const model = await core3d.loadModel(Model.Tee);12 const cotton = await core3d.loadMaterial(Material.Cotton);13 const pattern = await core3d.loadPattern('/images/pattern-01.jpg');
Now the part this guide is actually about. We set the model on the design, then apply both the cotton material and the pattern to every mesh.
Because we're iterating over design.listMeshes() instead of looking up a Zone, the pattern lands on the whole garment -- sleeves, body, collar -- rather than being confined to a printable region. Order matters here: the material goes on first and the pattern on top of it.
- example.ts
15 design.setModel(model);1617 for (const mesh of design.listMeshes()) {18 design.apply(cotton, mesh);19 design.apply(pattern, mesh);20 }
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
22 await design.render();2324 const scene = await core3d.loadScene({25 layout: 'front',26 target: design,27 });2829 scene.fit();30 scene.start();
Loading Your Own Pattern
The example above passes a URL to loadPattern(), 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.
loadPattern() 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 pageawait core3d.loadPattern('/images/pattern-01.jpg');await core3d.loadPattern('https://example.com/pattern.png');// an Upload stored in your Core3D accountawait core3d.loadPattern('core3d:upload:...');