@inweb/viewer-three
Version:
JavaScript library for rendering CAD and BIM files in a browser using Three.js
204 lines (203 loc) • 9 kB
TypeScript
import { Box3, Object3D, OrthographicCamera, PerspectiveCamera, Scene, Vector3, WebGLRenderer } from "three";
import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js";
import { FXAAPass } from "three/examples/jsm/postprocessing/FXAAPass.js";
import { SMAAPass } from "three/examples/jsm/postprocessing/SMAAPass.js";
import { SSAARenderPass } from "./postprocessing/SSAARenderPass.js";
import { OutputPass } from "three/examples/jsm/postprocessing/OutputPass.js";
import { EventEmitter2 } from "@inweb/eventemitter2";
import { Assembly, Client, Model, File } from "@inweb/client";
import { CanvasEventMap, FileSource, IComponent, IDragger, IInfo, ILoader, IOptions, IViewer, IViewpoint, OptionsEventMap, ViewerEventMap } from "@inweb/viewer-core";
import { IMarkup, IWorldTransform } from "@inweb/markup";
import { IModelImpl } from "./models/IModelImpl";
import { Helpers } from "./scenes/Helpers";
/**
* 3D viewer powered by {@link https://threejs.org/ | Three.js}.
*/
export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMap & OptionsEventMap> implements IViewer, IWorldTransform {
client: Client | undefined;
options: IOptions;
canvas: HTMLCanvasElement | undefined;
canvasEvents: string[];
loaders: ILoader[];
models: IModelImpl[];
info: IInfo;
private canvaseventlistener;
scene: Scene | undefined;
helpers: Helpers | undefined;
camera: PerspectiveCamera | OrthographicCamera | undefined;
renderer: WebGLRenderer | undefined;
renderPass: RenderPass | undefined;
helpersPass: RenderPass | undefined;
fxaaPass: FXAAPass | undefined;
smaaPass: SMAAPass | undefined;
ssaaRenderPass: SSAARenderPass | undefined;
outputPass: OutputPass | undefined;
composer: EffectComposer | undefined;
selected: Object3D[];
extents: Box3;
target: Vector3;
private _activeDragger;
private _components;
private _updateDelay;
private _renderNeeded;
private _renderTime;
private _markup;
/**
* @param client - The `Client` instance that is used to load model reference files from the Open Cloud
* Server. Do not specify `Client` if you need a standalone viewer instance to view `glTF` files from
* the web or from local computer.
*/
constructor(client?: Client);
/**
* 2D markup core instance used to create markups.
*
* @readonly
*/
get markup(): IMarkup;
get draggers(): string[];
get components(): string[];
initialize(canvas: HTMLCanvasElement, onProgress?: (event: ProgressEvent<EventTarget>) => void): Promise<this>;
dispose(): this;
isInitialized(): boolean;
setSize(width: number, height: number, updateStyle?: boolean): void;
update(force?: boolean): void;
render(time?: DOMHighResTimeStamp, force?: boolean): void;
loadReferences(model: Model | File | Assembly): Promise<this>;
/**
* Loads a file into the viewer.
*
* The viewer must be {@link initialize | initialized} before opening the file. Otherwise, `open()` does
* nothing.
*
* This method requires a `Client` instance to be specified to load file from the Open Cloud Server.
* The file geometry data on the Open Cloud Server must be converted into a `gltf` format, otherwise an
* exception will be thrown.
*
* For files from Open Cloud Server, the default model will be loaded. If there is no default model,
* the first available model will be loaded. If no models are found in the file, an exception will be
* thrown.
*
* For URLs, the file extension is used to determine the file format. For a `ArrayBuffer` and `Data
* URL`, a file format must be specified using `params.format` parameter. If no appropriate loader is
* found for the specified format, an exception will be thrown.
*
* If there was an active dragger before opening the file, it will be deactivated. After opening the
* file, you must manually activate the required dragger.
*
* Fires:
*
* - {@link CancelEvent | cancel}
* - {@link ClearEvent | clear}
* - {@link OpenEvent | open}
* - {@link GeometryStartEvent | geometrystart}
* - {@link GeometryProgressEvent | geometryprogress}
* - {@link DatabaseChunkEvent | databasechunk}
* - {@link GeometryChunkEvent | geometrychunk}
* - {@link GeometryEndEvent | geometryend}
* - {@link GeometryErrorEvent | geometryerror}
*
* @param file - File to load. Can be:
*
* - `File`, `Assembly` or `Model` instance from the Open Cloud Server
* - `URL` string
* - {@link https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URIs | Data URL} string
* - {@link https://developer.mozilla.org/docs/Web/API/File | Web API File} object
* - {@link https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer | ArrayBuffer}
* object
*
* @param params - Loading parameters.
* @param params.format - File format. Can be `gltf`, `glb` or format from an extension. Required when
* loading a file as `ArrayBuffer` or `Data URL`.
* @param params.mode - File opening mode. Can be one of:
*
* - `file` - Single file mode. Unloads an open file and opens a new one. This is default mode.
* - `assembly` - Assembly mode. Appends a file to an already open file.
*
* @param params.modelId - Unique model ID in the assembly (multi-model scene). Used as a model prefix
* when selecting objects (see {@link getSelected2}). Must not contain the ":" (colon). Required when
* loading a file as `ArrayBuffer` or `Data URL`.
* @param params.requestHeader - The
* {@link https://developer.mozilla.org/docs/Glossary/Request_header | request header} used in HTTP
* request.
* @param params.withCredentials - Whether the HTTP request uses credentials such as cookies,
* authorization headers or TLS client certificates. See
* {@link https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/withCredentials | XMLHttpRequest.withCredentials}.
* @param params.path - The base path from which external resources such as binary data buffers, images
* or textures will be loaded. If not defined, the base path of the file URL will be used.
* @param params.externalFiles - External resource map. Each resource should be represented by a `uri`
* and a corresponding resource URL, or
* {@link https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URIs | Data URL} string, or
* {@link https://developer.mozilla.org/docs/Web/API/File | Web API File} object, or
* {@link https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer | ArrayBuffer}.
* @param params.crossOrigin - The crossOrigin string to implement CORS for loading the external
* resources from a different domain that allows CORS. Default is `anonymous`.
*/
open(file: FileSource, params?: {
format?: string;
mode?: string;
modelId?: string;
requestHeader?: HeadersInit;
withCredentials?: boolean;
path?: string;
externalFiles?: Map<string, string | globalThis.File | ArrayBuffer>;
crossOrigin?: string;
}): Promise<this>;
/**
* Deprecated since `26.4`. Use {@link open | open()} instead.
*
* @deprecated
*/
openGltfFile(file: any, externalFiles: any, params?: any): Promise<this>;
/**
* Deprecated since `26.4`. Use {@link open | open()} instead.
*
* @deprecated
*/
loadGltfFile(file: any, externalFiles: any, params?: any): Promise<this>;
cancel(): this;
clear(): this;
is3D(): boolean;
syncOptions(options?: IOptions): void;
syncOverlay(): void;
clearOverlay(): void;
clearSlices(): void;
getSelected(): string[];
getSelected2(): string[];
setSelected(handles?: string[]): void;
setSelected2(handles?: string[]): void;
clearSelected(): void;
hideSelected(): void;
isolateSelected(): void;
showAll(): void;
explode(index?: number): void;
collect(): void;
activeDragger(): IDragger | null;
setActiveDragger(name?: string): IDragger | null;
resetActiveDragger(): void;
getComponent(name: string): IComponent;
drawViewpoint(viewpoint: IViewpoint): void;
createViewpoint(): IViewpoint;
screenToWorld(position: {
x: number;
y: number;
}): {
x: number;
y: number;
z: number;
};
worldToScreen(position: {
x: number;
y: number;
z: number;
}): {
x: number;
y: number;
};
getScale(): {
x: number;
y: number;
z: number;
};
executeCommand(id: string, ...args: any[]): any;
}