hexa-viewer-communicator/src/interfaces/viewer-communicator.interface.ts

A simple API for <hexa-viewer>

import { IConfigurator } from './configurator.interface';
import { IEventObservable } from './event-observable.interface';

export interface IViewerCommunicator {
    configurator: IConfigurator;
    hexaViewer: HTMLElement;
    readonly isModelLoaded: boolean;
    readonly eventObservable: IEventObservable;
    onModelLoaded(): Promise<unknown>;
    getMeshesData(): Promise<{ [id: string]: MeshData }>;
    getMeshAnimations(): Promise<{ [id: string]: IAnimationOptions }>;
    updateMeshAnimations(meshAnimations: { [id: string]: IAnimationOptions }): void;
    materializeMesh(meshName: string, config: MaterializeMeshConfig): void;
    sendToViewer(msg: IPostMessage): void;
    isWebXrSupported(): Promise<boolean>;
    createInstanceFromUrl(
        viewerURL: string,
        params?: any,
        options?: ICreateInstanceFromUrlOptions
    ): Promise<HTMLElement>;
    togglePicInPic(state: boolean): void;
    toggleWebXR(state: boolean, invokeWhenReady?: boolean): void;
    waitForCollisions(): Promise<Array<Collision>>;
    toggleCollision(collisionMode: boolean, color?: string): void;
    deleteCollision(position: number, count: number): void;
    removeAllCollisions(): void;
    adjustScene(): Promise<unknown>;
    applyPreset(json: IAdjustmentsPresetJson): Promise<unknown>;
    onCreateImagesByTour(): Promise<IImagesByTourResponse>;
    setLightsByJson(lights: { [id: string]: Array<ILight> }): Promise<unknown>;
    broadcastSceneSummary(params?: IBroadcastSceneSummaryOption): Promise<ISceneSummary>;
    applyShadowPlane(shadowPlane: IShadowPlaneOptions): void;
    applyHDRI(hdri: IHdriOptions): void;
    controlsTutorial(types?: Array<TutorialType>): void;
    toggleAutoRotate(state: boolean): void;
    onModelInteraction(cb?: Function): Promise<string>;
    goToInitialCamPos(): void;
    getCurrentScreenshot(): Promise<string>;
    toggleMatcapMode(state: boolean, options?: IMatcapOptions): void;
    toggleHideBottom(state: boolean): void;
    toggleNoDistanceLimit(state: boolean): void;
    toggleCloseup(state: boolean): void;
    setCameraPosition(pos: ICameraControlsStateAnimation): void;
    destroy(): void;
}

export interface IViewerCommunicatorOptions {
    hexaViewer?: HTMLElement;
}

export interface IPostMessage extends Object {
    action: string;
    data?: any;
    obj?: any;
    options?: any;
    value?: any;
    from?: IPostMessageOrigin;
    to: IPostMessageOrigin;
    id?: string;
    proxy?: boolean;
}

export enum IPostMessageOrigin {
    TOP = 1,
    MAIN = 2,
    WORKER = 3,
    IGNORE = 4,
}

export interface MaterializeMeshEnvironmentConfig {
    intensity: number;
    type?: number;
    blur?: boolean;
    url?: string;
}

export interface MaterializeMeshBloomConfig {
    luminanceThreshold: number;
    luminanceSmoothing: number;
    resolutionScale: number;
    width: number;
    height: number;
    intensity: number;
}

export interface MaterializeMeshConfig {
    RGB: Array<number>;
    roughness: number;
    metalness: number;
    exposure: number;
    transparent: boolean;
    opacity?: number;
    environment?: MaterializeMeshEnvironmentConfig;
    bloom?: MaterializeMeshBloomConfig;
    normalMapUrl?: string;
    diffuseMapUrl?: string;
}

export interface MeshData {
    position: ThreeVector3;
    rotation: ThreeVector3;
    rotationDegree: ThreeVector3int;
    scale: ThreeVector3;
    // matrix: Array<number>;
    center?: ThreeVector3;
    name: string;
    color: string;
    materialName?: string;
    ignoreBB: boolean;
    castShadow?: boolean;
    receiveShadow?: boolean;
    bloom?: MeshBloomOptions;
}

export interface ThreeVector2int {
    x: number;
    y: number;
}

export interface ThreeVector3int {
    x: number;
    y: number;
    z: number;
}

export interface ThreeVector3 {
    x: number | string;
    y: number | string;
    z: number | string;
}

export class MeshBloomOptions {
    luminanceThreshold: number;
    luminanceSmoothing: number;
    resolutionScale: number;
    width: number;
    height: number;
    intensity: number;
    // kernelSize: number;
    constructor() {
        this.luminanceThreshold = 0.1;
        this.luminanceSmoothing = 0.025;
        this.resolutionScale = 0.5;
        this.width = 360;
        this.height = 360;
        this.intensity = 1;
    }
}

export interface MeshData {
    position: ThreeVector3;
    rotation: ThreeVector3;
    rotationDegree: ThreeVector3int;
    scale: ThreeVector3;
    // matrix: Array<number>;
    center?: ThreeVector3;
    name: string;
    color: string;
    materialName?: string;
    ignoreBB: boolean;
    castShadow?: boolean;
    receiveShadow?: boolean;
    bloom?: MeshBloomOptions;
}

export interface ICreateInstanceFromUrlOptions {
    enableWebXR?: boolean;
    themeColor?: string;
}

export interface Collision extends ThreeVector3 {
    color: string;
    object3D?: any;
    scale: number;
}

export interface IBroadcastSceneSummaryOption {
    addResourceJson?: boolean;
    autoAdjustScene?: boolean;
}

export interface ISceneSummary {
    exposure: number;
    hdr: IHdriOptions;
    lights: { [id: string]: Array<ILight> };
    plane: IPlaneSummary;
    renderer: IRendererSummary;
    camera: ICameraSummary;
    wireframe: boolean;
    shadedWireframe: boolean;
    shadedWireframeOptions: IShadedWireframeOptions;
    meshId: boolean;
    xray: boolean;
    grid: boolean;
    transparentRenderOrder: TransparentSort;
    dimensions: boolean;
    dimensionsOptions: IDimensionsOptions;
    autoAdjustScene?: boolean;
    svgPostprocessingOptions: ISVGPostprocessingOptions;
    resourceJson?: IAdjustmentsPresetJson;
}

export interface IDimensionsOptions {
    x?: string;
    y?: string;
    z?: string;
    color?: string;
    scene?: any;
    dimensionsUnits?: DimensionsUnits;
}

export enum DimensionsUnits {
    INCH = 1,
    CM = 2,
}

export enum TransparentSort {
    Z_INDEX = 1,
    REVERSE_PAINTRE_SORT_STABLE = 2,
    PAINTER_SORT_STABLE = 3,
}

export interface IShadedWireframeOptions {
    color?: any;
    linewidth?: number;
}

export interface ICameraSummary {
    fov: number;
}

export interface IRendererSummary {
    physicallyCorrectLights: boolean;
    toneMapping: number;
}
export interface IImagesByTourResponse {
    images: Array<string>;
    modelUrl: string;
}

export interface IAdjustmentsPreset {
    artist_user_id: number;
    preset_json?: IAdjustmentsPresetJson;
    preset_name: string;
    created_at?: Date;
    updated_at?: Date;
    sub_category_id?: number;
    retailer_sub_category_id?: number;
    retailer_id?: number;
    sort_index?: number;
    hdriUrl?: string;
}

export interface IAdjustmentsPresetJson {
    // urlParats: any;
    materialManipulations: { [id: string]: IMaterialManipulation; };
    meshManipulations: { [id: string]: MeshData; };
    lights: { [id: string]: Array<ILight> };
    // texturesAnimations: { [id: string]: ITextureAnimatorOptions };
    texturesAnimations: { [id: string]: { [id: string]: ITextureAnimatorOptions } };
    meshAnimations: { [id: string]: IAnimationOptions };
    shadowPlane: IShadowPlaneOptions;
    meshBloomOptions: MeshBloomOptions;
    hdri: IHdriOptions;
    params: ISceneParamsOptions;
    svgPostprocessingOptions: ISVGPostprocessingOptions;
    annotations: Array<IAnnotation>;
    preset_json?: any;
}

export interface ITextureAnimatorOptions {
    tilesHorizontal: number;
    tilesVertical: number;
    numberOfTiles: number;
    tileDisplayDuration: number;
    currentDisplayTime: number;
    name: string;
    image: string;
}

export interface IMaterialManipulation {
    reflectivity: number;
    color: string;
    type: string;
    alphaTest: number;
    transparent: boolean;
    velvetIntensity: number;
    clearCoat: number;
    clearCoatRoughness: number;
    opacity: number;
    video?: IThreeMaterialVideo;
    refractionRatio: number;
    envMap?: ITexture;
}

export interface ITexture {
    name: string;
    uuid: string;
    alphaMap: ITexture;
    aoMap: ITexture;
    aoMapIntensity: number;
    bumpMap: ITexture;
    bumpScale: number;
    displacementMap: ITexture;
    displacementScale: number;
    displacementBias: number;
    emissiveMap: ITexture;
    emissive: IColor;
    emissiveIntensity: number;
    envMap: ITexture;
    envMapIntensity: number;
    lightMap: ITexture;
    lightMapIntensity: number;
    map: ITexture;
    color: IColor;
    metalness: number;
    metalnessMap: ITexture;
    morphNormals: boolean;
    morphTargets: boolean;
    defines: any;
    normalMap: ITexture;
    normalScale: IVector2;
    refractionRatio: number;
    roughness: number;
    roughnessMap: ITexture;
    offset: IVector2;
    repeat: IVector2;
    center: IVector2;
    rotation: number;
    wrapS: IThreeTextureWrap;
    wrapT: IThreeTextureWrap;
    imageSrc: string;
    // imageSrcH3D: string;
    videoSrc: string;
    // videoSrcH3D: string;
    mimeType: string;
    imageWidth: number;
    imageHeight: number;
}

export interface IColor {
    r: number;
    g: number;
    b: number;
}

export interface IVector2 {
    x: number;
    y: number;
}

export enum IThreeTextureWrap {
    RepeatWrapping = 1000,
    ClampToEdgeWrapping = 1001,
    MirroredRepeatWrapping = 1002,
}

export interface ITexture {
    name: string;
    uuid: string;
    alphaMap: ITexture;
    aoMap: ITexture;
    aoMapIntensity: number;
    bumpMap: ITexture;
    bumpScale: number;
    displacementMap: ITexture;
    displacementScale: number;
    displacementBias: number;
    emissiveMap: ITexture;
    emissive: IColor;
    emissiveIntensity: number;
    envMap: ITexture;
    envMapIntensity: number;
    lightMap: ITexture;
    lightMapIntensity: number;
    map: ITexture;
    color: IColor;
    metalness: number;
    metalnessMap: ITexture;
    morphNormals: boolean;
    morphTargets: boolean;
    defines: any;
    normalMap: ITexture;
    normalScale: IVector2;
    refractionRatio: number;
    roughness: number;
    roughnessMap: ITexture;
    offset: IVector2;
    repeat: IVector2;
    center: IVector2;
    rotation: number;
    wrapS: IThreeTextureWrap;
    wrapT: IThreeTextureWrap;
    imageSrc: string;
    // imageSrcH3D: string;
    videoSrc: string;
    // videoSrcH3D: string;
    mimeType: string;
    imageWidth: number;
    imageHeight: number;
}

export interface IThreeMaterialVideo {
    mapType: string;
    src: string;
}

export interface ISVGPostprocessingOptions {
    contrast: number; // 100 - 200
    brightness: number; // 50 - 250
    saturate: number; // 0 - 200
    sepia: number; // 0 - 100
    sharpen: number; // 0 - 3
    gamma: number; // 0.5 - 1.5
    // constructor() {
    //     this.contrast = 100;
    //     this.brightness = 100;
    //     this.saturate = 100;
    //     this.sepia = 0;
    //     this.sharpen = 0;
    //     this.gamma = 1;
    // }
}
export interface IAnnotation {
    annotationId: number;
    annotationType: AnnotationType;
    // texturesAnimations: Array<ITextureAnimatorOptions>;
    meshAnimations: { [id: string]: IAnnotationMeshAnimation };
    position: ThreeVector3;
    cameraPositions: Array<ICameraControlsState>;
    textDuration?: number;
    editMode: boolean;
    title?: string;
    color?: string;
    img?: string;
    textAlwaysAppears: boolean;
    imageScale: number;
    imageProportion: number;
}

export interface ICameraControlsState {
    phi: number;
    theta: number;
    radius: number;
    fov: number;
    focalLength: number;
    posx: number;
    posy: number;
    posz: number;
    camposx: number;
    camposy: number;
    camposz: number;
    targetX: number;
    targetY: number;
    targetZ: number;
}

export interface IAnimationOptions {
    active: boolean;
}

export interface IAnnotationMeshAnimation extends IAnimationOptions {
    once: boolean;
}

export enum AnnotationType {
    HOT_SPOT = 1,
}

export interface ILight {
    color?: any;
    helperColor?: number;
    intensity?: number;
    hsl?: any;
    target?: any;
    shadow?: any;
    angle?: number;
    decay?: number;
    penumbra?: number;
    distance?: number;
    update?: Function;
    position?: any;
    castShadow?: boolean;
    type?: string;
    name?: string;
    alias?: string;
    followCamera?: boolean;
    shadowMapDim?: number;
    index?: number;
    width?: number;
    height?: number;
    indentation?: ThreeVector3;
    normalBias?: number;
    bias?: number;
    nickname?: string;
    embedded?: boolean;
}

export interface IPlaneSummary {
    state: boolean;
    options: IShadowPlaneOptions;
}

export interface IShadowPlaneOptions {
    active: boolean | undefined;
    color: string | undefined;
    // transparent: boolean;
    opacity: number | undefined;
    reflector: boolean | undefined;
    side: boolean | undefined;
    physical: boolean | undefined;
    physicalOptions?: IPhysicalPlaneOptions;
}

export interface IPhysicalPlaneOptions {
    blur: number;
    darkness: number;
    opacity: number;
    dim: number;
    height: number;
}

export interface IHdriOptions {
    type: number;
    intensity: number;
    background: boolean;
    blur: boolean;
    lightProbe: number;
    format: undefined | 'jpg' | 'hdr' | 'ultra-hdr';
    skybox: boolean;
    src?: string;
    probeIntensity?: number;
}

export interface ISceneParamsOptions {
    exposure: number;
    fov: number;
    physicallyCorrectLights: boolean;
    toneMapping: number;
    wireframe: boolean | undefined;
    wireframeColor: string | undefined;
    shadedWireframe: boolean | undefined;
    shadedWireframeColor: string | undefined;
    meshId: boolean;
    xray: boolean;
    grid: boolean;
    transparentRenderOrder: number;
    dimensions: boolean | undefined;
    dimensionsValues: ThreeVector3;
    dimensionsColor: string | undefined;
    closeup: boolean;
}

export interface IMeshProps {
    mesh: MeshData;
    key: string;
    value: any;
}

export interface JsonToHtmlObject {
    type: string;
    attrs?: any;
    text?: string;
    children?: Array<JsonToHtmlObject>;
}

export interface EventSelector {
    selector?: string;
    index?: number;
    listen: string;
    action: string;
    actionType: EventSelectorActionType;
    parameters?: Array<any>;
}

export enum EventSelectorActionType {
    SCOPE = 1,
    EVAL = 2,
}

export enum TutorialType {
    LEGACY_ZOOM = 1,
    LEGACY_ROTATE = 2,
    INTERACTIVE_ROTATE = 3,
}

export interface IExpotedModel {
    type: string;
    file: string;
    buffer: ArrayBuffer;
}

export interface IExportOptions {
    type: ExportFileType;
    compressPNG: boolean;
    downloadFile: boolean;
}

export enum ExportFileType {
    glTF = 1,
    GLB = 2,
    OBJ = 3,
    USDZ = 4,
}

export interface IGifGenOptions {
    numOfFrames: number;
    format: MediaFormat;
    codec?: 'h264' | 'vp8' | 'vp9';
}

export enum MediaFormat {
    IMAGE = 1,
    VIDEO = 2,
}

export interface IMatcapOptions {
    color?: string | number;
}

export enum TextureMimeType {
    IMAGE = 1,
    VIDEO = 2,
}

export interface IApplyTextureOptions {
    src: string;
    materialName: string;
    mapType: 'map' | 'alphaMap' | 'aoMap' | 'bumpMap' | 'displacementMap' | 'emissiveMap' | 'envMap' | 'lightMap' | 'metalnessMap' | 'normalMap' | 'roughnessMap';
    intensity?: number;
    mimeType: TextureMimeType;
    // remove?: boolean;
    color?: string | number;
    animationDuration?: number;
}

export interface IMaterialPropsOptions {
    materialName: string;
    props: any;
}

export interface ISwapMaterialType {
    materialName: string;
    type: string;
}

export interface IBoundingBox {
    size: number;
    x: number;
    y: number;
    z: number;
}

export interface ICameraControlsStateAnimation extends ICameraControlsState {
    animationDuration: number;
    x: number; // camposx
    y: number; // camposy
    z: number; // camposz
    // matrix: Array<number>;
}

export interface IDiamondOptions {
    envMap: string;
    bounces: number;
    ior: number;
    aberrationStrength: number;
    fresnel: number;
    color: string;
    envMapIntensity: number;
    pseudoTriangles: number;
    quality: number;
    tintStrength: number;
    diamondClarity: number;
    normalMap: string;
    normalScale: ThreeVector2int;
    dirLightDirection: ThreeVector3int;
    dirLightColor: string;
    dirLightIntensity: number;
    sparkleDensity: number;
    sparkleBoost: number;
    highlightExp: number;
}