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

Viewer3D

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

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

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

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

Свойства

ИмяОписаниеТипЗначение по умолчаниюВозможные значения
AccessTokenТокен доступа к 3D-моделиundefined
AddAnnotationsДобавление объектов на сцену { value: [] }object
AddCommentСвойство для обратной совместимости. Не рекомендовано к использованию.
Добавление комментария на выбранный объект 3D-модели
string
AddCuttingPlanesДобавление сечений на сцену { value: [] }object
AddDimensionВключение режима сцены для добавления точек измерения расстояния на выбранных объектах 3D-моделиnumber0
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Свойство для обратной совместимости. Не рекомендовано к использованию. Ориентация камерыenumDown - снизу
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Свойство для обратной совместимости. Не рекомендовано к использованию. Проекция камерыenumOrthogonal - Ортогональная
Perspective - Перспективная
- Значение для инициализации по умолчанию
CameraViewПроекция камеры:
Параллельная: {
value: Orthogonal,
},
Перспективная:
{
value: Perspective,
}
object<pre>{
"value": ""
}</pre>
CaptureEventСобытие сдвига камеры после установки точки обзора (один раз)undefined
ChangeBackgroundИзмнить цвет фона ({ value: { fColor: '#FFFFFF', sColor: '#FFFFFF' }})object
ColorElementsОкрашивание элементов по UUIDarray
CombineConfigКонфигурация всех событий компонента. Служебное свойство для генерации фрагментов кода в визуальном режиме редактора форм.
Не рекомендуется указывать значение вручную
object
CuttingPlaneСвойство для обратной совместимости. Не рекомендовано к использованию. Сечение по точкам:enumOnePointPlaneXY - По одной точке XY
OnePointPlaneXZ - По одной точке XZ
OnePointPlaneYZ - По одной точке YZ
ThreePointSlice - По трем точкам
- Значение для инициализации по умолчанию
CuttingPlanesColorsobject<pre>{
"transparent": 0.3,
"rect": "#0000ff",
"lines": "#0000ff"
}</pre>
DisplayingObjectsСкрытие или отображение объектов:
Скрытие выбранных:
{
value: HideSelected
},
Отображение выбранных:
{
value: ShowSelected
},
Отображение всех:
{
value: ShowAll
}
object<pre>{
"value": ""
}</pre>
DisplayingObjectsIdsОтображение выбранных объектов ['someId1', 'someId2'] или отображение всех ['*']array
DynamicLoadbooleanTrue
EnableBackgroundbooleanTrue
HiddenПризнак состояния компонента СкрытbooleanFalse
HiddenObjectsIdsСкрытие выбранных объектов ['someId1', 'someId2'] или скрытие всех ['*']array
HighlightColorstring#e1decd
HighlightCuttingPlaneIdИдентификатор подсвечиваемого сеченияstring
HighlightPlaneModeПодсвечивание сечения с идентификатором HighlightCuttingPlaneIdnumber0
HintВсплывающая подсказка над компонентом, чаще используемая для подробного пояснения краткого текстаany
HostnameИмя узла сервиса 3Dstring
IdИдентификатор компонента для навигации к нему на HTML-страницеstring
IdToCloseИдентификатор закрываемой 3D-моделиstring
IdToOpenИдентификатор открываемой 3D-моделиstring
OnAddAnnotationОбработчик события после добавленния объекта на сценуundefined
OnClickОбработчик события нажатия кнопки мышиundefined
OnCuttingPlaneОбработчик события добавления сечения по точкамundefined
OnFPSundefined
OnGetAnnotationsОбработчик события для получения всех объектов, добавленных на сценуundefined
OnGetLightSourcesОбработчик события по добавлению точек освещенияundefined
OnGettingCuttingPlanesОбработчик события для получения всех сечений, добавленных на сценуundefined
OnInitializeОбработчик события инициализации контрола, возвращающий объект initResultundefined
OnItemsSelectОбработчик события выбора объектов 3D-модели, возвращающий массив GUID-объектов модели на сценеundefined
OnKeyDownОбработчик события KeyDownundefined
OnKeyUpОбработчик события KeyUpundefined
OnLightSourcesChangedundefined
OnMouseDownОбработчик события MouseDownundefined
OnMouseEnterОбработчик события MouseEnterundefined
OnMouseLeaveОбработчик события MouseLeaveundefined
OnMouseMoveОбработчик события MouseMoveundefined
OnMouseOutОбработчик события MouseOutundefined
OnMouseOverОбработчик события MouseOverundefined
OnMouseUpОбработчик события MouseUpundefined
OnNumberTrianglesundefined
OnSaveViewОбработчик события для добавления точек обзораundefined
OnUnmountОбработчик события Unmountundefined
PlaneSliceСечение по точкам:
По одной точке XY:
{
value: OnePointPlaneXY
},
По одной точке XZ:
{
value: OnePointPlaneXZ
},
По одной точке YZ:
{
value: OnePointPlaneYZ
},
По трем точкам:
{
value: ThreePointSlice
}
object<pre>{
"value": ""
}</pre>
PortПорт сервиса 3Dstring
Print3DImageРаспечатать 3D изображениеnumber0
ProtocolПротокол, который использует сервис 3Dstringhttps
RemoveCommentsУдаление комментария с выбранных объектов 3D-моделиnumber0
RemoveCommentsIdsУдаление комментариев по Id ['someId1', 'someId2']array
RemoveCuttingPlaneУдаление сечения с идентификатором RemoveCuttingPlaneIdnumber0
RemoveCuttingPlaneIdИдентификатор удаляемого сеченияstring
RemoveDimensionsУдаление указателей для измерения расстояния с выбранных 3D-моделейnumber0
RemoveDimensionsIdsУдаление указателей для измерения по Id ['someId1', 'someId2']array
RemoveLightSourceIdУдаление точки освещенияnumber0
RenderModeНастройки рендеринга сцены,передаются строкой например: { value: 'shaded' }.',
Возможные значения:
shaded - отображаются только поверхности модели,
wireFrame - отображаются только ребра,
shadedAndWireFrame - поверхности и ребра модели отображаются вместе
object<pre>{}</pre>
ResetHighlightPlaneModeУдаление подсветки сеченийnumber0
SavingImageFileNameСохранение изображения 3D ({ value: 'screen-shot.png' })object
SelectByColorВыбор объектов с одинаковым цветом ({ value: '#FFFFFF' })object
SelectByOpacityВыбор объектов с одинаковой прозрачностьюnumber0
SelectedObjectsВыбранные объекты 3D-моделиarray
SelectionColorstring#fdec04
ServiceNameИмя сервиса 3Dstringintegration3d
SetLightSourceOnВключение/выключение всех точек освещенияbooleanTrue
SetLightSourcesДобавление точек освещенияobject
SetViewPointУстановка камеры в передаваемую точку обзора ({view: savedOrientation, duration: 1000}).object
Show3DComponentbooleanTrue
SlotМетка для динамического добавления другого компонента по его идентификаторуstring
SurfaceInterpretationВключение поверхностного режима значение truebooleanFalse
ToleranceРадиус в пикселях для поиска ближайших точекnumber0
TooltipВсплывающая подсказка над компонентом, чаще используемая для пояснения назначения значкаany
TraceId
Идентификатор для отслеживания состояния компонента исходя из хронологической последовательности:
создание, отрисовка, обновление, удаление; используется для выполнения фрагмента кода по изменению состояния компонента
string
TriggerFetchAndUpdateLightsТригерр для вызова обработчика события по получению точек освещения, добавленных на сценуnumber0
TriggerFetchAndUpdateViewИнкремент делегата для запуска внешней функции контрола Viewer3d (getView)number0
TriggerGetAnnotationsТригерр для вызова обработчика события по получению всех объектов, добавленных на сценуnumber0
TriggerGetCuttingPlanesТригерр для вызова обработчика события по получению сечений, добавленных на сценуnumber0
UnloadLoadedModelsОчищает модели, загруженные перед добавлением новой модели в рабочую областьbooleanFalse
UseLoggerПризнак, включающий логирование жизненного цикла 3D движкаbooleanFalse
ViewModeПереключатель режима работы сценыenumselectionselection - Режим выбора объектов на сцене
default - Режим по умолчанию
VisibilityObjectsСвойство для обратной совместимости. Не рекомендовано к использованию. Скрытие или отображение выбранных элементовenumHideSelected - Скрытие выбранных объектов
ShowSelected - Отображение выбранных объектов
ShowAll - Отображение всех скрытых объектов
- Значение для инициализации по умолчанию
VisibleПризнак инверсии состояния компонента СкрытbooleanTrue
ZoomFitAllМасштабирование всех объектов 3D-модели согласно размеру сценыnumber0
ZoomFitSelectedМасштабирование выбранных объектов 3D-модели согласно размеру сценыnumber0

Примеры

Скрипты:


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

JSX:

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