UNPKG

@egjs/view3d

Version:

Fast & Customizable glTF 3D model viewer, packed with full of features!

260 lines (259 loc) 10.7 kB
import * as THREE from "three"; import Component from "@egjs/component"; import Renderer from "./core/Renderer"; import Scene from "./core/Scene"; import Camera from "./core/Camera"; import Model from "./core/Model"; import ModelAnimator from "./core/ModelAnimator"; import ARManager from "./core/ARManager"; import AnnotationManager from "./annotation/AnnotationManager"; import { ShadowOptions } from "./core/ShadowPlane"; import OrbitControl from "./control/OrbitControl"; import { RotateControlOptions } from "./control/RotateControl"; import { TranslateControlOptions } from "./control/TranslateControl"; import { ZoomControlOptions } from "./control/ZoomControl"; import AutoPlayer, { AutoplayOptions } from "./core/AutoPlayer"; import { WebARSessionOptions } from "./xr/WebARSession"; import { SceneViewerSessionOptions } from "./xr/SceneViewerSession"; import { QuickLookSessionOptions } from "./xr/QuickLookSession"; import { EVENTS, AUTO, AR_SESSION_TYPE, TONE_MAPPING, ANIMATION_REPEAT_MODE } from "./const/external"; import * as EVENT_TYPES from "./type/event"; import { View3DPlugin } from "./plugin"; import { LiteralUnion, OptionGetters, ValueOf } from "./type/utils"; import { LoadingItem } from "./type/external"; export interface View3DEvents { [EVENTS.READY]: EVENT_TYPES.ReadyEvent; [EVENTS.LOAD_START]: EVENT_TYPES.LoadStartEvent; [EVENTS.LOAD]: EVENT_TYPES.LoadEvent; [EVENTS.LOAD_ERROR]: EVENT_TYPES.LoadErrorEvent; [EVENTS.LOAD_FINISH]: EVENT_TYPES.LoadFinishEvent; [EVENTS.MODEL_CHANGE]: EVENT_TYPES.ModelChangeEvent; [EVENTS.RESIZE]: EVENT_TYPES.ResizeEvent; [EVENTS.BEFORE_RENDER]: EVENT_TYPES.BeforeRenderEvent; [EVENTS.RENDER]: EVENT_TYPES.RenderEvent; [EVENTS.PROGRESS]: EVENT_TYPES.LoadProgressEvent; [EVENTS.INPUT_START]: EVENT_TYPES.InputStartEvent; [EVENTS.INPUT_END]: EVENT_TYPES.InputEndEvent; [EVENTS.CAMERA_CHANGE]: EVENT_TYPES.CameraChangeEvent; [EVENTS.ANIMATION_START]: EVENT_TYPES.AnimationStartEvent; [EVENTS.ANIMATION_LOOP]: EVENT_TYPES.AnimationLoopEvent; [EVENTS.ANIMATION_FINISHED]: EVENT_TYPES.AnimationFinishedEvent; [EVENTS.ANNOTATION_FOCUS]: EVENT_TYPES.AnnotationFocusEvent; [EVENTS.ANNOTATION_UNFOCUS]: EVENT_TYPES.AnnotationUnfocusEvent; [EVENTS.AR_START]: EVENT_TYPES.ARStartEvent; [EVENTS.AR_END]: EVENT_TYPES.AREndEvent; [EVENTS.AR_MODEL_PLACED]: EVENT_TYPES.ARModelPlacedEvent; [EVENTS.QUICK_LOOK_TAP]: EVENT_TYPES.QuickLookTapEvent; } export interface View3DOptions { src: string | string[] | null; iosSrc: string | null; variant: number | string | null; dracoPath: string; ktxPath: string; meshoptPath: string | null; fixSkinnedBbox: boolean; fov: typeof AUTO | number; center: typeof AUTO | Array<number | string>; yaw: number; pitch: number; pivot: typeof AUTO | Array<number | string>; initialZoom: number | { axis: "x" | "y" | "z"; ratio: number; }; rotate: boolean | Partial<RotateControlOptions>; translate: boolean | Partial<TranslateControlOptions>; zoom: boolean | Partial<ZoomControlOptions>; autoplay: boolean | Partial<AutoplayOptions>; scrollable: boolean; wheelScrollable: boolean; useGrabCursor: boolean; ignoreCenterOnFit: boolean; skybox: string | null; envmap: string | null; background: number | string | null; exposure: number; shadow: boolean | Partial<ShadowOptions>; skyboxBlur: boolean; toneMapping: LiteralUnion<ValueOf<typeof TONE_MAPPING>, THREE.ToneMapping>; useDefaultEnv: boolean; defaultAnimationIndex: number; animationRepeatMode: ValueOf<typeof ANIMATION_REPEAT_MODE>; annotationURL: string | null; annotationWrapper: HTMLElement | string; annotationSelector: string; annotationBreakpoints: Record<number, number>; annotationAutoUnfocus: boolean; webAR: boolean | Partial<WebARSessionOptions>; sceneViewer: boolean | Partial<SceneViewerSessionOptions>; quickLook: boolean | Partial<QuickLookSessionOptions>; arPriority: Array<ValueOf<typeof AR_SESSION_TYPE>>; poster: string | HTMLElement | null; canvasSelector: string; autoInit: boolean; autoResize: boolean; useResizeObserver: boolean; maintainSize: boolean; on: Partial<View3DEvents>; plugins: View3DPlugin[]; maxDeltaTime: number; } declare class View3D extends Component<View3DEvents> implements OptionGetters<Omit<View3DOptions, "on">> { static readonly VERSION: string; private _renderer; private _scene; private _camera; private _control; private _autoPlayer; private _model; private _animator; private _autoResizer; private _arManager; private _annotationManager; private _rootEl; private _plugins; private _initialized; private _loadingContext; private _src; private _iosSrc; private _variant; private _dracoPath; private _ktxPath; private _meshoptPath; private _fixSkinnedBbox; private _fov; private _center; private _yaw; private _pitch; private _pivot; private _initialZoom; private _rotate; private _translate; private _zoom; private _autoplay; private _scrollable; private _wheelScrollable; private _useGrabCursor; private _ignoreCenterOnFit; private _skybox; private _envmap; private _background; private _exposure; private _shadow; private _skyboxBlur; private _toneMapping; private _useDefaultEnv; private _defaultAnimationIndex; private _animationRepeatMode; private _annotationURL; private _annotationWrapper; private _annotationSelector; private _annotationBreakpoints; private _annotationAutoUnfocus; private _webAR; private _sceneViewer; private _quickLook; private _arPriority; private _poster; private _canvasSelector; private _autoInit; private _autoResize; private _useResizeObserver; private _maintainSize; private _maxDeltaTime; get renderer(): Renderer; get scene(): Scene; get camera(): Camera; get control(): OrbitControl; get autoPlayer(): AutoPlayer; get model(): Model; get animator(): ModelAnimator; get ar(): ARManager; get annotation(): AnnotationManager; get rootEl(): HTMLElement; get initialized(): boolean; get loadingContext(): LoadingItem[]; get plugins(): View3DPlugin[]; get src(): string | string[]; get iosSrc(): View3DOptions["iosSrc"]; get variant(): View3DOptions["variant"]; get dracoPath(): string; get ktxPath(): string; get meshoptPath(): string; get fixSkinnedBbox(): boolean; get fov(): number | "auto"; get center(): "auto" | (string | number)[]; get yaw(): number; get pitch(): number; get pivot(): "auto" | (string | number)[]; get initialZoom(): View3DOptions["initialZoom"]; get rotate(): boolean | Partial<RotateControlOptions>; get translate(): boolean | Partial<TranslateControlOptions>; get zoom(): boolean | Partial<ZoomControlOptions>; get autoplay(): boolean | Partial<AutoplayOptions>; get scrollable(): boolean; get wheelScrollable(): boolean; get useGrabCursor(): View3DOptions["useGrabCursor"]; get ignoreCenterOnFit(): boolean; get skybox(): View3DOptions["skybox"]; get envmap(): View3DOptions["envmap"]; get background(): string | number; get exposure(): View3DOptions["exposure"]; get shadow(): boolean | Partial<ShadowOptions>; get skyboxBlur(): View3DOptions["skyboxBlur"]; get toneMapping(): View3DOptions["toneMapping"]; get useDefaultEnv(): boolean; get defaultAnimationIndex(): View3DOptions["defaultAnimationIndex"]; get animationRepeatMode(): View3DOptions["animationRepeatMode"]; get annotationURL(): string; get annotationWrapper(): string | HTMLElement; get annotationSelector(): string; get annotationBreakpoints(): Record<number, number>; get annotationAutoUnfocus(): boolean; get webAR(): boolean | Partial<WebARSessionOptions>; get sceneViewer(): boolean | Partial<SceneViewerSessionOptions>; get quickLook(): boolean | Partial<QuickLookSessionOptions>; get arPriority(): ("webAR" | "sceneViewer" | "quickLook")[]; get poster(): string | HTMLElement; get canvasSelector(): string; get autoInit(): boolean; get autoResize(): View3DOptions["autoResize"]; get useResizeObserver(): boolean; get maintainSize(): View3DOptions["maintainSize"]; get maxDeltaTime(): View3DOptions["maxDeltaTime"]; set iosSrc(val: View3DOptions["iosSrc"]); set variant(val: View3DOptions["variant"]); set defaultAnimationIndex(val: View3DOptions["defaultAnimationIndex"]); set initialZoom(val: View3DOptions["initialZoom"]); set skybox(val: View3DOptions["skybox"]); set envmap(val: View3DOptions["envmap"]); set exposure(val: View3DOptions["exposure"]); set skyboxBlur(val: View3DOptions["skyboxBlur"]); set toneMapping(val: View3DOptions["toneMapping"]); set useGrabCursor(val: View3DOptions["useGrabCursor"]); set animationRepeatMode(val: View3DOptions["animationRepeatMode"]); set autoResize(val: View3DOptions["autoResize"]); set maintainSize(val: View3DOptions["maintainSize"]); set maxDeltaTime(val: View3DOptions["maxDeltaTime"]); constructor(root: string | HTMLElement, { src, iosSrc, variant, dracoPath, ktxPath, meshoptPath, fixSkinnedBbox, fov, center, yaw, pitch, pivot, initialZoom, rotate, translate, zoom, autoplay, scrollable, wheelScrollable, useGrabCursor, ignoreCenterOnFit, skybox, envmap, background, exposure, shadow, skyboxBlur, toneMapping, useDefaultEnv, defaultAnimationIndex, animationRepeatMode, annotationURL, annotationWrapper, annotationSelector, annotationBreakpoints, annotationAutoUnfocus, webAR, sceneViewer, quickLook, arPriority, poster, canvasSelector, autoInit, autoResize, useResizeObserver, maintainSize, on, plugins, maxDeltaTime }?: Partial<View3DOptions>); destroy(): void; init(): Promise<void>; resize(): void; load(src: string | string[], { iosSrc }?: Partial<{ iosSrc: string | null; }>): Promise<void>; display(model: Model, { resetCamera }?: Partial<{ resetCamera: boolean; }>): void; loadPlugins(...plugins: View3DPlugin[]): Promise<void>; removePlugins(...plugins: View3DPlugin[]): Promise<void>; screenshot(fileName?: string): void; private _loadModel; private _loadSingleModel; private _addEventHandlers; private _addPosterImage; private _initPlugins; private _resetLoadingContextOnFinish; } export default View3D;