Kova in your page, in a few lines of code.

The JavaScript SDK puts a Kova Secure scene in an iframe, and you drive it from your own interface. The rendering happens on our servers.

See the SDK at work

index.html

<div id="viewer"></div>
<script type="module">
  import { Kova3D }
    from 'https://kova3d.com/sdk/kova3d.js';
  Kova3D.embed(document.getElementById('viewer'), {
    model: 'demo:config-car'
  });
</script>

Reference.

Kova3D.embed(element, options) creates the iframe and returns a viewer. Its commands wait for viewer.ready and return a promise.

Embed options

model: The model id.
ui: none: the 3D only (default). configurator: the built-in option panel.
theme: showroom, dark (default), or studio, light.
turn: true (default): the model turns slowly. false: it stays still.
host: The engine’s address. Defaults to where the SDK was loaded from.
loading: lazy (default): starts near the viewport. eager: right away.
title: The iframe’s accessible title.

Models

demo:config-car: The demo car.
demo:config-chair: The demo accent chair.
demo:config-watch: The demo watch.
Your models: By arrangement with Kova.

Example

app.js

const viewer = Kova3D.embed(document.getElementById('viewer'), {
  model: 'demo:config-car'
});

viewer.on('change', (config) => {
  console.log(config.groups);
});

await viewer.setOption('wheels', 'turbine');

Methods

ready: A promise that resolves once the model is displayed: { model, config }.
getConfig(): The current configuration.
setOption(): Shows option optionId of group groupId.
focus(): Flies the camera to group groupId; null goes back to the whole model.
setSlider(): Moves slider sliderId from 0 to 1: doors, exploded view, animation.
setColor(): Paints the part part in #rrggbb; null restores its colour.
setMaterial(): Gives the part part the material presetId; null restores its own.
setTheme(): studio or showroom.
setTurn(): Starts or stops the rotation.
screenshot(): A PNG rendered on the server, at the { width, height } you ask for.
on(), off(): Adds or removes an event listener.
destroy(): Removes the iframe and the listeners.

Events

change: Fires after every change, whether it comes from your page, the 3D view or the built-in panel. Receives the configuration.
select: A click on a part: { part, name, group }.
hover: The pointer on a part: { part, name }, or null.
error: An error: { message }.

The SDK at work.

This configurator uses nothing but the SDK. To use it with your own models, get in touch.

You’ll be talking to the people who build your 3D, here in Québec.

The car

Book a discovery call