Перейти к основному содержимому

Viewer3D

Отображает 3D-модель

Позволяет визуализировать 3D-модели и выполнять с ними различные операции, например, следующие:

  • вращение;
  • масштабирование;
  • смена проекции;
  • сечения по плоскостям.

См. демонстрационный пример использования компонента в разделе https://<Platform_server_URL>/demo/p/ui-kit/Viewer3d/.

Свойства​

AccessToken​

Токен доступа к 3D-модели

Тип: undefined

AddAnnotations​

Добавление объектов на сцену { value: [] }

Тип: object

AddComment​

Свойство для обратной совместимости. Не рекомендуется использовать. Комментарий к выбранному объекту 3D-модели

Тип: string

AddCuttingPlanes​

Добавление сечений на сцену { value: [] }

Тип: object

AddDimension​

Включение режима сцены для добавления точек измерения расстояния на выбранных объектах 3D-модели

Тип: number

AddLightSource​

Добавление точки освещения

Тип: object

AddNote​

Комментарий к выбранному объекту 3D-модели

Тип: object

Значение по умолчанию: <pre>{
"value": ""
}</pre>

ApiSubPath​

Дополнительный путь до API 3D сервиса, необходим для совместимости прошлых версий

Тип: string

Значение по умолчанию: /

BackendPath​

URL-адрес бэкенд-сервиса 3D

Тип: string

Badge​

Количественная информация в компонентах Menu, Accordion, Link, Text.

В качестве значения может использоваться объект с полями: counter (число), position ("post" или "pre"), color (цвет)

Тип: any

CSS​

Массив строк-классов CSS-стилей, описанных в файле CSS.css DevTools-проекта или встроенных CSS-стилей Платформы. Пример: // CSS-стиль, определяющий внешние (m) и внутренние (p) отступы для компонента. Число после символа "-" (в этом примере - 4) должно быть кратно величине, указанной в параметре, определяющем кратность отступов, в файле Style.mdtheme DevTools-проекта CSS={["m-4", "p-4"]}

Тип: array

CameraControls​

Настройки вращения камеры, передаются массивом, например: { value: ["Pan", "Zoom", "Orbit", "Rotation"] }. Возможные значения: Pan - Перемещение в плоскости камеры, FreeRotation - Свободное вращение вокруг объекта, Orbit - Вращение объекта Rotation - Вращение вокруг объекта Zoom - Приближение к объектам

Тип: object

Значение по умолчанию: <pre>{}</pre>

CameraOrientation​

Свойство для обратной совместимости. Не рекомендуется использовать. Ориентация камеры

Тип: enum

Возможные значения:

Down - снизу Front - спереди ISO - изометрически Left - слева Rear - сзади Right - справа Up - сверху

  • Значение для инициализации по умолчанию

CameraPosition​

Ориентация камеры: снизу: { value: Down }, спереди: { value: Front }, слева: { value: Left }, сзади: { value: Rear }, справа: { value: Right }, сверху: { value: Up }, изометрически: { value: ISO }

Тип: object

Значение по умолчанию: <pre>{
"value": ""
}</pre>

CameraProjection​

Свойство для обратной совместимости. Не рекомендуется использовать. Проекция камеры

Тип: enum

Возможные значения:

Orthogonal - Ортогональная Perspective - Перспективная

  • Значение для инициализации по умолчанию

CameraView​

Проекция камеры: Параллельная: { value: Orthogonal, }, Перспективная: { value: Perspective, }

Тип: object

Значение по умолчанию: <pre>{
"value": ""
}</pre>

CaptureEvent​

Событие сдвига камеры после однократной установки точки обзора

Тип: undefined

ChangeBackground​

Измнить цвет фона ({ value: { fColor: "#FFFFFF", sColor: "#FFFFFF" }})

Тип: object

ColorElements​

Окрашивание элементов по UUID

Тип: array

CombineConfig​

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

Тип: object

CuttingPlane​

Свойство для обратной совместимости. Не рекомендуется использовать. Сечение по точкам:

Тип: enum

Возможные значения:

OnePointPlaneXY - По одной точке XY OnePointPlaneXZ - По одной точке XZ OnePointPlaneYZ - По одной точке YZ ThreePointSlice - По трем точкам

  • Значение для инициализации по умолчанию

CuttingPlanesColors​

Тип: object

Значение по умолчанию: <pre>{
"transparent": 0.3,
"rect": "#0000ff",
"lines": "#0000ff"
}</pre>

DisplayingObjects​

Скрытие или отображение объектов: Скрытие выбранных объектов: { value: HideSelected }, Отображение выбранных объектов: { value: ShowSelected }, Отображение всех объектов: { value: ShowAll }

Тип: object

Значение по умолчанию: <pre>{
"value": ""
}</pre>

DisplayingObjectsIds​

Отображение выбранных объектов ["someId1", "someId2"] или отображение всех объектов ["*"]

Тип: array

DynamicLoad​

Тип: boolean

Значение по умолчанию: True

EnableBackground​

Тип: boolean

Значение по умолчанию: True

Hidden​

Признак состояния компонента Скрыт

Тип: boolean

HiddenObjectsIds​

Скрытие выбранных объектов ["someId1", "someId2"] или скрытие всех объектов ["*"]

Тип: array

HighlightColor​

Тип: string

Значение по умолчанию: #e1decd

HighlightCuttingPlaneId​

Идентификатор подсвечиваемого сечения

Тип: string

HighlightPlaneMode​

Подсвечивание сечения с идентификатором HighlightCuttingPlaneId

Тип: number

Hint​

Текст, отображаемый при наведении указателя мыши на компонент. Текст отображается на белом фоне

Тип: any

Hostname​

Имя узла сервиса 3D

Тип: string

Id​

Идентификатор компонента для навигации к нему на HTML-странице. Подробнее см. HTML id Attribute или ID

Тип: string

IdToClose​

Идентификатор закрываемой 3D-модели

Тип: string

IdToOpen​

Идентификатор открываемой 3D-модели

Тип: string

OnAddAnnotation​

Обработчик события после добавленния объекта на сцену

Тип: undefined

OnClick​

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

В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример:

OnClick={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnCuttingPlane​

Обработчик события добавления сечения по точкам

Тип: undefined

OnFPS​

Тип: undefined

OnGetAnnotations​

Обработчик события для получения всех объектов, добавленных на сцену

Тип: undefined

OnGetLightSources​

Обработчик события по добавлению точек освещения

Тип: undefined

OnGettingCuttingPlanes​

Обработчик события для получения всех сечений, добавленных на сцену

Тип: undefined

OnInitialize​

Обработчик события инициализации контрола, возвращающий объект initResult

Тип: undefined

OnItemsSelect​

Обработчик события выбора объектов 3D-модели; возвращает массив GUID-объектов модели на сцене

Тип: undefined

OnKeyDown​

Обработчик события нажатия любой клавиши клавиатуры. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа KeyboardEvent. Пример: OnKeyDown={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnKeyUp​

Обработчик события отпускания любой клавиши клавиатуры. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа KeyboardEvent. Пример: OnKeyUp={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnLightSourcesChanged​

Тип: undefined

OnMouseDown​

Обработчик события нажатия любой кнопки мыши, когда указатель мыши находится на компоненте. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseDown={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseEnter​

Обработчик события перемещения указателя мыши на компонент. Событие срабатывает только в случае, если указатель мыши находится за пределами компонента и пользователь перемещает указатель мыши внутрь компонента. Если указатель мыши в текущий момент находится внутри компонента, для срабатывания события пользователь должен переместить указатель мыши за пределы компонента, а затем обратно внутрь компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseEnter={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseLeave​

Обработчик события перемещения указателя мыши за пределы компонента. Событие срабатывает, только если указатель мыши находится внутри компонента, а пользователь перемещает указатель мыши за пределы компонента. Если указатель мыши в текущий момент находится за пределами компонента, для срабатывания события пользователь должен переместить указатель мыши внутрь компонента, а затем обратно за пределы компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseLeave={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseMove​

Обработчик события наведения указателя мыши на компонент. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseMove={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseOut​

Обработчик события перемещения указателя мыши за пределы компонента. Когда пользователь наводит указатель мыши на компонент, происходит одно событие MouseOver, за которым следует одно или несколько событий MouseMove, когда пользователь перемещает указатель мыши внутри компонента. Одно событие MouseOut возникает, когда пользователь выводит указатель мыши за пределы компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseOut={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseOver​

Обработчик события перемещения указателя мыши на компонент. Событие возникает, когда пользователь наводит указатель мыши на компонент, и не повторяется до тех пор, пока пользователь не выведет указатель мыши за пределы компонента и затем не вернет его обратно. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseOver={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseUp​

Обработчик события отпускания кнопки мыши, когда указатель мыши находится на компоненте. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseUp={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnNumberTriangles​

Тип: undefined

OnSaveView​

Обработчик события для добавления точек обзора

Тип: undefined

OnUnmount​

Обработчик события размонтирования согласно жизненному циклу экранной формы. Не имеет параметров. Пример:

OnUnmount={() => { // Отмена выполнения периодического действия при размонтировании экранной формы return clearInterval(getValue("pleerInterval")) } }

Тип: undefined

PlaneSlice​

Сечение по точкам: По одной точке XY: { value: OnePointPlaneXY }, По одной точке XZ: { value: OnePointPlaneXZ }, По одной точке YZ: { value: OnePointPlaneYZ }, По трем точкам: { value: ThreePointSlice }

Тип: object

Значение по умолчанию: <pre>{
"value": ""
}</pre>

Port​

Порт сервиса 3D

Тип: string

Print3DImage​

Распечатать 3D изображение

Тип: number

Protocol​

Протокол, который использует сервис 3D

Тип: string

Значение по умолчанию: https

RemoveComments​

Свойство для обратной совместимости. Не рекомендуется использовать. Триггер для вызова команды удаления комментария с выбранных объектов 3D-модели

Тип: number

RemoveCommentsIds​

Массив идентификаторов комментариев, которые должны быть удалены. Пример: ["someId1", "someId2"]

Тип: array

RemoveCuttingPlane​

Удаление сечения с идентификатором RemoveCuttingPlaneId

Тип: number

RemoveCuttingPlaneId​

Идентификатор удаляемого сечения

Тип: string

RemoveDimensions​

Удаление указателей для измерения расстояния с выбранных 3D-моделей

Тип: number

RemoveDimensionsIds​

Массив идентификаторов указателей (измерения расстояний на 3D-моделях), которые должны быть удалены. Пример: ["someId1", "someId2"]

Тип: array

RemoveLightSourceId​

Удаление точки освещения

Тип: number

RenderMode​

Настройки рендеринга сцены,передаются строкой например: { value: "shaded" }., Возможные значения: shaded - отображаются только поверхности модели, wireFrame - отображаются только ребра, shadedAndWireFrame - поверхности и ребра модели отображаются вместе

Тип: object

Значение по умолчанию: <pre>{}</pre>

ResetHighlightPlaneMode​

Удаление подсветки сечений

Тип: number

SavingImageFileName​

Сохранение изображения 3D ({ value: "screen-shot.png" })

Тип: object

SelectByColor​

Выбор объектов с одинаковым цветом ({ value: "#FFFFFF" })

Тип: object

SelectByOpacity​

Выбор объектов с одинаковой прозрачностью

Тип: number

SelectedObjects​

Выбранные объекты 3D-модели

Тип: array

SelectionColor​

Тип: string

Значение по умолчанию: #fdec04

ServiceName​

Имя сервиса 3D

Тип: string

Значение по умолчанию: integration3d

SetLightSourceOn​

Включение/выключение всех точек освещения

Тип: boolean

Значение по умолчанию: True

SetLightSources​

Добавление точек освещения

Тип: object

SetViewPoint​

Установка камеры в передаваемую точку обзора ({view: savedOrientation, duration: 1000}).

Тип: object

Show3DComponent​

Тип: boolean

Значение по умолчанию: True

Slot​

Именованное пространство во фрагменте экранной формы.

Тип: string

SurfaceInterpretation​

Признак включения режима отображения поверхности объекта

Тип: boolean

Tolerance​

Радиус в пикселях для поиска ближайших точек

Тип: number

Tooltip​

Текст, отображаемый при наведении указателя мыши на компонент. Текст отображается на черном фоне

Тип: any

TraceId​

Идентификатор для отслеживания состояния компонента исходя из жизненного цикла экранной формы. Используется для выполнения фрагмента кода по изменению состояния компонента

Тип: string

TriggerFetchAndUpdateLights​

Тригерр для вызова обработчика события по получению точек освещения, добавленных на сцену

Тип: number

TriggerFetchAndUpdateView​

Инкремент делегата для запуска внешней функции контрола Viewer3d (getView)

Тип: number

TriggerGetAnnotations​

Тригерр для вызова обработчика события по получению всех объектов, добавленных на сцену

Тип: number

TriggerGetCuttingPlanes​

Тригерр для вызова обработчика события по получению сечений, добавленных на сцену

Тип: number

UnloadLoadedModels​

Признак очистки 3D-модели, загруженной перед добавлением новой 3D-модели в рабочую область

Тип: boolean

UseLogger​

Признак записи в журнал команд, переданных в API C3D Viewer. Информация журнала также записывается консоль браузера

Тип: boolean

ViewMode​

Переключатель режима работы сцены

Тип: enum

Значение по умолчанию: selection

Возможные значения:

selection - Режим выбора объектов на сцене default - Режим по умолчанию

VisibilityObjects​

Свойство для обратной совместимости. Не рекомендуется использовать. Скрытие или отображение выбранных элементов

Тип: enum

Возможные значения:

HideSelected - Скрытие выбранных объектов ShowSelected - Отображение выбранных объектов ShowAll - Отображение всех скрытых объектов

  • Значение для инициализации по умолчанию

Visible​

Признак инверсии состояния компонента Скрыт

Тип: boolean

Значение по умолчанию: True

ZoomFitAll​

Масштабирование всех объектов 3D-модели согласно размеру сцены

Тип: number

ZoomFitSelected​

Масштабирование выбранных объектов 3D-модели согласно размеру сцены

Тип: number

Примеры​

Скрипты:


      setState({
         triggerFetchAndUpdateView: 0,
         viewPointsArray: [],
         selectedViewPoint: undefined,
         triggerGetAnnotations: 0,
         allAnnotations: [],
         triggerGetCuttingPlanes: 0,
         allCuttingPlanes: []
      })

JSX:

<Group >
  <Viewer3D 
    ServiceName="c3dservice/" 
    BackendPath="/c3drpc"
    AccessToken={()=>"Bearer " + getToken()}
  />
&lt;/Group>