Screenshots

Rendering a 3D model isn't practicle in many scenarios. It's helpful to have an image of the design that you can optimize and send down to users without worrying.

This feature is available via SDK screenshots -- we call them "screenshots" because they're not quite renders (as in "high-res" or "high-quality" renders), but they're suitable for a ton of use cases. If you need a high quality render captured by a render farm, reach out and we can enable them for you via the Core3D API or talk you through alternatives.

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.

Step 1 — Iterate Camera Positions
Step 2 — Going Further

Step 1 — Iterate Camera Positions

You can capture a series of screenshots using a combination of some scene configuration options and the SceneInterface.screenshot() method.

index.ts

1import { Core3D, Material, Model, type SceneCamera } from '@core3d/sdk';
2import { Adapter } from '@core3d/sdk-adapter-three';
3
4const core3d = new Core3D({
5    apiKey: '...', // your Core3D API token
6    createAdapter: ctx => new Adapter(ctx),
7});
8
9const design = core3d.createDesign();
10const model = await core3d.loadModel(Model.Tee);
11const cotton = await core3d.loadMaterial(Material.Cotton);
12
13design.setModel(model);
14
15for (const mesh of design.listMeshes()) {
16    design.apply(cotton, mesh);
17}
18
19await design.render();
20
21const scene = await core3d.loadScene({
22    layout: 'front',
23    size: [512, 512],
24    target: design,
25});
26
27scene.fit();
28scene.start();
29
30document.body.append(scene.element);
31
+32const positions: SceneCamera[] = [
+33    'f',
+34    'fl',
+35    'l',
+36    'bl',
+37    'b',
+38    'br',
+39    'r',
+40    'fr',
+41];
+42
+43const screenshots: Partial<Record<SceneCamera, string>> = {};
+44
+45for (const position of positions) {
+46    await scene.configure({ camera: position });
+47    screenshots[position] = await scene.screenshot();
+48    await new Promise(resolve => setTimeout(resolve, 1000));
+49}
+50
+51console.log(screenshots);

Here we iterate over all of the camera positon helper values, configure the scene to that camera position, and capture a screenshot in that position. The resulting screenshots object is a key/value object:

console.log(screenshots);

// {
//     "f": "data:image/png;base64,...",
//     "fr": "data:image/png;base64,...",
//     ...
// }

Step 2 — Going Further

Now that you have data URLs, you can store them ephemerally in the browser session or push them up to your backend or the Core3D API for storage.

Screenshots

Contents

Step 1 — Iterate Camera Positions

Step 2 — Going Further

Get in touch