View

Taking a screenshot

An example of creating a cube and exporting a screenshot by setting the camera to a specific angle. You should get something like , depending on viewport and platform.

async function createCube(model) {
    await model.performOperation(async op => {
        const group = op.createGroup(model);
        const bbl = [0, 0, 0];
        const btl = [0, 100, 0];
        const btr = [100, 100, 0];
        const bbr = [100, 0, 0];

        const tbl = [0, 0, 100];
        const ttl = [0, 100, 100];
        const ttr = [100, 100, 100];
        const tbr = [100, 0, 100];

        const bottom = op.createFace(group, [bbl, btl, btr, bbr]);
        op.faceSetFrontMaterialName(bottom, 'blue');
        op.faceSetBackMaterialName(bottom, 'blue');

        const top = op.createFace(group, [tbl, ttl, ttr, tbr]);
        op.faceSetFrontMaterialName(top, 'red');
        op.faceSetBackMaterialName(top, 'red');

        const right = op.createFace(group, [bbr, bbl, tbl, tbr]);
        op.faceSetFrontMaterialName(right, 'yellow');
        op.faceSetBackMaterialName(right, 'yellow');

        const left = op.createFace(group, [btl, btr, ttr, ttl]);
        op.faceSetFrontMaterialName(left, 'green');
        op.faceSetBackMaterialName(left, 'green');

        const front = op.createFace(group, [bbl, btl, ttl, tbl]);
        op.faceSetFrontMaterialName(front, 'purple');
        op.faceSetBackMaterialName(front, 'purple');

        const back = op.createFace(group, [btr, bbr, tbr, ttr]);
        op.faceSetFrontMaterialName(back, 'magenta');
        op.faceSetBackMaterialName(back, 'magenta');
    }, 'create cube');
}

function downloadURI(uri, name) {
    const link = document.createElement("a");
    link.download = name;
    link.href = uri;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

let model = await SketchUpApi.getActiveModel();
await createCube(model);

// position the camera
let camera = SketchUpApi.Camera.default()
    .setOrientation([100, 100, 100], [50, 50, 50], [0, 0, 1])
    .setPerspective(false)
    .setHeight(100);
await model.view.setCamera(camera);

// Get the screenshot as a dataURL and download it
let screenshot = await model.view.getScreenshot('jpg', {});
downloadURI(screenshot, 'cube.jpg');

Taking a screenshot with render options

An example of exporting a screenshot with a white background and shadows disabled.

Note: renderOptions is not available when connected to the Ruby version of the JSA backend, check SketchUpApi.platform.supportsScreenshotRenderOptions before using it.

let model = await SketchUpApi.getActiveModel();

let screenshot = await model.view.getScreenshot('png', {
    renderOptions: {
        whiteBackground: true,
        disableShadows: true,
    },
});
console.log(screenshot);