Начало работы

Вы можете использовать C3D Web Viewer API в проектах JavaScript/TypeScript.

Импорт пакета

Добавление в проект (CommonJS):

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

Добавление в проект (ES Modules):

import c3dvision from "@c3dlabs/c3dviewer-api"

Создание экземпляра C3D Vision

Следующий шаг инициализирует экземпляр C3D Vision

Инициализация экземпляра (Type Script):

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

Функция c3dviewer.createC3DViewer(..) ассинхронна (возвращает Промис). Это значит, что необходим оператор await или конструкция .then(..).catch(..).

Больше информации доступно здесь.

Инициализация вьюпорта

Теперь для отображения графической сцены осталось только инициализация вьюпорта.

Инициализация вьюпорта (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, {})

Здесь мы видим следующее: HTML-элемент с ID “view” (можно выбрать любой) на веб-странице и настройки области просмотра, указывающие только заливку фона (LinearGradient).

Более подробную информацию о настройках области просмотра можно найти здесь.

Третий аргумент функции createView(..) — это параметры. Он необязателен, но позволяет вам:

установить UUID рабочей области для подключения к подготовленной рабочей области или для подготовки рабочей области к дальнейшему подключению;
установить функции обратного вызова для операций с моделью (добавление, удаление, загрузка, очистка), процессов построения (добавление/удаление узлов) и получения элементов модели;
установить отладочный объект, чтобы получать информацию о производительности.

Добавление модели в сцену

С помощью сервиса C3D вы можете добавлять модели в сцену. Подключение к сервису было подготовлено на этапе создания экземпляра.

Важно

Порт сервиса для HTTP-запросов отличается от порта для взаимодействия с C3D Vision. Обычно это 12345 для Vision и 12344 для HTTP.

Запрос к сервису на добавление модели в рабочее пространство:

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

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

Удалять модели из сцены можно аналогичным образом, отправив запрос.

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

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

Выполнение процессов

О всех доступных процессах можно узнать здесь, а также о возможных командах здесь.

У вас есть возможность тестировать различные процессы. Используйте, например, хорошо известную функцию “Hello, World!”.

Запуск процесса по умолчанию с использованием обратных вызовов (TypeScript):

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