@google/model-viewer

import * as three from 'three'; import { Object3D, Material as Material$4, Texture as Texture$4, Group, Vector3 as Vector3$1, Mesh as Mesh$1, WebGLRenderer, Scene as Scene$1, AnimationActionLoopStyles, PerspectiveCamera as PerspectiveCamera$1, Camera as Camera$2, Box3, Sphere, ToneMapping, Vector2, AnimationMixerEventMap, Intersection, XRTargetRaySpace, Matrix4 as Matrix4$1, EventDispatcher, Event as Event$1, MeshPhysicalMaterial } from 'three'; export { CanvasTexture, FileLoader, Loader, NearestFilter } from 'three'; import { GLTF as GLTF$2, GLTFReference, GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; import { ReactiveElement } from 'lit'; import { CSS2DObject, CSS2DRenderer } from 'three/examples/jsm/renderers/CSS2DRenderer.js'; import * as three_examples_jsm_Addons_js from 'three/examples/jsm/Addons.js'; type RGB$1 = [number, number, number]; type RGBA$1 = [number, number, number, number]; type Quaternion = [number, number, number, number]; type Vector3 = [number, number, number]; type Matrix4 = [ number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number ]; type Extras = any; interface ExtensionDictionary { [index: string]: any; } interface PerspectiveCameraIntrinsics { aspectRatio?: number; yfov: number; zfar: number; znear: number; extensions?: ExtensionDictionary; extras?: Extras; } interface PerspectiveCamera { name?: string; type: 'perspective'; perspective?: PerspectiveCameraIntrinsics; extensions?: ExtensionDictionary; extras?: Extras; } interface OrthographicCamera { name?: string; type: 'orthographic'; orthographic?: OrthographicCamera; extensions?: ExtensionDictionary; extras?: Extras; } type Camera$1 = PerspectiveCamera | OrthographicCamera; declare enum Filter { Nearest = 9728, Linear = 9729, NearestMipmapNearest = 9984, LinearMipmapNearest = 9985, NearestMipmapLinear = 9986, LinearMipmapLinear = 9987 } type NearestFilter = Filter.Nearest; type LinearFilter = Filter.Linear; type NearestMipmapNearestFilter = Filter.NearestMipmapNearest; type LinearMipmapNearestFilter = Filter.LinearMipmapNearest; type NearestMipmapLinearFilter = Filter.NearestMipmapLinear; type LinearMipmapLinearFilter = Filter.LinearMipmapLinear; type MagFilter = NearestFilter | LinearFilter; type MinFilter = NearestFilter | LinearFilter | NearestMipmapNearestFilter | LinearMipmapNearestFilter | NearestMipmapLinearFilter | LinearMipmapLinearFilter; declare enum Wrap { ClampToEdge = 33071, MirroredRepeat = 33648, Repeat = 10497 } type ClampToEdgeWrap = Wrap.ClampToEdge; type MirroredRepeatWrap = Wrap.MirroredRepeat; type RepeatWrap = Wrap.Repeat; type WrapMode = RepeatWrap | ClampToEdgeWrap | MirroredRepeatWrap; interface Sampler$3 { name?: string; magFilter?: MagFilter; minFilter?: MinFilter; wrapS?: WrapMode; wrapT?: WrapMode; extensions?: ExtensionDictionary; extras?: Extras; } interface Texture$3 { name?: string; sampler?: number; source?: number; extensions?: ExtensionDictionary; extras?: Extras; } interface TextureInfo$3 { index: number; texCoord?: number; extensions?: ExtensionDictionary; extras?: Extras; } interface OcclusionTextureInfo$1 extends TextureInfo$3 { strength?: number; } interface NormalTextureInfo$1 extends TextureInfo$3 { scale?: number; } interface PBRMetallicRoughness$3 { baseColorFactor?: RGBA$1; baseColorTexture?: TextureInfo$3; metallicRoughnessTexture?: TextureInfo$3; metallicFactor?: number; roughnessFactor?: number; extensions?: ExtensionDictionary; extras?: Extras; } type AlphaMode = 'OPAQUE' | 'MASK' | 'BLEND'; interface Material$3 { name?: string; doubleSided?: boolean; alphaMode?: AlphaMode; alphaCutoff?: number; emissiveFactor?: RGB$1; pbrMetallicRoughness?: PBRMetallicRoughness$3; normalTexture?: NormalTextureInfo$1; occlusionTexture?: OcclusionTextureInfo$1; emissiveTexture?: TextureInfo$3; extensions?: ExtensionDictionary; extras?: Extras; } type AttributeDictionary = { [index: string]: number; }; interface Primitive { attributes: AttributeDictionary; indices?: number; material?: number; extensions?: ExtensionDictionary; extras?: Extras; } interface Mesh { name?: string; primitives: Primitive[]; weights: number[]; extensions?: ExtensionDictionary; extras?: Extras; } interface Node$2 { name?: string; mesh?: number; matrix?: Matrix4; rotation?: Quaternion; scale?: Vector3; translation?: Vector3; weights?: number[]; children?: number[]; extensions?: ExtensionDictionary; extras?: Extras; } interface Image$3 { name?: string; uri?: string; bufferView?: number; mimeType?: string; extensions?: ExtensionDictionary; extras?: Extras; } interface Scene { name?: string; nodes: number[]; extensions?: ExtensionDictionary; extras?: Extras; } type AccessorType = 'SCALAR' | 'VEC2' | 'VEC3' | 'VEC4' | 'MAT2' | 'MAT3' | 'MAT4'; interface Accessor { name?: string; bufferView?: number; byteOffset?: number; componentType: number; normalized?: boolean; count: number; type: AccessorType; max?: number; min?: number; extensions?: ExtensionDictionary; extras?: Extras; sparse?: any; } type ChannelTargetPath = 'rotation' | 'scale' | 'translation' | 'weights'; interface ChannelTarget { node: number; path: ChannelTargetPath; } interface Channel { sampler: number; target: ChannelTarget; extensions?: ExtensionDictionary; extras?: Extras; } type AnimationInterpolation = 'LINEAR' | 'STEP' | 'CUBICSPLINE'; interface AnimationSampler { input: number; interpolation: AnimationInterpolation; output: number; extensions?: ExtensionDictionary; extras?: Extras; } interface Animation$1 { name?: string; channels: Channel[]; samplers: AnimationSampler[]; extensions?: ExtensionDictionary; extras?: Extras; } interface Skin$1 { inverseBindMatrices?: number; skeleton?: number; joints: number[]; name?: string; extensions?: ExtensionDictionary; extras?: Extras; } type GLTFElement = Scene | Node$2 | Mesh | Material$3 | Image$3 | Texture$3 | TextureInfo$3 | Sampler$3 | PBRMetallicRoughness$3 | Accessor | Camera$1 | Animation$1 | AnimationSampler | Skin$1; interface Asset { version: '2.0'; copyright?: string; generator?: string; minVersion?: string; extensions?: ExtensionDictionary; extras?: Extras; } interface GLTF$1 { asset: Asset; scene?: number; scenes?: Scene[]; nodes?: Node$2[]; materials?: Material$3[]; accessors?: Accessor[]; samplers?: Sampler$3[]; images?: Image$3[]; textures?: Texture$3[]; meshes?: Mesh[]; cameras?: Camera$1[]; animations?: Animation$1[]; skins?: Skin$1[]; } type ThreeSceneObject = Object3D | Material$4 | Texture$4; type ThreeObjectSet = Set<ThreeSceneObject>; type GLTFElementToThreeObjectMap = Map<GLTFElement, ThreeObjectSet>; type ThreeObjectToGLTFElementHandleMap = Map<ThreeSceneObject, GLTFReference>; declare const $threeGLTF: unique symbol; declare const $gltf: unique symbol; declare const $gltfElementMap: unique symbol; declare const $threeObjectMap: unique symbol; declare const $parallelTraverseThreeScene: unique symbol; declare const $correlateOriginalThreeGLTF: unique symbol; declare const $correlateCloneThreeGLTF: unique symbol; /** * The Three.js GLTFLoader provides us with an in-memory representation * of a glTF in terms of Three.js constructs. It also provides us with a copy * of the deserialized glTF without any Three.js decoration, and a mapping of * glTF elements to their corresponding Three.js constructs. * * A CorrelatedSceneGraph exposes a synchronously available mapping of glTF * element references to their corresponding Three.js constructs. */ declare class CorrelatedSceneGraph { /** * Produce a CorrelatedSceneGraph from a naturally generated Three.js GLTF. * Such GLTFs are produced by Three.js' GLTFLoader, and contain cached * details that expedite the correlation step. * * If a CorrelatedSceneGraph is provided as the second argument, re-correlates * a cloned Three.js GLTF with a clone of the glTF hierarchy used to produce * the upstream Three.js GLTF that the clone was created from. The result * CorrelatedSceneGraph is representative of the cloned hierarchy. */ static from(threeGLTF: GLTF$2, upstreamCorrelatedSceneGraph?: CorrelatedSceneGraph): CorrelatedSceneGraph; private static [$correlateOriginalThreeGLTF]; /** * Transfers the association between a raw glTF and a Three.js scene graph * to a clone of the Three.js scene graph, resolved as a new * CorrelatedSceneGraph instance. */ private static [$correlateCloneThreeGLTF]; /** * Traverses two presumably identical Three.js scenes, and invokes a * callback for each Object3D or Material encountered, including the initial * scene. Adapted from * https://github.com/mrdoob/three.js/blob/7c1424c5819ab622a346dd630ee4e6431388021e/examples/jsm/utils/SkeletonUtils.js#L586-L596 */ private static [$parallelTraverseThreeScene]; private [$threeGLTF]; private [$gltf]; private [$gltfElementMap]; private [$threeObjectMap]; /** * The source Three.js GLTF result given to us by a Three.js GLTFLoader. */ get threeGLTF(): GLTF$2; /** * The in-memory deserialized source glTF. */ get gltf(): GLTF$1; /** * A Map of glTF element references to arrays of corresponding Three.js * object references. Three.js objects are kept in arrays to account for * cases where more than one Three.js object corresponds to a single glTF * element. */ get gltfElementMap(): GLTFElementToThreeObjectMap; /** * A map of individual Three.js objects to corresponding elements in the * source glTF. */ get threeObjectMap(): ThreeObjectToGLTFElementHandleMap; constructor(threeGLTF: GLTF$2, gltf: GLTF$1, threeObjectMap: ThreeObjectToGLTFElementHandleMap, gltfElementMap: GLTFElementToThreeObjectMap); } /** A 2D Cartesian coordinate */ interface Vector2DInterface { u: number; v: number; } /** * A Model is the root element of a 3DOM scene graph. It gives scripts access * to the sub-elements found without the graph. */ declare interface Model$1 { /** * An ordered set of unique Materials found in this model. The Materials * correspond to the listing of materials in the glTF, with the possible * addition of a default material at the end. */ readonly materials: Readonly<Material$2[]>; /** * Gets a material(s) by name. * @param name the name of the material to return. * @returns the first material to whose name matches `name` */ getMaterialByName(name: string): Material$2 | null; /** * Creates a new material variant from an existing material. * @param originalMaterialIndex index of the material to clone the variant * from. * @param materialName the name of the new material * @param variantName the name of the variant * @param activateVariant activates this material variant, i.e. the variant * material is rendered, not the existing material. * @returns returns a clone of the original material, returns `null` if the * material instance for this variant already exists. */ createMaterialInstanceForVariant(originalMaterialIndex: number, newMaterialName: string, variantName: string, activateVariant: boolean): Material$2 | null; /** * Adds a variant name to the model. * @param variantName */ createVariant(variantName: string): void; /** * Adds an existing material to a variant name. * @param materialIndex * @param targetVariantName */ setMaterialToVariant(materialIndex: number, targetVariantName: string): void; /** * Removes the variant name from the model. * @param variantName the variant to remove. */ deleteVariant(variantName: string): void; } /** * A Material gives the script access to modify a single, unique material found * in a model's scene graph. * * @see https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#reference-material */ declare interface Material$2 { /** * The name of the material, if any. */ name: string; readonly normalTexture: TextureInfo$2 | null; readonly occlusionTexture: TextureInfo$2 | null; readonly emissiveTexture: TextureInfo$2 | null; readonly emissiveFactor: Readonly<RGB>; setEmissiveFactor(rgb: RGB | string): void; setAlphaCutoff(cutoff: number): void; getAlphaCutoff(): number; setDoubleSided(doubleSided: boolean): void; getDoubleSided(): boolean; setAlphaMode(alphaMode: AlphaMode): void; getAlphaMode(): AlphaMode; /** * PBR Next properties. */ readonly emissiveStrength: number; readonly clearcoatFactor: number; readonly clearcoatRoughnessFactor: number; readonly clearcoatTexture: TextureInfo$2; readonly clearcoatRoughnessTexture: TextureInfo$2; readonly clearcoatNormalTexture: TextureInfo$2; readonly clearcoatNormalScale: number; readonly ior: number; readonly sheenColorFactor: Readonly<RGB>; readonly sheenColorTexture: TextureInfo$2; readonly sheenRoughnessFactor: number; readonly sheenRoughnessTexture: TextureInfo$2; readonly transmissionFactor: number; readonly transmissionTexture: TextureInfo$2; readonly thicknessFactor: number; readonly thicknessTexture: TextureInfo$2; readonly attenuationDistance: number; readonly attenuationColor: Readonly<RGB>; readonly specularFactor: number; readonly specularTexture: TextureInfo$2; readonly specularColorFactor: Readonly<RGB>; readonly specularColorTexture: TextureInfo$2; readonly iridescenceFactor: number; readonly iridescenceTexture: TextureInfo$2; readonly iridescenceIor: number; readonly iridescenceThicknessMinimum: number; readonly iridescenceThicknessMaximum: number; readonly iridescenceThicknessTexture: TextureInfo$2; readonly anisotropyStrength: number; readonly anisotropyRotation: number; readonly anisotropyTexture: TextureInfo$2; setEmissiveStrength(emissiveStrength: number): void; setClearcoatFactor(clearcoatFactor: number): void; setClearcoatRoughnessFactor(clearcoatRoughnessFactor: number): void; setClearcoatNormalScale(clearcoatNormalScale: number): void; setIor(ior: number): void; setSheenColorFactor(rgb: RGB | string): void; setSheenRoughnessFactor(roughness: number): void; setTransmissionFactor(transmission: number): void; setThicknessFactor(thickness: number): void; setAttenuationDistance(attenuationDistance: number): void; setAttenuationColor(rgb: RGB | string): void; setSpecularFactor(specularFactor: number): void; setSpecularColorFactor(rgb: RGB | string): void; setIridescenceFactor(iridescence: number): void; setIridescenceIor(ior: number): void; setIridescenceThicknessMinimum(thicknessMin: number): void; setIridescenceThicknessMaximum(thicknessMax: number): void; setAnisotropyStrength(strength: number): void; setAnisotropyRotation(rotation: number): void; /** * The PBRMetallicRoughness configuration of the material. */ readonly pbrMetallicRoughness: PBRMetallicRoughness$2; /** * Asynchronously loads the underlying material resource if it's currently * unloaded, otherwise the method is a noop. */ ensureLoaded(): void; /** * Returns true if the material participates in the variant. * @param name the variant name. */ hasVariant(name: string): boolean; /** * Returns true if the material is loaded. */ readonly isLoaded: boolean; /** * Returns true if the material is participating in scene renders. */ readonly isActive: boolean; /** * Returns the glTF index of this material. */ readonly index: number; } /** * The PBRMetallicRoughness encodes the PBR properties of a material * * @see https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#reference-pbrmetallicroughness */ declare interface PBRMetallicRoughness$2 { /** * The base color factor of the material, represented as RGBA values */ readonly baseColorFactor: Readonly<RGBA>; /** * Metalness factor of the material, represented as number between 0 and 1 */ readonly metallicFactor: number; /** * Roughness factor of the material, represented as number between 0 and 1 */ readonly roughnessFactor: number; /** * A texture reference, associating an image with color information and * a sampler for describing base color factor for a UV coordinate space. */ readonly baseColorTexture: TextureInfo$2 | null; /** * A texture reference, associating an image with color information and * a sampler for describing metalness (B channel) and roughness (G channel) * for a UV coordinate space. */ readonly metallicRoughnessTexture: TextureInfo$2 | null; /** * Changes the base color factor of the material to the given value. */ setBaseColorFactor(rgba: RGBA | string): void; /** * Changes the metalness factor of the material to the given value. */ setMetallicFactor(value: number): void; /** * Changes the roughness factor of the material to the given value. */ setRoughnessFactor(value: number): void; } /** * A TextureInfo is a pointer to a specific Texture in use on a Material * * @see https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#reference-textureinfo */ declare interface TextureInfo$2 { /** * The Texture being referenced by this TextureInfo. */ readonly texture: Texture$2 | null; /** * Sets the texture, or removes it if argument is null. Note you cannot build * your own Texture object, but must either use one from another TextureInfo, * or create one with the createTexture method. */ setTexture(texture: Texture$2 | null): void; } /** * A Texture pairs an Image and a Sampler for use in a Material * * @see https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#reference-texture */ declare interface Texture$2 { /** * The name of the texture, if any. */ readonly name: string; /** * The Sampler for this Texture */ readonly sampler: Sampler$2; /** * The source Image for this Texture */ readonly source: Image$2; } /** * A Sampler describes how to filter and wrap textures * * @see https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#reference-sampler */ declare interface Sampler$2 { /** * The name of the sampler, if any. */ readonly name: string; /** * @see https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#samplerminfilter */ readonly minFilter: MinFilter; /** * @see https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#samplermagfilter */ readonly magFilter: MagFilter; /** * @see https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#samplerwraps */ readonly wrapS: WrapMode; /** * @see https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#samplerwrapt */ readonly wrapT: WrapMode; /** * The texture rotation in radians. */ readonly rotation: number | null; /** * The texture scale. */ readonly scale: Vector2DInterface | null; /** * The texture offset. */ readonly offset: Vector2DInterface | null; /** * Configure the minFilter value of the Sampler. */ setMinFilter(filter: MinFilter): void; /** * Configure the magFilter value of the Sampler. */ setMagFilter(filter: MagFilter): void; /** * Configure the S (U) wrap mode of the Sampler. */ setWrapS(mode: WrapMode): void; /** * Configure the T (V) wrap mode of the Sampler. */ setWrapT(mode: WrapMode): void; /** * Sets the texture rotation, or resets it to zero if argument is null. * Rotation is in radians, positive for counter-clockwise. */ setRotation(rotation: number | null): void; /** * Sets the texture scale, or resets it to (1, 1) if argument is null. * As the scale value increases, the repetition of the texture will increase. */ setScale(scale: Vector2DInterface | null): void; /** * Sets the texture offset, or resets it to (0, 0) if argument is null. */ setOffset(offset: Vector2DInterface | null): void; } /** * An Image represents an embedded or external image used to provide texture * color data. * * @see https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#reference-image */ declare interface Image$2 { /** * The name of the image, if any. */ readonly name: string; /** * The type is 'external' if the image has a configured URI. Otherwise, it is * considered to be 'embedded'. Note: this distinction is only implied by the * glTF spec, and is made explicit here for convenience. */ readonly type: 'embedded' | 'external'; /** * The URI of the image, if it is external. */ readonly uri?: string; /** * The bufferView of the image, if it is embedded. */ readonly bufferView?: number; /** * The backing HTML element, if this is a video or canvas texture. */ readonly element?: HTMLVideoElement | HTMLCanvasElement; /** * The Lottie animation object, if this is a Lottie texture. You may wish to * do image.animation as import('lottie-web').AnimationItem; to get its type * info. */ readonly animation?: any; /** * A method to create an object URL of this image at the desired * resolution. Especially useful for KTX2 textures which are GPU compressed, * and so are unreadable on the CPU without a method like this. */ createThumbnail(width: number, height: number): Promise<string>; /** * Only applies to canvas textures. Call when the content of the canvas has * been updated and should be reflected in the model. */ update(): void; } /** * An RGBA-encoded color, with channels represented as floating point values * from [0,1]. */ declare type RGBA = [number, number, number, number]; declare type RGB = [number, number, number]; declare const $correlatedObjects: unique symbol; declare const $onUpdate$1: unique symbol; type CorrelatedObjects = Set<Object3D> | Set<Material$4> | Set<Texture$4>; /** * A SerializableThreeDOMElement is the common primitive of all scene graph * elements that have been facaded in the host execution context. It adds * a common interface to these elements in support of convenient * serializability. */ declare class ThreeDOMElement { readonly [$onUpdate$1]: () => void; [$correlatedObjects]: CorrelatedObjects; constructor(onUpdate: () => void, correlatedObjects: CorrelatedObjects); } declare const $threeTexture$2: unique symbol; declare const $threeTextures$1: unique symbol; /** * Image facade implementation for Three.js textures */ declare class Image$1 extends ThreeDOMElement implements Image$2 { get [$threeTexture$2](): Texture$4; get [$threeTextures$1](): Set<Texture$4>; constructor(onUpdate: () => void, texture: Texture$4); get name(): string; get uri(): string | undefined; get bufferView(): number | undefined; get element(): HTMLVideoElement | HTMLCanvasElement | undefined; get animation(): any | undefined; get type(): 'embedded' | 'external'; set name(name: string); update(): void; createThumbnail(width: number, height: number): Promise<string>; } type Constructor<T = object, U = object> = { new (...args: any[]): T; prototype: T; } & U; declare const $prepared: unique symbol; interface PreparedGLTF extends GLTF$2 { [$prepared]?: boolean; } declare const $prepare: unique symbol; declare const $preparedGLTF: unique symbol; declare const $clone: unique symbol; /** * Represents the preparation and enhancement of the output of a Three.js * GLTFLoader (a Three.js-flavor "GLTF"), to make it suitable for optimal, * correct viewing in a given presentation context and also make the cloning * process more explicit and legible. * * A GLTFInstance is API-compatible with a Three.js-flavor "GLTF", so it should * be considered to be interchangeable with the loaded result of a GLTFLoader. * * This basic implementation only implements trivial preparation and enhancement * of a GLTF. These operations are intended to be enhanced by inheriting * classes. */ declare class GLTFInstance implements GLTF$2 { /** * Prepares a given GLTF for presentation and future cloning. A GLTF that is * prepared can safely have this method invoked on it multiple times; it will * only be prepared once, including after being cloned. */ static prepare(source: GLTF$2): PreparedGLTF; /** * Override in an inheriting class to apply specialty one-time preparations * for a given input GLTF. */ protected static [$prepare](source: GLTF$2): GLTF$2; protected [$preparedGLTF]: PreparedGLTF; get parser(): three_examples_jsm_Addons_js.GLTFParser; get animations(): three.AnimationClip[]; get scene(): Group<three.Object3DEventMap>; get scenes(): Group<three.Object3DEventMap>[]; get cameras(): three.Camera[]; get asset(): { copyright?: string | undefined; generator?: string | undefined; version?: string | undefined; minVersion?: string | undefined; extensions?: any; extras?: any; }; get userData(): Record<string, any>; constructor(preparedGLTF: PreparedGLTF); /** * Creates and returns a copy of this instance. */ clone<T extends GLTFInstance>(): T; /** * Cleans up any retained memory that might not otherwise be released when * this instance is done being used. */ dispose(): void; /** * Override in an inheriting class to implement specialized cloning strategies */ protected [$clone](): PreparedGLTF; } type GLTFInstanceConstructor = Constructor<GLTFInstance, { prepare: typeof GLTFInstance['prepare']; }>; declare const $correlatedSceneGraph: unique symbol; interface PreparedModelViewerGLTF extends PreparedGLTF { [$correlatedSceneGraph]?: CorrelatedSceneGraph; } /** * This specialization of GLTFInstance collects all of the processing needed * to prepare a model and to clone it making special considerations for * <model-viewer> use cases. */ declare class ModelViewerGLTFInstance extends GLTFInstance { /** * @override */ protected static [$prepare](source: GLTF$2): PreparedModelViewerGLTF; get correlatedSceneGraph(): CorrelatedSceneGraph; /** * @override */ [$clone](): PreparedGLTF; } /** * Hotspots are configured by slot name, and this name must begin with "hotspot" * to be recognized. The position and normal strings are in the form of the * camera-target attribute and default to "0m 0m 0m" and "0m 1m 0m", * respectively. */ interface HotspotConfiguration { name: string; position?: string; normal?: string; surface?: string; modelIndex?: number | null; } /** * The Hotspot object is a reference-counted slot. If decrement() returns true, * it should be removed from the tree so it can be garbage-collected. */ declare class Hotspot extends CSS2DObject { normal: Vector3$1; surface?: string; modelIndex?: number; mesh?: Mesh$1; tri?: Vector3$1; bary?: Vector3$1; private initialized; private referenceCount; private pivotEl; private slot; constructor(config: HotspotConfiguration); get facingCamera(): boolean; /** * Sets the hotspot to be in the highly visible foreground state. */ show(): void; /** * Sets the hotspot to be in the diminished background state. */ hide(): void; /** * Call this when adding elements to the same slot to keep track. */ increment(): void; /** * Call this when removing elements from the slot; returns true when the slot * is unused. */ decrement(): boolean; /** * Change the position of the hotspot to the input string, in the same format * as the data-position attribute. */ updatePosition(position?: string): void; /** * Change the hotspot's normal to the input string, in the same format as the * data-normal attribute. */ updateNormal(normal?: string): void; updateSurface(): void; orient(radians: number): void; updateVisibility(show: boolean): void; } type Side = 'back' | 'bottom'; /** * The Shadow class creates a shadow that fits a given scene and follows a * target. This shadow will follow the scene without any updates needed so long * as the shadow and scene are both parented to the same object (call it the * scene) and this scene is passed as the target parameter to the shadow's * constructor. We also must constrain the scene to motion within the horizontal * plane and call the setRotation() method whenever the scene's Y-axis rotation * changes. For motion outside of the horizontal plane, this.needsUpdate must be * set to true. * * The softness of the shadow is controlled by changing its resolution, making * softer shadows faster, but less precise. */ declare class Shadow extends Object3D { private camera; private renderTarget; private renderTargetBlur; private depthMaterial; private horizontalBlurMaterial; private verticalBlurMaterial; private intensity; private softness; private floor; private blurPlane; private boundingBox; private size; private maxDimension; private isAnimated; needsUpdate: boolean; constructor(scene: ModelScene, softness: number, side: Side); /** * Update the shadow's size and position for a new scene. Softness is also * needed, as this controls the shadow's resolution. */ setScene(scene: ModelScene, softness: number, side: Side): void; /** * Update the shadow's resolution based on softness (between 0 and 1). Should * not be called frequently, as this results in reallocation. */ setSoftness(softness: number): void; /** * Lower-level version of the above function. */ setMapSize(maxMapSize: number): void; /** * Set the shadow's intensity (0 to 1), which is just its opacity. Turns off * shadow rendering if zero. */ setIntensity(intensity: number): void; getIntensity(): number; /** * An offset can be specified to move the * shadow vertically relative to the bottom of the scene. Positive is up, so * values are generally negative. A small offset keeps our shadow from * z-fighting with any baked-in shadow plane. */ setOffset(offset: number): void; gap(): number; render(renderer: WebGLRenderer, scene: Scene$1): void; blurShadow(renderer: WebGLRenderer): void; dispose(): void; } interface ModelSceneConfig { element: ModelViewerElementBase; canvas: HTMLCanvasElement; width: number; height: number; } interface MarkedAnimation { name: string; loopMode: AnimationActionLoopStyles; repetitionCount: number; } /** * A THREE.Scene object that takes a Model and CanvasHTMLElement and * constructs a framed scene based off of the canvas dimensions. * Provides lights and cameras to be used in a renderer. */ declare class ModelScene extends Scene$1 { element: ModelViewerElement; canvas: HTMLCanvasElement; annotationRenderer: CSS2DRenderer; effectRenderer: EffectComposerInterface | null; schemaElement: HTMLScriptElement; width: number; height: number; aspect: number; scaleStep: number; renderCount: number; externalRenderer: RendererInterface | null; appendedAnimations: Array<string>; markedAnimations: Array<MarkedAnimation>; camera: PerspectiveCamera$1; xrCamera: Camera$2 | null; url: string | null; extraUrls: string[]; scenePivot: Object3D<three.Object3DEventMap>; target: Object3D<three.Object3DEventMap>; animationNames: Array<string>; boundingBox: Box3; boundingSphere: Sphere; size: Vector3$1; idealAspect: number; framedFoVDeg: number; shadow: Shadow | null; shadowIntensity: number; shadowSoftness: number; bakedShadows: Set<Mesh$1<three.BufferGeometry<three.NormalBufferAttributes, three.BufferGeometryEventMap>, Material$4 | Material$4[], three.Object3DEventMap>>; exposure: number; toneMapping: ToneMapping; canScale: boolean; private isDirty; private goalTarget; private targetDamperX; private targetDamperY; private targetDamperZ; private _currentGLTFs; private _models; private boundsAndShadowDirty; private mixers; private mixerPausedStates; private cancelPendingSourceChange; private animationsByName; private currentAnimationActions; private groundedSkybox; constructor({ canvas, element, width, height }: ModelSceneConfig); /** * Function to create the context lazily, as when there is only one * <model-viewer> element, the renderer's 3D context can be displayed * directly. This extra context is necessary to copy the renderings into when * there are more than one. */ get context(): CanvasRenderingContext2D | null; getCamera(): Camera$2; queueRender(): void; shouldRender(): boolean; hasRendered(): void; forceRescale(): void; /** * Pass in a THREE.Object3D to be controlled * by this model. */ setObject(model: Object3D): Promise<void>; /** * Sets the model via URL. */ setSource(url: string | null, extraUrls?: string[], progressCallback?: (progress: number) => void): Promise<void>; private setupScene; updateModelTransforms(index: number, offset?: string | null, _orientation?: string | null, scale?: string | null): void; /** * Evaluates bounding box recalculations asynchronously. * Flushed right before a frame is rendered or when dimension properties are * formally queried to ensure that high-frequency layout changes don't stall * execution natively. */ updateBoundingBoxAndShadowIfDirty(): void; reset(): void; dispose(): void; get currentGLTF(): ModelViewerGLTFInstance; get currentGLTFs(): ModelViewerGLTFInstance[]; /** * Updates the ModelScene for a new container size in CSS pixels. */ setSize(width: number, height: number): void; markBakedShadow(mesh: Mesh$1): void; unmarkBakedShadow(mesh: Mesh$1): void; findBakedShadows(group: Object3D): void; checkBakedShadows(): void; applyTransform(): void; updateBoundingBox(): void; /** * Calculates the boundingSphere and idealAspect that allows the 3D * object to be framed tightly in a 2D window of any aspect ratio without * clipping at any camera orbit. The camera's center target point can be * optionally specified. If no center is specified, it defaults to the center * of the bounding box, which means asymmetric models will tend to be tight on * one side instead of both. Proper choice of center can correct this. */ updateFraming(): Promise<void>; setBakedShadowVisibility(visible?: boolean): void; idealCameraDistance(): number; /** * Set's the framedFieldOfView based on the aspect ratio of the window in * order to keep the model fully visible at any camera orientation. */ adjustedFoV(fovDeg: number): number; getNDC(clientX: number, clientY: number): Vector2; /** * Returns the size of the corresponding canvas element. */ getSize(): { width: number; height: number; }; setEnvironmentAndSkybox(environment: Texture$4 | null, skybox: Texture$4 | null): void; setBackground(skybox: Texture$4 | null): void; farRadius(): number; setGroundedSkybox(): void; /** * Sets the point in model coordinates the model should orbit/pivot around. */ setTarget(modelX: number, modelY: number, modelZ: number): void; /** * Set the decay time of, affects the speed of target transitions. */ setTargetDamperDecayTime(decayMilliseconds: number): void; /** * Gets the point in model coordinates the model should orbit/pivot around. */ getTarget(): Vector3$1; /** * Gets the current target point, which may not equal the goal returned by * getTarget() due to finite input decay smoothing. */ getDynamicTarget(): Vector3$1; /** * Shifts the model to the target point immediately instead of easing in. */ jumpToGoal(): void; /** * This should be called every frame with the frame delta to cause the target * to transition to its set point. */ updateTarget(delta: number): boolean; /** * Yaw the +z (front) of the model toward the indicated world coordinates. */ pointTowards(worldX: number, worldZ: number): void; get model(): Object3D<three.Object3DEventMap>; get models(): Object3D<three.Object3DEventMap>[]; /** * Yaw is the scene's orientation about the y-axis, around the rotation * center. */ set yaw(radiansY: number); get yaw(): number; set animationTime(value: number); get animationTime(): number; set animationTimeScale(value: number); get animationTimeScale(): number; get duration(): number; get hasActiveAnimation(): boolean; /** * Plays an animation if there are any associated with the current model. * Accepts an optional string name of an animation to play. If no name is * provided, or if no animation is found by the given name, always falls back * to playing the first animation. * If a modelIndex is provided, plays the animation only on that model. */ playAnimation(name?: string | null, crossfadeTime?: number, loopMode?: AnimationActionLoopStyles, repetitionCount?: number, modelIndex?: number | null): void; appendAnimation(name?: string, loopMode?: AnimationActionLoopStyles, repetitionCount?: number, weight?: number, timeScale?: number, fade?: boolean | number | string, warp?: boolean | number | string, relativeWarp?: boolean, time?: null | number | string, needsToStop?: boolean, modelIndex?: number | null): void; /** * Helper function to parse fade parameter values */ private parseFadeValue; detachAnimation(name?: string, fade?: boolean | number | string, modelIndex?: number | null): void; updateAnimationLoop(name?: string, loopMode?: AnimationActionLoopStyles, repetitionCount?: number, modelIndex?: number | null): void; stopAnimation(): void; isAllAnimationsPaused(): boolean; pauseAnimation(modelIndex?: number | null): void; unpauseAnimation(modelIndex?: number | null): void; updateAnimation(step: number): void; subscribeMixerEvent(event: keyof AnimationMixerEventMap, callback: (...args: any[]) => void): void; /** * Call if the object has been changed in such a way that the shadow's * shape has changed (not a rotation about the Y axis). */ updateShadow(): void; renderShadow(renderer: WebGLRenderer): void; private queueShadowRender; /** * Sets the shadow's intensity, lazily creating the shadow as necessary. */ setShadowIntensity(shadowIntensity: number): void; /** * Sets the shadow's softness by mapping a [0, 1] softness parameter to * the shadow's resolution. This involves reallocation, so it should not * be changed frequently. Softer shadows are cheaper to render. */ setShadowSoftness(softness: number): void; /** * Shift the floor vertically from the bottom of the model's bounding box * by offset (should generally be negative). */ setShadowOffset(offset: number): void; getHit(object?: Object3D): Intersection<Object3D<three.Object3DEventMap>> | undefined; hitFromController(controller: XRTargetRaySpace, object?: Object3D): Intersection<Object3D<three.Object3DEventMap>> | undefined; hitFromPoint(ndcPosition: Vector2, object?: Object3D): Intersection<Object3D<three.Object3DEventMap>> | undefined; getModelIndexFromHit(hit: Intersection): number; /** * This method returns the world position, model-space normal and texture * coordinate of the point on the mesh corresponding to the input pixel * coordinates given relative to the model-viewer element. If the mesh * is not hit, the result is null. */ positionAndNormalFromPoint(ndcPosition: Vector2, object?: Object3D): { position: Vector3$1; normal: Vector3$1; uv: Vector2 | null; modelIndex?: number; worldToModel: Matrix4$1; } | null; /** * This method returns a dynamic hotspot ID string of the point on the * mesh corresponding to the input pixel coordinates given relative to the * model-viewer element. The ID string can be used in the data-surface * attribute of the hotspot to make it follow this point on the surface * even as the model animates. If the mesh is not hit, the result is null. */ surfaceFromPoint(ndcPosition: Vector2, object?: Object3D): string | null; /** * The following methods are for operating on the set of Hotspot objects * attached to the scene. These come from DOM elements, provided to slots * by the Annotation Mixin. /** * Evaluates the intended `modelIndex` of the hotspot and safely reparents it * to the corresponding `Object3D` node mapped inside this scene's `_models` array. * This guarantees that declarative offset and layout transforms affect positional anchors. */ updateHotspotAttachment(hotspot: Hotspot): void; addHotspot(hotspot: Hotspot): void; removeHotspot(hotspot: Hotspot): void; /** * Helper method to apply a function to all hotspots. */ forHotspots(func: (hotspot: Hotspot) => void): void; /** * Lazy initializer for surface hotspots - will only run once. */ updateSurfaceHotspot(hotspot: Hotspot): void; /** * Update positions of surface hotspots to follow model animation. */ animateSurfaceHotspots(): void; /** * Update the CSS visibility of the hotspots based on whether their * normals point toward the camera. */ updateHotspotsVisibility(viewerPosition: Vector3$1): void; /** * Rotate all hotspots to an absolute orientation given by the input * number of radians. Zero returns them to upright. */ orientHotspots(radians: number): void; /** * Set the rendering visibility of all hotspots. This is used to hide them * during transitions and such. */ setHotspotsVisibility(visible: boolean): void; updateSchema(src: string | null): void; } type ARStatus = 'not-presenting' | 'session-started' | 'object-placed' | 'failed'; declare const ARStatus: { [index: string]: ARStatus; }; type ARTracking = 'tracking' | 'not-tracking'; declare const ARTracking: { [index: string]: ARTracking; }; declare class ARRenderer extends EventDispatcher<{ status: { status: ARStatus; }; tracking: { status: ARTracking; }; }> { private renderer; threeRenderer: WebGLRenderer; currentSession: XRSession | null; placeOnWall: boolean; private placementBox; private menuPanel; private lastTick; private turntableRotation; private oldShadowIntensity; private frame; private initialHitSource; private transientHitTestSource; private inputSource; private _presentedScene; private resolveCleanup; private exitWebXRButtonContainer; private overlay; private xrLight; private xrMode; private xrController1; private xrController2; private selectedXRController; private tracking; private frames; private initialized; private oldTarget; private placementComplete; private isTranslating; private isRotating; private isTwoHandInteraction; private lastDragPosition; private deltaRotation; private scaleLine; private firstRatio; private lastAngle; private goalPosition; private goalYaw; private goalScale; private xDamper; private yDamper; private zDamper; private yawDamper; private pitchDamper; private rollDamper; private scaleDamper; private wasTwoFingering; private worldSpaceInitialPlacementDone; private initialModelScale; private minScale; private maxScale; private onExitWebXRButtonContainerClick; /** * Check if world-space mode is active and initial placement is complete */ private isWorldSpaceReady; constructor(renderer: Renderer); resolveARSession(): Promise<XRSession>; /** * The currently presented scene, if any */ get presentedScene(): ModelScene | null; /** * Resolves to true if the renderer has detected all the necessary qualities * to support presentation in AR. */ supportsPresentation(): Promise<boolean>; /** * Present a scene in AR */ present(scene: ModelScene, environmentEstimation?: boolean): Promise<void>; private setupXRControllerLine; private setupController; private setupXRControllers; private hover; private controllerSeparation; private onControllerSelectStart; private onControllerSelectEnd; /** * If currently presenting a scene in AR, stops presentation and exits AR. */ stopPresenting(): Promise<void>; /** * True if a scene is currently in the process of being presented in AR */ get isPresenting(): boolean; get target(): Vector3$1; updateTarget(): void; onUpdateScene: () => void; private cleanupXRController; private postSessionCleanup; private updateView; private placeInitially; private getTouchLocation; private getHitPoint; moveToFloor(frame: XRFrame): void; private onSelectStart; private onSelectEnd; private onBeforeXRSelect; private fingerPolar; private setScale; private processInput; private applyXRControllerRotation; private handleScalingInXR; private updatePivotPosition; private updateYaw; private updateMenuPanel; private applyXRInputToScene; private updatePlacementBoxOpacity; private updateTwoHandInteractionState; private applyXRControllerRotations; private dispatchCameraChangeEvent; private updateXRControllerHover; /** * Enable user interaction for world-space mode after initial automatic * placement */ private enableWorldSpaceUserInteraction; private handleFirstView; /** * Only public to make it testable. */ onWebXRFrame(time: number, frame: XRFrame): void; /** * Calculate optimal scale and position for world-space AR presentation * Similar to the SVXR:FrameModel approach for consistent model presentation * * This method implements automatic model framing for world-space AR sessions: * 1. Calculates optimal viewing distance based on model size and minimum * distance * 2. Positions model at a drop angle below camera center for natural viewing * 3. Automatically scales model to fit within viewport constraints * 4. Ensures consistent presentation across different model sizes * * Note: This automatic placement only happens on the first session start. * After initial placement, users have full control over model position, * rotation, and scale. */ private calculateWorldSpaceOptimalPlacement; /** * Calculate min/max scale for world-space AR, SVXR-style */ private calculateWorldSpaceScaleLimits; } /** * A mutable cache is any object that has that allows cache * items to be deleted imperatively given their key */ interface MutableCache<T> { delete(key: T): void; } declare const $retainerCount: unique symbol; declare const $recentlyUsed: unique symbol; declare const $evict: unique symbol; declare const $evictionThreshold: unique symbol; declare const $cache: unique symbol; /** * The CacheEvictionPolicy manages the lifecycle for items in a cache, * evicting any items outside some threshold bounds in "recently used" order, * if they are evictable. * * Items are considered cached as they are retained. When all retainers * of an item release it, that item is considered evictable. */ declare class CacheEvictionPolicy<T = string> { private [$retainerCount]; private [$recentlyUsed]; private [$evictionThreshold]; private [$cache]; constructor(cache: MutableCache<T>, evictionThreshold?: number); /** * The eviction threshold is the maximum number of items to hold * in cache indefinitely. Items within the threshold (in recently * used order) will continue to be cached even if they have zero * retainers. */ set evictionThreshold(value: number); get evictionThreshold(): number; /** * A reference to the