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 | 0 | |
AddLightSource | Добавление точки освещения | object | ||
AddNote | Добавление комментария на выбранный объ ект 3D-модели | object | <pre>{ "value": "" }</pre> | |
ApiSubPath | Дополнительный путь до API 3D сервиса, необходим для совместимости прошлых версий | string | / | |
BackendPath | адрес backend сервиса | string | ||
Badge | Количественная информация в компонентах Menu, Accordion, Link, Text. В качестве значения может использоваться объект с полями: counter (число), position ("post" или "pre"), color (цвет) | any | ||
CSS | Массив строк-классов CSS-стилей компонента | 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 - По одной точке XYOnePointPlaneXZ - По одной точке XZOnePointPlaneYZ - По одной точке YZThreePointSlice - По трем точкам- Значение для инициализации по умолчанию | |
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 | False | |
HiddenObjectsIds | Скрытие выбранных объектов ['someId1', 'someId2'] или скрытие всех ['*'] | array | ||
HighlightColor | string | #e1decd | ||
HighlightCuttingPlaneId | Идентификатор подсвечиваемого сечения | string | ||
HighlightPlaneMode | Подсвечивание сечения с идентификатором HighlightCuttingPlaneId | number | 0 | |
Hint | Всплывающая подсказка над компонентом, чаще используемая для подробного пояснения краткого текста | any | ||
Hostname | Имя узла сервиса 3D | string | ||
Id | Идентификатор компонента для навигации к нему на HTML-странице | string | ||
IdToClose | Идентификатор закрываемой 3D-модели | string | ||
IdToOpen | Идентификатор открываемой 3D-модели | string | ||
OnAddAnnotation | Обработчик события после добавленния объекта на сцену | undefined | ||
OnClick | Обработчик события нажатия кнопки мыши | undefined | ||
OnCuttingPlane | Обработчик события добавления сечения по точкам | undefined | ||
OnFPS | undefined | |||
OnGetAnnotations | Обработчик события для получения всех объектов, добавленных на сцену | undefined | ||
OnGetLightSources | Обработчик события по добавлению точек освещения | undefined | ||
OnGettingCuttingPlanes | Обработчик события для получения всех сечений, добавленных на сцену | undefined | ||
OnInitialize | Обработчик события инициализации контрола, возвращающий объект initResult | undefined | ||
OnItemsSelect | Обработчик события выбора объектов 3D-модели, возвращающий массив GUID-объектов модели на сцене | undefined | ||
OnKeyDown | Обработчик события KeyDown | undefined | ||
OnKeyUp | Обработчик события KeyUp | undefined | ||
OnLightSourcesChanged | undefined | |||
OnMouseDown | Обработчик события MouseDown | undefined | ||
OnMouseEnter | Обработчик события MouseEnter | undefined | ||
OnMouseLeave | Обработчик события MouseLeave | undefined | ||
OnMouseMove | Обработчик события MouseMove | undefined | ||
OnMouseOut | Обработчик события MouseOut | undefined | ||
OnMouseOver | Обработчик события MouseOver | undefined | ||
OnMouseUp | Обработчик события MouseUp | undefined | ||
OnNumberTriangles | undefined | |||
OnSaveView | Обработчик события для добавления точек обзора | undefined | ||
OnUnmount | Обработчик события Unmount | undefined | ||
PlaneSlice | Сечение по точкам: По одной точке XY: { value: OnePointPlaneXY }, По одной точке XZ: { value: OnePointPlaneXZ }, По одной точке YZ: { value: OnePointPlaneYZ }, По трем точкам: { value: ThreePointSlice } | object | <pre>{ "value": "" }</pre> | |
Port | Порт сервиса 3D | string | ||
Print3DImage | Распечатать 3D изображение | number | 0 | |
Protocol | Протокол, который использует сервис 3D | string | https | |
RemoveComments | Удаление комментария с выбранных объектов 3D-модели | number | 0 | |
RemoveCommentsIds | Удаление комментариев по Id ['someId1', 'someId2'] | array | ||
RemoveCuttingPlane | Удале ние сечения с идентификатором RemoveCuttingPlaneId | number | 0 | |
RemoveCuttingPlaneId | Идентификатор удаляемого сечения | string | ||
RemoveDimensions | Удаление указателей для измерения расстояния с выбранных 3D-моделей | number | 0 | |
RemoveDimensionsIds | Удаление указателей для измерения по Id ['someId1', 'someId2'] | array | ||
RemoveLightSourceId | Удаление точки освещения | number | 0 | |
RenderMode | Настройки рендеринга сцены,передаются строкой например: { value: 'shaded' }.', Возможные значения: shaded - отображаются только поверхности модели, wireFrame - отображаются только ребра, shadedAndWireFrame - поверхности и ребра модели отображаются вместе | object | <pre>{}</pre> | |
ResetHighlightPlaneMode | Удаление подсветки сечений | number | 0 | |
SavingImageFileName | Сохранение изображения 3D ({ value: 'screen-shot.png' }) | object | ||
SelectByColor | Выбор объектов с одинаковым цветом ({ value: '#FFFFFF' }) | object | ||
SelectByOpacity | Выбор объектов с одинаковой прозрачностью | number | 0 | |
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 | Включение поверхностного режима значение true | boolean | False | |
Tolerance | Радиус в пикселях для поиска ближайших точек | number | 0 | |
Tooltip | Всплывающая подсказка над компонентом, чаще используемая для пояснения назначения значка | any | ||
TraceId | Идентификатор для отслеживания состояния компонента исходя из хронологической последовательности: создание, отрисовка, обновление, удаление; используется для выполнения фрагмента кода по изменению состояния компонента | string | ||
TriggerFetchAndUpdateLights | Тригерр для вызова обработчика события по получению точек освещения, добавленных на сцену | number | 0 | |
TriggerFetchAndUpdateView | Инкремент делегата для запуска внешней функции контрола Viewer3d (getView) | number | 0 | |
TriggerGetAnnotations | Тригерр для вызова обработчика события по получению всех объектов, добавленных на сцену | number | 0 | |
TriggerGetCuttingPlanes | Тригерр для вызова обработчика события по получению сечений, добавленных на сцену | number | 0 | |
UnloadLoadedModels | Очищает модели, загруженные перед добавлением новой модели в рабочую область | boolean | False | |
UseLogger | Признак, включающий логирование жизненного цикла 3D движка | boolean | False | |
ViewMode | Переключатель режима работы сцены | enum | selection | selection - Режим выбора объектов на сценеdefault - Режим по умолчанию |
VisibilityObjects | Свойство для обратной совместимости. Не рекомендовано к использованию. Скрытие или отображение выбранных элементов | enum | HideSelected - Скрытие выбранных объектовShowSelected - Отображение выбранных объектовShowAll - Отображение всех скрытых объектов- Значение для инициализации по умолчанию | |
Visible | Признак инверсии состояния компонента Скрыт | boolean | True | |
ZoomFitAll | Масштабирование всех объектов 3D-модели согласно размеру сцены | number | 0 | |
ZoomFitSelected | Масштабирование выбранных объектов 3D-модели согласно размеру сцены | number | 0 |
Примеры
Скрипты:
setState({
triggerFetchAndUpdateView: 0,
viewPointsArray: [],
selectedViewPoint: undefined,
triggerGetAnnotations: 0,
allAnnotations: [],
triggerGetCuttingPlanes: 0,
allCuttingPlanes: []
})
JSX:
<Group >
<Viewer3D
ServiceName="c3dservice/"
BackendPath="/c3drpc"
AccessToken={()=>"Bearer " + getToken()}
/>
</Group>