Create An All-Over Print 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 all-over print tee using the SDK. We'll load a custom image and place it on every part of the model.

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);
const pattern = await core3d.loadPattern('core3d:upload:018d43a7-6826-715d-a20f-91a2eef87642');

design.setModel(model);

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

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 new line to load a pattern and then apply it to every mesh on top of our cotton material.

const pattern = await core3d.loadPattern('core3d:upload:018d43a7-6826-715d-a20f-91a2eef87642');

// ...

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

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