Generate a Design

This guide will walk you through how to generate a design programmatically.

While the Core3D SDK allows you to programmatically create a design, it may be too verbose for some scenarios where you just want to visualize an image on a model. The SDK's generateDesign helper can accept a set of resources and do the heavy lifting of applying those resources for you.

INFO

Design generation is also available via the API.

Example
Code
Breaking It Down

Example

Code

example.ts

React Usage

1import { Core3D, Model } from '@core3d/sdk';
2import { Adapter } from '@core3d/sdk-adapter-three';
3
4async function main() {
5    const core3d = new Core3D({
6        apiKey: '<your core3d api token>',
7        apiUrl: '/api/proxy',
8        createAdapter: ctx => new Adapter(ctx),
9    });
10
11    const model = await core3d.loadModel(Model.Tee);
12
13    const resources = await Promise.all([
14        core3d.loadGraphic('core3d:upload:0191f63b-2c56-7f6f-ac42-7740f663e927'),
15        core3d.loadPattern('core3d:upload:018ed870-5acb-7665-8a65-046d0303a1fe'),
16    ]);
17
18    const { design } = await core3d.generateDesign({
19        model,
20        resources,
21    });
22
23    await design.render();
24
25    const scene = await core3d.loadScene({
26        layout: 'front',
27        target: design,
28    });
29
30    scene.fit();
31    scene.start();
32
33    return {
34        generate: async () => {
35            await core3d.generateDesign({
36                design,
37                resources,
38            });
39
40            await design.render();
41        },
42        scene,
43    };
44}
45
46export {
47    main,
48};

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        apiUrl: '/api/proxy',
8        createAdapter: ctx => new Adapter(ctx),
9    });

Then we load a publicly available t-shirt model.

example.ts

11    const model = await core3d.loadModel(Model.Tee);

Then we load a graphic and pattern resources with upload URIs. You'll need to provide your own upload URIs here.

example.ts

13    const resources = await Promise.all([
14        core3d.loadGraphic('core3d:upload:0191f63b-2c56-7f6f-ac42-7740f663e927'),
15        core3d.loadPattern('core3d:upload:018ed870-5acb-7665-8a65-046d0303a1fe'),
16    ]);

Then, a call to the generateDesign helper. We pass in our model and resources, and the helper will apply them to the design by selecting randomly from a set of resource application conventions. Some examples are:

Apply the graphic to the center chest, or left sleeve
Make the graphic large (or small, or medium)
Rotate the pattern by 50%
... and so on

example.ts

18    const { design } = await core3d.generateDesign({
19        model,
20        resources,
21    });

Render the design to ensure the resources are loaded and applied.

example.ts

23    await design.render();

We then load a scene where we can display the design.

example.ts

25    const scene = await core3d.loadScene({
26        layout: 'front',
27        target: design,
28    });
29
30    scene.fit();
31    scene.start();

Then we return some helpers that can be utilized in the React component.

example.ts

33    return {
34        generate: async () => {
35            await core3d.generateDesign({
36                design,
37                resources,
38            });
39
40            await design.render();
41        },
42        scene,
43    };

Finally, on the component side, we run the example's main function, append the scene to our container element, and attach a click handler to our button that calls the examples generate function.

React Usage

1import { useEffect, useRef, useState } from 'react';
2import { main } from './example';
3
4function Component() {
5    const [error, setError] = useState<string>();
6    const [isLoading, setIsLoading] = useState(true);
7    const container = useRef<HTMLDivElement>(null);
8    const result = useRef<Awaited<ReturnType<typeof main>>>();
9
10    useEffect(() => {
11        (async () => {
12            try {
+13                result.current = await main();
+14                container.current?.append(result.current.scene.element);
15            } catch (err) {
16                setError(err instanceof Error ? err.message : String(err));
17            } finally {
18                setIsLoading(false);
19            }
20        })();
21
22        return () => {
23            if (result.current?.scene.element) {
24                container.current?.removeChild(result.current?.scene.element);
25            }
26        }
27    }, []);
28
29    return (
30        <div
31            style={{
32                fontSize: '16px',
33                fontWeight: '500',
34            }}
35        >
36            <button
37                disabled={isLoading}
38                id="generate"
+39                onClick={async () => {
+40                    setIsLoading(true);
+41                    await result.current?.generate();
+42                    setIsLoading(false);
+43                }}
44                style={{
45                    backgroundColor: '#6d28d9',
46                    borderRadius: '5px',
47                    color: 'white',
48                    marginBottom: '8px',
49                    padding: '8px 16px',
50                }}
51            >Generate</button>
52            <div
53                style={{
54                    aspectRatio: 16/9,
55                    borderRadius: '5px',
56                    overflow: 'hidden',
57                    position: 'relative',
58                    width: '100%',
59                }}
60            >
61                {error && (
62                    <div
63                        style={{
64                            alignItems: 'center',
65                            backgroundColor: 'rgba(139, 0, 0, 0.5)',
66                            bottom: '0',
67                            color: 'white',
68                            display: 'flex',
69                            justifyContent: 'center',
70                            left: '0',
71                            position: 'absolute',
72                            right: '0',
73                            top: '0',
74                        }}
75                    >
76                        <span>{error}</span>
77                    </div>
78                )}
79                {!error && isLoading && (
80                    <div
81                        style={{
82                            alignItems: 'center',
83                            backgroundColor: 'rgba(0, 0, 0, 0.5)',
84                            bottom: '0',
85                            color: 'white',
86                            display: 'flex',
87                            justifyContent: 'center',
88                            left: '0',
89                            position: 'absolute',
90                            right: '0',
91                            top: '0',
92                        }}
93                    >
94                        <span>Loading...</span>
95                    </div>
96                )}
97                <div
98                    ref={container}
99                    style={{
100                        aspectRatio: 16/9,
101                        backgroundColor: '#fafafa',
102                    }}
103                />
104            </div>
105        </div>
106    );
107}
108
109export {
110    Component,
111};

Generate a Design

Contents

Example

Code

Breaking It Down

Get in touch