Simplio3D

3D Viewer

Embed and control the 3D viewer. Manage camera, lighting, state, and take screenshots.

Get Embed Config

const config = await client.getViewerEmbedConfig('proj_123');
console.log('Camera:', config.cameraPosition);
console.log('Environment:', config.environmentPreset);
console.log('AR enabled:', config.enableAR);

Get Viewer State

const state = await client.getViewerState('proj_123');
console.log('Loaded:', state.loaded);
console.log('Selections:', state.selections);
console.log('Visible blocks:', state.visibleBlocks);
console.log('Price:', state.currentPrice?.totalPrice);

Set Viewer State

const newState = await client.setViewerState('proj_123', {
  loaded: true,
  selections: {
    dropdownSelections: { 'blk_frame': 'silver' },
    selectMaterialSelections: {},
    checkboxSelections: {},
    toggleSwitchSelections: {},
    carouselSelections: {}
  },
  visibleBlocks: ['blk_001', 'blk_002'],
  cameraPosition: [3, 2, 5],
  cameraTarget: [0, 0.5, 0]
});

Continue reading