A customizable HTML context menu.

Picks a Viewer's Entitys with a canvas-space 2D marquee box.

• [Example 1: Select Objects with Marquee]
• [Example 2: View-Fit Objects with Marquee]

Usage

In the example below, we

1. Create a Viewer, arrange the Camera
2. Use an XKTLoaderPlugin to load a BIM model,
3. Create a ObjectsKdTree3 to automatically index the Viewer's Entitys for fast spatial lookup, 4.

Controls a MarqueePicker with mouse input.

A PointerCircle shows a circle, centered at the position of the mouse or touch pointer.

A PointerLens shows a magnified view of a Viewer's canvas, centered at the position of the mouse or touch pointer.

This component is used by DistanceMeasurementsControl and AngleMeasurementsControl to help position the pointer when snap-to-vertex or snap-toedge is enabled.

[Run an example]

 import {Viewer, XKTLoaderPlugin, AngleMeasurementsPlugin, AngleMeasurementsMouseControl, PointerLens} from "../../dist/xeokit-sdk.es.js";

 const viewer = new Viewer({
     canvasId: "myCanvas",
     dtxEnabled: true
 });

 viewer.camera.eye = [-3.93, 2.85, 27.01];
 viewer.camera.look = [4.40, 3.72, 8.89];
 viewer.camera.up = [-0.01, 0.99, 0.039];

 const xktLoader = new XKTLoaderPlugin(viewer);

 const sceneModel = xktLoader.load({
     id: "myModel",
     src: "../../assets/models/xkt/v10/glTF-Embedded/Duplex_A_20110505.glTFEmbedded.xkt",
     edges: true
 });

 const angleMeasurements = new AngleMeasurementsPlugin(viewer);

 const angleMeasurementsMouseControl  = new AngleMeasurementsMouseControl(angleMeasurements, {
     pointerLens : new PointerLens(viewer, {
         zoomFactor: 2
     })
 })

 angleMeasurementsMouseControl.activate();

Automatically indexes a Viewer's Entitys in a 3D k-d tree to support fast collision detection with 3D World-space axis-aligned boundaries (AABBs) and frustums.

See MarqueePicker for usage example.

An ObjectsKdTree3 is configured with a Viewer, and will then automatically keep itself populated with k-d nodes that contain the Viewer's Entitys.

Measures the angle indicated by three 3D points.

Creates AngleMeasurements in an AngleMeasurementsPlugin from mouse input.

Viewer plugin for measuring angles.

Creates AngleMeasurements from touch input.

Creates AngleMeasurements in an AngleMeasurementsPlugin from user input.

A Marker with an HTML label attached to it, managed by an AnnotationsPlugin.

Viewer plugin that creates Annotations.

Viewer plugin that shows the axii of the World-space coordinate system.

Viewer plugin that saves and loads BCF viewpoints as JSON objects.

Default data access strategy for CityJSONLoaderPlugin.

Viewer plugin that loads models from CityJSON files.

Measures the distance between two 3D points.

Creates DistanceMeasurements in a DistanceMeasurementsPlugin from mouse input.

Viewer plugin for measuring point-to-point distances.

Creates DistanceMeasurements from touch input.

Creates DistanceMeasurements in a DistanceMeasurementsPlugin from user input.

Default data access strategy for DotBIMLoaderPlugin.

Viewer plugin that loads models from .bim format.

Controls a SectionPlane with mouse and touch input.

FaceAlignedSectionPlanesPlugin is a Viewer plugin that creates and edits face-aligned SectionPlanes.

Viewer plugin that makes interaction smoother with large models, by temporarily switching the Viewer to faster, lower-quality rendering modes whenever we interact.

Default data access strategy for GLTFLoaderPlugin.

Viewer plugin that loads models from glTF.

Default data access strategy for LASLoaderPlugin.

Viewer plugin that loads lidar point cloud geometry from LAS files.

Viewer plugin that lets us look at the entire Scene from along a chosen axis or diagonal.

Viewer plugin that loads models from OBJ files.

Default data access strategy for STLLoaderPlugin.

Viewer plugin that loads models from STL files.

SectionPlanesPlugin is a Viewer plugin that manages SectionPlanes.

Viewer plugin that manages skyboxes

Information about an IfcBuildingStorey.

A 2D plan view image of an IfcBuildingStorey.

A Viewer plugin that provides methods for visualizing IfcBuildingStoreys.

A TreeViewPlugin render class.

A node within a TreeViewPlugin.

Viewer plugin that performs view frustum culling to accelerate rendering performance.

Default data access strategy for WebIFCLoaderPlugin.

Viewer plugin that uses web-ifc to load BIM models directly from IFC files.

Default data access strategy for XKTLoaderPlugin.

Viewer plugin that loads models from xeokit's optimized .XKT format.

[Run this example]

Overview

• XKTLoaderPlugin is the most efficient way to load high-detail models into xeokit.
• An .XKT file is a single BLOB containing a model, compressed using geometry quantization and pako.
• Supports double-precision coordinates.
• Supports compressed textures.
• Set the position, scale and rotation of each model as you load it.
• Filter which IFC types get loaded.
• Configure initial default appearances for IFC types.
• Set a custom data source for .XKT and IFC metadata files.
• Option to load multiple copies of the same model, without object ID clashes.

Creating .XKT Files and Metadata

We have several sways to convert your files into XKT. See these tutorials for more info:

• Converting Models to XKT with convert2xkt - how to convert various file formats (glTF, IFC, CityJSON, LAS/LAZ...) to XKT using our nodejs-based converter.
• Converting IFC Models to XKT using 3rd-Party Open Source Tools - how to convert IFC files to XKT using 3rd-party open source CLI tools.

Scene representation

When loading a model, XKTLoaderPlugin creates an Entity that represents the model, which will have Entity#isModel set true and will be registered by Entity#id in Scene#models. The XKTLoaderPlugin also creates an Entity for each object within the model. Those Entities will have Entity#isObject set true and will be registered by Entity#id in Scene#objects.

Metadata

Since XKT V8, model metadata is included in the XKT file. If the XKT file has metadata, then loading it creates model metadata components within the Viewer, namely a MetaModel corresponding to the model Entity, and a MetaObject for each object Entity.

Each MetaObject has a MetaObject#type, which indicates the classification of its corresponding Entity. When loading metadata, we can also configure XKTLoaderPlugin with a custom lookup table of initial values to set on the properties of each type of Entity. By default, XKTLoaderPlugin uses its own map of default colors and visibilities for IFC element types.

For XKT versions prior to V8, we provided the metadata to XKTLoaderPlugin as an accompanying JSON file to load. We can still do that for all XKT versions, and for XKT V8+ it will override any metadata provided within the XKT file.

Usage

In the example below we'll load the Schependomlaan model from a .XKT file.

Viewer plugin that loads models from 3DXML files.

ZonesPlugin documentation to be added, mostly compatible with DistanceMeasurementsPlugin.

Manages global configurations for all Viewers.

Base class for Viewer plugin classes.

The 3D Viewer at the heart of the xeokit SDK.

Localization service for a Viewer.

Metadata corresponding to an Entity that represents a model.

Metadata corresponding to an Entity that represents an object.

Metadata corresponding to a Scene.

A property within a PropertySet.

A set of properties associated with one or more MetaObjects.

Initial properties for Entitys loaded from IFC models accompanied by metadata.

Default initial properties for Entitys loaded from models accompanied by metadata.

Base class for all xeokit components.

An abstract 3D scene element that can be individually shown, hidden, selected, highlighted, xrayed, culled, picked, clipped and bounded.

xeokit runtime statistics.

A plane-shaped 3D object containing a bitmap image.

A plane-shaped 3D object containing a bitmap image.

A set of 3D line segments.

Manages viewing and projection transforms for its Scene.

Jumps or flies the Scene's Camera to a given target.

• Located at Viewer#cameraFlight
• Can fly or jump to its target.
• While flying, can be stopped, or redirected to a different target.
• Can also smoothly transition between ortho and perspective projections.

A CameraFlightAnimation's target can be:

Defines a sequence of frames along which a CameraPathAnimation can animate a Camera.

Animates the Scene's's Camera along a CameraPath.

Defines a custom projection for a Camera as a custom 4x4 matrix..

Defines its Camera's perspective projection as a frustum-shaped view volume.

• Located at Camera#frustum.
• Allows to explicitly set the positions of the left, right, top, bottom, near and far planes, which is useful for asymmetrical view volumes, such as for stereo viewing.
• Frustum#near and Frustum#far specify the distances to the WebGL clipping planes.

Defines its Camera's orthographic projection as a box-shaped view volume.

• Located at Camera#ortho.
• Works like Blender's orthographic projection, where the positions of the left, right, top and bottom planes are implicitly indicated with a single Ortho#scale property, which causes the frustum to be symmetrical on X and Y axis, large enough to contain the number of units given by Ortho#scale.

Defines its Camera's perspective projection using a field-of-view angle.

• Located at Camera#perspective.
• Implicitly sets the left, right, top, bottom frustum planes using Perspective#fov.
• Perspective#near and Perspective#far specify the distances to the WebGL clipping planes.

Manages its Scene's HTML canvas.

• Provides the HTML canvas element in Canvas#canvas.
• Has a Spinner, provided at Canvas#spinner, which manages the loading progress indicator.

Displays a progress animation at the center of its Canvas while things are loading or otherwise busy.

Texture sampling mode that discards the RGBA components and just reads the A component.

Signed 8-bit integer type.

Texture wrapping mode in which the last pixel of the texture stretches to the edge of the mesh.

Media type for compressed texture data.

Texture sampling mode that reads each element as a single depth value, converts it to a float and clamps to [0,1].

Texture sampling mode that

Signed 32-bit floating-point type.

Media type for GIF images.

Signed 16-bit half-precision floating-point type.

Signed 32-bit integer type.

Media type for JPEG images.

Texture encoding mode in which the texture image is in linear color space.

Texture magnification and minification filter that returns the weighted average of the four nearest texels to the given sample coordinates.

Texture minification filter that chooses two mipmaps that most closely match the size of the pixel being textured, finds within each mipmap the weighted average of the nearest texel to the center of the pixel, then returns the weighted average of those two values.

Texture minification filter that chooses the mipmap that most closely matches the size of the pixel being textured and returns the weighted average of the four nearest texels to the given sample coordinates.

Texture minification filter that chooses two mipmaps that most closely match the size of the pixel being textured, finds within each mipmap the weighted average of the nearest texel to the center of the pixel, then returns the weighted average of those two values.

Texture minification filter that chooses the mipmap that most closely matches the size of the pixel being textured and returns the weighted average of the four nearest texels to the given sample coordinates.

Texture sampling mode that reads each of the RGBA texture components as a luminance/alpha value, converted to a float and clamped to [0,1].

Texture sampling mode that reads each RGB texture component as a luminance value, converted to a float and clamped to [0,1], while always reading the A channel as 1.0.

Texture wrapping mode in which the texture repeats to infinity, mirroring on each repeat.

Texture magnification and minification filter that returns the nearest texel to the given sample coordinates.

Texture minification filter that chooses two mipmaps that most closely match the size of the pixel being textured and returns the nearest texel to the center of the pixel at the given sample coordinates.

Texture minification filter that chooses the mipmap that most closely matches the size of the pixel being textured and returns the nearest texel to the given sample coordinates.

Texture minification filter that chooses two mipmaps that most closely match the size of the pixel being textured and returns the nearest texel to the center of the pixel at the given sample coordinates.

Texture minification filter that chooses the mipmap that most closely matches the size of the pixel being textured and returns the nearest texel to the given sample coordinates.

Media type for PNG images.

Texture sampling mode that reads the RGBA components.

Texture sampling mode that reads the RGBA components as integers instead of floats.

Texture format mode in which the texture is formatted as an ATSC compressed RGBA image.

Texture format mode in which the texture is formatted as an ATSC compressed RGBA image.

Texture format mode in which the texture is formatted as an ATSC compressed RGBA image.

Texture format mode in which the texture is formatted as an ATSC compressed RGBA image.

Texture format mode in which the texture is formatted as an ATSC compressed RGBA image.

Texture format mode in which the texture is formatted as an ATSC compressed RGBA image.

Texture format mode in which the texture is formatted as an ATSC compressed RGBA image.

Texture format mode in which the texture is formatted as an ATSC compressed RGBA image.

Texture format mode in which the texture is formatted as an ATSC compressed RGBA image.

Texture format mode in which the texture is formatted as an ATSC compressed RGBA image.

Texture format mode in which the texture is formatted as an ATSC compressed RGBA image.

Texture format mode in which the texture is formatted as an ATSC compressed RGBA image.

Texture format mode in which the texture is formatted as an ATSC compressed RGBA image.

Texture format mode in which the texture is formatted as an ATSC compressed RGBA image.

Texture format mode in which the texture is formatted as an BPTC compressed RGBA image.

Texture format mode in which the texture is formatted as an ETC2 compressed RGBA image.

Texture format mode in which the texture is formatted as a PVRTC compressed image, with RGBA compression in 2-bit mode and one block for each 8×4 pixels.

Texture format mode in which the texture is formatted as a PVRTC compressed image, with RGBA compression in 4-bit mode and one block for each 4×4 pixels.

Texture format mode in which the texture is formatted as a DXT1 compressed RGBA image.

Texture format mode in which the texture is formatted as a DXT3 compressed RGBA image.

Texture format mode in which the texture is formatted as a DXT5 compressed RGBA image.

Texture sampling mode that discards the A component and reads the RGB components.

Texture format mode in which the texture is formatted as an ETC1 compressed RGB image.

Texture format mode in which the texture is formatted as an ETC2 compressed RGB image.

Texture format mode in which the texture is formatted as a PVRTC compressed image, with RGB compression in 2-bit mode and one block for each 8×4 pixels.

Texture format mode in which the texture is formatted as a PVRTC compressed image, with RGB compression in 4-bit mode and one block for each 4×4 pixels.

Texture format mode in which the texture is formatted as a DXT1 compressed RGB image.

Texture sampling mode that discards the A and B components and just reads the R and G components.

Texture sampling mode that discards the A and B components and just reads the R and G components, as integers instead of floats.

Texture sampling mode that discards the GBA components and just reads the R component.

Texture sampling mode that discards the GBA components and just reads the R component, as an integer instead of as a float.

Texture wrapping mode in which the texture repeats to infinity.

Signed 16-bit integer type.

Unsigned 8-bit integer type.

Unsigned integer type for 24-bit depth texture data.

Unsigned 32-bit integer type.

Texture packing mode in which each RGBA channel is packed into 4 bits, for a combined total of 16 bits.

Texture packing mode in which the RGB channels are each packed into 5 bits, and the A channel is packed into 1 bit, for a combined total of 16 bits.

Unsigned 16-bit integer type.

Texture encoding mode in which the texture image is in sRGB color space.

Defines a shape for one or more Meshes.

A Geometry that keeps its geometry data in both browser and GPU memory.

A Geometry that keeps its geometry data solely in GPU memory, without retaining it in browser memory.

Creates box-shaped Geometry.

Creates a box-shaped lines Geometry.

Creates a box-shaped lines Geometry from AABB.

Creates a cylinder-shaped Geometry.

Creates a grid-shaped Geometry.

Creates a 3D line Geometry.

Creates a plane-shaped Geometry.

Creates a 3D polyline Geometry.

Creates a 3D polyline from curve Geometry.

Creates a sphere-shaped Geometry.

Creates a torus-shaped Geometry.

Creates wireframe vector text Geometry.

Loads Geometry from 3DS.

Loads Geometry from OBJ.

Meditates mouse, touch and keyboard events for various interaction controls.

An ambient light source of fixed color and intensity that illuminates all Meshes equally.

A cube texture map.

A directional light source that illuminates all Meshes equally from a given direction.

A dynamic light source within a Scene.

A LightMap specifies a cube texture light map.

A positional light source that originates from a single point and spreads outward in all directions, with optional attenuation over distance.

A reflection cube map.

Tracks the World, View and Canvas coordinates, and visibility, of a position within a Scene.

A Marker with a billboarded and textured quad attached to it.

Configures the appearance of Entitys when their edges are emphasised.

Configures the appearance of Entitys when they are xrayed, highlighted or selected.

Configures Fresnel effects for PhongMaterials.

Configures the normal rendered appearance of Meshes using the non-realistic but GPU-efficient Lambertian flat shading model for calculating reflectance.

Configures the shape of "lines" geometry primitives.

Configures the normal rendered appearance of Meshes using the physically-accurate metallic-roughness shading model.

Configures the normal rendered appearance of Meshes using the non-physically-correct Blinn-Phong shading model.

Configures the size and shape of "points" geometry primitives.

Configures the normal rendered appearance of Meshes using the physically-accurate specular-glossiness shading model.

A 2D texture map.

Calculates the surface area of triangle meshes.

Calculates the volume of triangle meshes.

Singleton instance of MeshSurfaceArea.

Singleton instance of MeshVolume.

Saves and restores the state of a Scene's Camera.

See Also

• ModelMemento - Saves and restores a snapshot of the visual state of the Entity's of a model within a Scene.

Saves and restores a snapshot of the visual state of the Entity's of a model within a Scene.

Usage

In the example below, we'll create a Viewer and use an XKTLoaderPlugin to load an .xkt model.

Saves and restores a snapshot of the visual state of the Entity's that represent objects within a Scene.

• An Entity represents an object when Entity#isObject is true.
• Each object-Entity is registered by Entity#id in Scene#objects.

See Also

• CameraMemento - Saves and restores the state of a Scene's Camera.

An Entity that is a drawable element, with a Geometry and a Material, that can be connected into a scene graph using Nodes.

Configures its Scene's measurement unit and mapping between the Real-space and World-space 3D Cartesian coordinate systems.

Overview

• Located at Scene#metrics.
• Metrics#units configures the Real-space unit type, which is "meters" by default.
• Metrics#scale configures the number of Real-space units represented by each unit within the World-space 3D coordinate system. This is 1.0 by default.
• Metrics#origin configures the 3D Real-space origin, in current Real-space units, at which this Scene's World-space coordinate origin sits, This is [0,0,0] by default.

A high-performance model representation for efficient rendering and low memory usage.

A high-performance model representation for efficient rendering and low memory usage.

An entity within a SceneModel

A mesh within a SceneModel.

A texture within a SceneModelTextureSet.

A texture set within a SceneModel.

A dynamically-updatable transform within a SceneModel.

A high-performance model representation for efficient rendering and low memory usage.

This function obtains unique positionsCompressed in the provided object .positionsCompressed array and calculates an index mapping, which is then applied to the provided object .indices and .edgeindices.

An Entity that is a scene graph node that can have child Nodes and Meshes.

A Curve along which a 3D position can be animated.

Abstract base class for curve classes.

A complex curved path constructed from various Curve subtypes.

A QuadraticBezierCurve is a Curve along which a 3D position can be animated.

A Curve along which a 3D position can be animated.

Configures cross-section slices for a Scene.

Configures Scalable Ambient Obscurance (SAO) for a Scene.

Contains the components that comprise a 3D scene.

An arbitrarily-aligned World-space clipping plane.

A set of arbitrarily-aligned World-space clipping planes.

A Skybox.

Transcodes texture data.

Transcodes texture data from KTX2.

Pick result returned by Scene#pick.