Getting Started

You can use C3D Web Viewer API with JavaScript/TypeScript projects.

Importing the Package

Adding to your project (CommonJS):

import c3dvision = require("@c3dlabs/c3dviewer-api")

Adding to your project (ES Modules):

import c3dvision from "@c3dlabs/c3dviewer-api"

Creating a C3D Vision Instance

The next step is to initialize a C3D Vision instance.

Initializing instance (TypeScript):

const settings: c3dvision.ViewerSettings = {
    c3dService: {
        host: 'http://127.0.0.1',
        port: '12345'
    }
}
const instance = await c3dvision.createC3DViewer(settings)

Function c3dviewer.createC3DViewer(..) is asynchronous (returns a promise object of an instance). It means that this needs an await operator or a .then(..).catch(..) construction.

You can find out more about available settings here.

Initializing a Viewport

Now it remains only to initialize a viewport to display a graphic scene.

Initializing a viewport (TypeScript):

const viewport_settings: c3dvision.ModelViewSettings = {
    environment:{
        background:{
            brush:"LinearGradient",
            color_1:{
                "r":255,
                "g":255,
                "b":255
            },
            color_2:{
                "r":200,
                "g":235,
                "b":255
            }
        }
    }
}
const view: c3dvision.C3DModelView = await instance.createView('#view', viewport_settings, {})

Here we can see the following things: a HTML element with ID “view” (it can be any you choose) on a web page and viewport settings specifying only a background filling (LinearGradient).

You can find out more about viewport setting here.

The third parameter of createView(..) function is options. This isn’t required one, but it allows you to:

• set a workspace UUID to connect a workspace prepared or to prepare workspace for further connection;

• set callbacks for model operations (adding, removing, loading, clearing), building processes (adding/removing nodes) and picking up of model elements;

• set a debug object to get performance information.

Adding a Model to a Scene

You can add models to a scene using the C3D Service. It was prepared at the stage of creating an instance.

Important

A service port for HTTP calls differs from a port for C3D Vision interaction. They are usually 12345 for Vision and 12344 for HTTP.

Request to the Service for adding a model to a workspace:

POST /sessions/workspaces/{uuid}/models
Content-Type: application/json

{"withCleaning": "true", "models": ["local://{model}.c3d"]}

You can remove models from a scene in the same way via a request

DELETE /sessions/workspaces/{uuid}/models
Content-Type: application/json

{"models": ["local://{model}.c3d"]}

Running a Process

You can find out about all the available processes here, as well as about the possible commands here.

You have an ability to try processes. Use, for example, the well-known function “Hello, World!”.

Run default process with event callbacks (TypeScript):

view.runCommand({
    name: "RunProcessCommand",
    process: {
        name: "Default",
        options: {},
        events: {
            onEdit(xClient, yClient, uuid) {
                console.log(`onEdit event: ${xClient}, ${yClient}, ${uuid}`)
            },
            onEditText(uuid, index) {
                console.log(`onEditText event: ${uuid}, ${index}`)
            },
            onContextMenu(xClient, yClient, uuid) {
                console.log(`onContextMenu event: ${xClient}, ${yClient}, ${uuid}`)
            },
            onHint(xClient, yClient, uuid) {
                console.log(`onHint event: ${xClient}, ${yClient}, ${uuid}`)
            },
            onSelect(uuid) {
                console.log(`onSelect event ${uuid}`)
                // Return `true` to highlight the selected geometry
                return true
            },
        }
    }
})