Настройки отображения

Далее мы рассмотрим настройки отображения как обязательный параметр для функции c3dinstance.createView(..).

Настройки отображения, в отличие от параметров вида, не остаются неизменными на протяжении всего существования области просмотра и могут быть изменены путем вызова соответствующих команд.

Основные настройки отображения (TypeScript):

export type ModelViewSettings = {
    environment?:{
        /**
         * background of the model view
         */
        background?:BackgroundParams
        /**
         * lightings settings of the model view
         */
        lightings?:LightingsParams
        /**
         * Default values
         */
        default?:{
            /**
             * Camera params.
             * Default: ISO, Orthogonal
             */
            camera?:CameraParams
            /**
             * Render mode
             * Default: shaded
             */
            renderMode?:RenderMode
            /**
             * View marker params.
             * Default: Bottom right, Visible
             */
            viewMarker?:ViewMarkerParams
            /**
             * Enabled camera controls processes
             * Default: Pan, Zoom, Orbit
             */
            cameraControls?: CameraControl[]
        }
    }
    /**
     * workspace settings
     */
    workspace?:WorkspaceParams
}

Каждое поле этого типа представляет собой так называемые параметры, которые объединены в C3DModelViewParams. API веб-вьюера C3D позволяет изменять различные визуальные свойства C3DModelView.

Примечание

Тип ModelViewSettings — это всего лишь распространенный вариант структуры настроек. Этот типизированный объект сам по себе не изменяет параметры напрямую в API вьюера! Он только хранит данные настроек API.

Добавлено в версии 1.8.0: Добавлено свойство cameraControls.

Параметры

API веб-вьюера C3D позволяет пользователю назначать любым свойствам C3DModelViewParams пользовательские значения. Это становится возможным благодаря методу интерфейса C3DModelView:

export interface C3DModelView {
    ...
    setParameters(parameters: settings.C3DModelViewParams): any
    ...
}

В качестве параметра эта функция принимает объект следующего типа:

export type C3DModelViewParams =
    | { name: "lightings" }         & LightingsParams
    | { name: "camera" }            & CameraParams & Animate
    | { name: "background" }        & BackgroundParams
    | { name: "renderMode" }        & RenderModeParam
    | { name: "viewMarker" }        & ViewMarkerParams
    | { name: "workspace" }         & WorkspaceParams
    | { name: "cameraControls" }    & CameraControlsParams

Как видите, этот тип объединения состоит из нескольких типов, каждый из которых имеет:

• Обязательное свойство name, описывающее имя конкретных параметров;

• type, описывающий другие свойства каждого параметра.

Все существующие типы параметров мы рассмотрим чуть позже.

Пример установки свойств BackgroundParams (TypeScript):

view.setParameters({
    name: 'background', // name of 'params'
    // the rest properties are from 'BackgroundParams'
    brush: 'LinearGradient',
    color_1: color_1,
    color_2: color_2
})

Примечание

Метод setParameters() изменяет значения свойств params непосредственно в API веб-вьюера C3D. После вызова этой функции вы увидите реальные изменения в графической сцене Vision.

Добавлено в версии 1.8.0: Добавлен параметр CameraControlsParams.

Теперь давайте рассмотрим значение всех параметров представления.

Фон

Этот параметр можно указать через ModelViewSettings.environment.background здесь.

На данный момент доступны только два типа фона: сплошной и градиентный.

Первый тип может быть сконфигурирован с помощью следующего типа объекта.

Сплошной фон (TypeScript):

export type SolidBackground = {
    brush:"Solid"
    r:number
    g:number
    b:number
}

SolidBackground.r, SolidBackground.g и SolidBackground.b объединяются в группу RGB выбранных цветов. Каждый цветовой элемент может иметь значение в диапазоне от 0 до 255.

Фоновый градиент инициализируется по-другому.

Градиентный фон (TypeScript):

export type LinearGradientBackground = {
    brush:"LinearGradient"
    color_1:{
        r:number
        g:number
        b:number
    }
    color_2:{
        r:number
        g:number
        b:number
    }
}

Здесь определены два цвета с использованием RGB также как для сплошного фона.

Примечание

В настоящий момент доступен только один вариант заливки фонового градиента. Это снизу вверх (color_1) (color_2).

Важно

Если у вас версия ниже 1.5.0, используйте заглавные буквы для обозначения цвета в настройках фона (“R”, “G” и “B”).

Изменить background можно следующим способом:

view.setParameters({
    name: 'background',
    brush: 'LinearGradient',
    color_1: color_1,
    color_2: color_2
})

Здесь в качестве параметра принимается объект типа BackgroundParams.

Освещение

Этот параметр можно указать через ModelViewSettings.environment.lightings здесь.

Общее освещение (TypeScript):

export type LightingsParams = {
    enable?: boolean,
    sources?:(DirectLightSource|PointLightSource|SpotLightSource)[]
}

При этом может быть несколько источников света (LightingsParams.sources), по умолчанию имеющих белый цвет. Однако каждый источник может иметь разные типы:

• direct. Оно ведёт себя в основном подобно солнцу. Направленные источники света можно рассматривать как удаленные источники света, находящиеся на бесконечно большом расстоянии. У направленного источника света нет идентифицируемого местоположения, поэтому объект освещения может быть размещен в любом месте сцены («позиция»). Все объекты в сцене освещены (color) так, как если бы свет всегда исходил из одного и того же направления. Расстояние от источника света до целевого объекта не определено, поэтому интенсивность света не уменьшается.

  export type DirectLightSource = {
      type: "Direct"
      position: C3DViewPoint
      color?: C3DViewRGB
  }
  

• point. Точечный источник света расположен в точке пространства (position) и излучает свет (color) во всех направлениях равномерно. Направление света, падающего на поверхность, представляет собой линию, идущую от точки контакта обратно к центру светящегося объекта. Интенсивность уменьшается с расстоянием от источника света (attenuationConst и attenuationLinear), достигая нуля в заданном диапазоне. Интенсивность света обратно пропорциональна квадрату расстояния от источника. Это называется «законом обратных квадратов» и аналогично тому, как свет ведет себя в реальном мире.

  export type PointLightSource = {
      type: "Point"
      position: C3DViewPoint
      attenuationConst: number
      attenuationLinear: number
      color?: C3DViewRGB
  }
  

• spot. Подобно точечному источнику света, прожектор имеет заданное местоположение (position) и диапазон (attenuationConst и attenuationLinear), в пределах которого интенсивность света (color) уменьшается. Однако прожектор ограничен углом (cutoffAngle), в результате чего область освещения приобретает конусообразную форму (direction). Центр конуса направлен вперед (по оси Z) относительно светового объекта. Свет также ослабевает на краях конуса точечного источника света (spotExponent). Увеличение угла наклона повышает ширину конуса и, соответственно, увеличивает размер этого перехода, известного как «полутень».

  export type SpotLightSource = {
      type: "Spot"
      position: C3DViewPoint
      direction: C3DViewPoint
      attenuationConst: number
      attenuationLinear: number
      cutoffAngle: number
      spotExponent: number
      color?: C3DViewRGB
  }
  

Объект-точка, используемый в источниках света (TypeScript):

export type C3DViewPoint = {
    x: number
    y: number
    z: number
}

Объект, определяющий цвет RGB в источниках света (TypeScript):

export type C3DViewRGB = {
    r: number
    g: number
    b: number
}

Инициализация камеры

Этот параметр можно указать через ModelViewSettings.environment.default.camera здесь.

Тип общих параметров камеры (TypeScript):

export type CameraParams = {
    orientation?: StandardCameraOrientation|CustomCameraOrientation
    projection?: CameraProjection
    stdUpVector?: StdCameraUpVectorsList
}

Параметры камеры:

• Ориентация камеры (orientation): standard или custom.

• projection: CameraProjection.Perspective ("Perspective") или CameraProjection.Orthogonal ("Orthogonal").

• ось направленная ​​вверх для стандартной ориентации камеры (stdUpVector):

  • StdCameraUpVectorsList.XAxios (0): X-ось;

  • StdCameraUpVectorsList.YAxios (1): ось Y;

  • StdCameraUpVectorsList.ZAxios (2): Z-ось.

Изменить камеру можно следующим способом здесь:

view.setParameters({
    name: 'camera',
    // changing only 'projection' property of 'CameraParams'
    projection
})

Примечание

Если при изменении параметров камеры используется свойство stdUpVector, но отсутствует свойство orientation, то ориентация камеры рассчитывается автоматически для коррекции текущего вектора направления вверх.

Здесь в качестве параметра принимается объект типа CameraParams.

Стандартные ориентации камеры

Константа	Значение	Описание
StdCameraOrientationsList.Left	"Left"	Слева
StdCameraOrientationsList.Right	"Right"	Справа
StdCameraOrientationsList.Up	"Up"	Сверху
StdCameraOrientationsList.Down	"Down"	Снизу
StdCameraOrientationsList.Front	"Front"	Спереди
StdCameraOrientationsList.Rear	"Rear"	Сзади
StdCameraOrientationsList.ISO	"ISO"	Изометрия
StdCameraOrientationsList.IsoUFL	"IsoUFL"	Изометрия (Верх/Спереди/Слева)
StdCameraOrientationsList.IsoURL	"IsoURL"	Изометрия (Верх/Сзади/Слева)
StdCameraOrientationsList.IsoURR	"IsoURR"	Изометрия (Верх/Сзади/Справа)
StdCameraOrientationsList.IsoDFR	"IsoDFR"	Изометрия (Низ/Спереди/Справа)
StdCameraOrientationsList.IsoDFL	"IsoDFL"	Изометрия (Низ/Спереди/Слева)
StdCameraOrientationsList.IsoDRL	"IsoDRL"	Изометрия (Низ/Сзади/Слева)
StdCameraOrientationsList.IsoDRR	"IsoDRR"	Изометрия (Низ/Сзади/Справа)
StdCameraOrientationsList.IsoUF	"IsoUF"	Изометрия (Верх/Спереди)
StdCameraOrientationsList.IsoUL	"IsoUL"	Изометрия (Верх/Слева)
StdCameraOrientationsList.IsoURt	"IsoURt"	Изометрия (Верх/Справа)
StdCameraOrientationsList.IsoURr	"IsoURr"	Изометрия (Верх/Сзади)
StdCameraOrientationsList.IsoDF	"IsoDF"	Isometric position, union of orientations Down, and Front
StdCameraOrientationsList.IsoDL	"IsoDL"	Изометрия (Низ/Слева)
StdCameraOrientationsList.IsoDRr	"IsoDRr"	Изометрия (Низ/Сзади)
StdCameraOrientationsList.IsoDRt	"IsoDRt"	Изометрия (Низ/Справа)
StdCameraOrientationsList.IsoFRt	"IsoFRt"	Изометрия (Спереди/Справа)
StdCameraOrientationsList.IsoFL	"IsoFL"	Изометрия (Спереди/Слева)
StdCameraOrientationsList.IsoRrL	"IsoRrL"	Изометрия (Сзади/Слева)
StdCameraOrientationsList.IsoRrRt	"IsoRrRt"	Изометрия (Сзади/Справа)

Добавлено в версии 1.8.0: Добавление дополнительных стандартных ориентаций

Пользовательские ориентации камеры

Для настройки ориентации камеры вместо использования константы перечисления или строкового значения стандартной ориентации следует создать объект следующего типа.

Пользовательский объект ориентации камеры (TypeScript):

 export type CustomCameraOrientation = {
    type:"custom",
    eyeVector: {
        x:number,
        y:number,
        z:number,
    }, 
    upVector: {
        x:number,
        y:number,
        z:number,
    },
    target?: {
        x:number,
        y:number,
        z:number,
    },
    distance?:number,
}

Свойство	Описание
eyeVector	Вектор взгляда на цель.
upVector	Вектор вверх камеры
target	Позиция цели камеры
distance	Расстояние от точки взгляда до цели

Примечание

Настройки камеры можно изменить с помощью команды command.

Инициализация режима рендеринга

Этот параметр можно указать через ModelViewSettings.environment.default.renderMode здесь.

Доступные режимы рендеринга:

• shaded: показаны только поверхности модели.

• “wireFrame”: отображаются только ребра.

• “shadedAndWireFrame”: поверхности и ребра модели отображаются вместе.

Режим рендеринга можно задать с помощью обычной константы.

Изменить renderMode можно следующим способом здесь:

view.setParameters({
    name: 'renderMode',
    mode
})

Здесь в качестве параметра принимается объект типа RenderModeParam.

Маркер вида

Маркер показывает текущее положение камеры относительно основных координатных осей. Его можно скрыть или разместить в одном из четырех углов окна просмотра.

Добавлено в версии 1.9.0: Добавлено представление в виде куба.

Этот параметр можно указать с помощью ModelViewSettings.viewMarker здесь.

Тип объекта-маркера (TypeScript):

export type ViewMarkerParams = {
    position?: C3DViewScreenPosition
    visible?: boolean
    representation?: ViewMarkerRepresentation
}

Объект типа «маркер» включает следующие свойства.

Position

Это свойство определяет положение маркера в области просмотра.

export enum C3DViewScreenPosition {
    TopLeft = "topLeft",
    TopRight = "topRight",
    BottomLeft = "bottomLeft",
    BottomRight = "bottomRight"
}

Значение по умолчанию — C3DViewScreenPosition.BottomRight.

Visible

Это свойство определяет состояние видимости маркера. Значение по умолчанию — true, что означает, что маркер виден.

Представление

Данное свойство определяет внешний вид маркера. Доступны два варианта представления:

• классическая Триада

• Куб вида

В отличие от триады, куб предоставляет дополнительные возможности для управления камерой сцены. Например, при наведении курсора на блок некоторые его части могут быть выделены, а затем с ними можно взаимодействовать с помощью мыши. Активация любой такой части, например, щелчком мыши, перемещает камеру в соответствующее положение.

Свойства можно указать следующим образом:

export type ViewMarkerRepresentation =
    | ViewMarkerTriadRepresentation
    | ViewMarkerBoxRepresentation

где ViewMarkerTriadRepresentation определяется этим типом:

export type ViewMarkerTriadRepresentation = {
    type: 'Triad'
}

и ViewMarkerBoxRepresentation - вот этот:

export type ViewMarkerBoxRepresentation = {
    type: 'Box'
}

Представление по умолчанию — ViewMarkerTriadRepresentation.

Управление камерой

Этот параметр определяет, какие процессы камеры должны быть включены в сцене, и может быть указан через ModelViewSettings.environment.default.cameraControls здесь. Процессы камеры, не включенные в переданный массив, отключены.

Общий параметр управления камерой (TypeScript):

export type CameraControlsParams = {
    controls: CameraControl[]
}

где CameraControl — это тип:

export type CameraControl =
    | { type: CameraControlsList }
    | { type: CameraControlsList.Orbit, options: CameraOrbitControlsOptions }

Он содержит тип процесса камеры, представляющий собой перечисление:

export enum CameraControlsList {
    Pan          = "Pan",
    Zoom         = "Zoom",
    Orbit        = "Orbit",
    Rotation     = "Rotation",
    FreeRotation = "FreeRotation",
    FirstPerson  = "FirstPerson",
    ConditionalRotation = "ConditionalRotation",
}

Добавлено в версии 1.8.0: Добавлены типы «От первого лица» и «Условное вращение».ё

Рабочая область

Этот параметр можно указать через ModelViewSettings.workspace здесь.

Тип объекта рабочая область (TypeScript):

export type WorkspaceParams = {
    // dynamic loading
    dynamic_build?: boolean
    // unload dynamic loaded geometry
    unload_loaded?: boolean
    colors?:{
        // color of highlighted geometry mesh
        highlightedMesh?: C3DViewRGB
        // color of selected geometry mesh
        selectedMesh?: C3DViewRGB
        // color of highlighted geometry wireframe
        highlightedWireframe?: C3DViewRGB
        // color of selected geometry wireframe
        selectedWireframe?: C3DViewRGB
        //
        groups?: ColorGroup[]
    }
},

где C3DViewRGB — это объект, содержащий комбинацию цветов RGB:

export type C3DViewRGB = {
    r: number
    g: number
    b: number
}

Объект рабочая область включает:

• dynamic_build: динамическая загрузка модели (значение по умолчанию — false);

• unload_loaded: очищает загруженные модели перед добавлением новой модели в рабочую область (значение по умолчанию — false);

• colors.highlightedMesh: цвет подсветки сетки (значение по умолчанию — red);

• colors.selectedMesh: цвет выделенной сетки (значение по умолчанию — green);

• colors.highlightedWireframe: цвет подсветки ребер (значение по умолчанию — white);

• colors.selectedWireframe: цвет выделения ребер (значение по умолчанию — белый);

• colors.groups: массив групп, хранящих данные для слоев рендеринга материалов.

Особое внимание следует уделить colors.groups. Таким образом, каждая группа в массиве представляет данные для слоя рендеринга Vision. Любой слой можно применить к любому узлу или узлам модели с помощью команды command. Это также можно назвать окрашиванием узла. Любая группа имеет тип:

export type ColorGroup =
{
    index: number // any number other than 0
    color?: C3DViewRGB
    opacity?: number // [0.0 - 1.0]
},

где:

1. Свойство index представляет собой число и используется для установки групповых данных для конкретного слоя рендеринга. Число должно быть больше 0.

   Примечание

   Значение index может быть 0, но в этом случае такая цветовая группа представляет собой группу по умолчанию и используется для сброса свойств материала определенных узлов до значений по умолчанию, то есть она отменяет изменение цвета.

2. В переменной color хранится представление цвета в формате RGB.

3. Параметр opacity задает значение прозрачности для узла. Значение по умолчанию (если opacity не определено) равно 1.

Изменить рабочую область можно следующим способом здесь:

view.setParameters({
    name: 'workspace',
    colors: {
        highlightedMesh,
        highlightedWireframe,
        selectedMesh,
        selectedWireframe,
        groups
    }
})

Здесь в качестве параметра принимается объект типа WorkspaceParams.

Пример

Пример настроек представления (TypeScript):

{
    environment: {
        background: {
            brush: "LinearGradient",
            color_1: {
                r: 255,
                g: 255,
                b: 255
            },
            color_2: {
                r: 200,
                g: 235,
                b: 255
            }
        },
        default: {
            camera: {
                orientation: {
                    type: "standard",
                    value: "Front"
                },
                projection: "Orthogonal"
            },
            renderMode: "shaded"
        }
    },
    workspace: {
        colors: {
            highlightedMesh: {
                r: 200,
                g: 0,
                b: 0
            },
            selectedMesh: {
                r: 0,
                g: 200,
                b: 0
            },
            highlightedWireframe: {
                r: 250,
                g: 70,
                b: 70
            },
            selectedWireframe: {
                r: 70,
                g: 250,
                b: 70
            },
            groups: [
                {
                    index: 1,
                    color: {
                        r: 255.0,
                        g: 130.0,
                        b: 130.0
                    }
                },
                {
                    index: 2,
                    color: {
                        r: 30.0,
                        g: 170.0,
                        b: 30.0
                    }
                },
                {
                    index: 3,
                    color: {
                        r: 30.0,
                        g: 30.0,
                        b: 170.0
                    }
                }
            ]
        }
    }
}