1// This example of demonstrates how you can
2// programmatically create a design with a
3// plain cotton material and a graphic.
4
5import { Core3D, Material, Model, Position } from '@core3d/sdk';
6import { Adapter } from '@core3d/sdk-adapter-three';
7
8// Initialize the SDK
9
10const core3d = new Core3D({
11    apiKey: '...',
12    createAdapter: ctx => new Adapter(ctx),
13});
14
15// Load the public t-shirt model, create
16// a new design, and set the working model.
17
18const model = await core3d.loadModel(Model.Tee);
19const design = core3d.createDesign();
20
21design.setModel(model);
22
23// Load the public cotton material, set the
24// color, and apply it to all meshes.
25
26const material = await core3d.loadMaterial(Material.Cotton);
27
28material.setColor('#9d9aae');
29
30for (const mesh of design.listMeshes()) {
31    design.apply(material, mesh);
32}
33
34// Load a graphic, find the mesh with a name
35// like "front", apply the graphic to the mesh,
36// and modify the graphic position.
37
38const graphic = await core3d.loadGraphic('/stripes.png');
39
40const mesh = design.listMeshes()
41    .find(mesh => /front/i.test(mesh.getName()))!;
42
43const assignment = design.apply(graphic, mesh);
44
45const position = Position.fromNode(mesh)
46    .from('c')
47    .move('r', 18, 'cm');
48
49assignment.setPosition(position);
50assignment.setRotation(0.25);
51
52// Trigger a render, which will process any and
53// all pending updates from the code above.
54
55await design.render();
56
57// Load a scene and fit the viewport to the
58// target, our design.
59
60const scene = await core3d.loadScene({
61    size: [512, 512],
62    target: design,
63});
64
65scene.fit();
66
67// Capture a screenshot, the result is a data URL.
68
69const screenshot = await scene.screenshot();