xeokit Example

### Basic Viewer with XKTLoaderPlugin Source: https://xeokit.github.io/xeokit-sdk/docs This example demonstrates how to create a basic xeokit viewer and load an XKT model using the XKTLoaderPlugin. It includes setup for the canvas, viewer, camera, and model loading options. ```html xeokit Example

``` -------------------------------- ### Initialize Viewer and FastNavPlugin Source: https://xeokit.github.io/xeokit-sdk/docs/class/src/plugins/FastNavPlugin/FastNavPlugin.js~FastNavPlugin.html This example demonstrates how to initialize a xeokit Viewer with PBR and SAO enabled, and then install a FastNavPlugin with custom configuration. The plugin is configured to hide edges, SAO, color textures, PBR, and transparent objects while interacting. It also scales the canvas resolution by 0.5 and sets a 0.5-second delay before restoring normal rendering quality after interaction stops. ```javascript import {Viewer, XKTLoaderPlugin, FastNavPlugin} from "xeokit-sdk.es.js"; // Create a Viewer with PBR and SAO enabled const viewer = new Viewer({ canvasId: "myCanvas", transparent: true, pbr: true, // Enable physically-based rendering for Viewer sao: true // Enable ambient shadows for Viewer }); viewer.scene.camera.eye = [-66.26, 105.84, -281.92]; viewer.scene.camera.look = [42.45, 49.62, -43.59]; viewer.scene.camera.up = [0.05, 0.95, 0.15]; // Higher-quality SAO settings viewer.scene.sao.enabled = true; viewer.scene.sao.numSamples = 60; viewer.scene.sao.kernelRadius = 170; // Install a FastNavPlugin new FastNavPlugin(viewer, { hideEdges: true, // Don't show edges while we interact (default is true) hideSAO: true, // Don't show ambient shadows while we interact (default is true) hideColorTexture: true, // No color textures while we interact (default is true) hidePBR: true, // No physically-based rendering while we interact (default is true) hideTransparentObjects: true, // Hide transparent objects while we interact (default is false) scaleCanvasResolution: true, // Scale canvas resolution while we interact (default is false) defaultScaleCanvasResolutionFactor: 1.0, // Factor by which we scale canvas resolution when we stop interacting (default is 1.0) scaleCanvasResolutionFactor: 0.5, // Factor by which we scale canvas resolution when we interact (default is 0.6) delayBeforeRestore: true, // When we stop interacting, delay before restoring normal render (default is true) delayBeforeRestoreSeconds: 0.5 // The delay duration, in seconds (default is 0.5) }); // Load a BIM model from XKT const xktLoader = new XKTLoaderPlugin(viewer); const model = xktLoader.load({ id: "myModel", src: "./models/xkt/HolterTower.xkt", sao: true, // Enable ambient shadows for this model pbr: true // Enable physically-based rendering for this model }); ``` -------------------------------- ### World-Space PointLights Example Source: https://xeokit.github.io/xeokit-sdk/docs/file/src/viewer/scene/lights/PointLight.js.html Demonstrates replacing default scene lights with three custom world-space PointLights. This setup is useful for creating specific lighting conditions for a scene. ```javascript import { Viewer, Mesh, buildSphereGeometry, buildPlaneGeometry, ReadableGeometry, PhongMaterial, Texture, PointLight} from "xeokit-sdk.es.js"; // Create a Viewer and arrange the camera const viewer = new Viewer({ canvasId: "myCanvas" }); viewer.scene.camera.eye = [0, 0, 5]; viewer.scene.camera.look = [0, 0, 0]; viewer.scene.camera.up = [0, 1, 0]; // Replace the Scene's default lights with three custom world-space PointLights viewer.scene.clearLights(); new PointLight(viewer.scene,{ id: "keyLight", pos: [-80, 60, 80], color: [1.0, 0.3, 0.3], intensity: 1.0, space: "world" }); new PointLight(viewer.scene,{ id: "fillLight", pos: [80, 40, 40], color: [0.3, 1.0, 0.3], intensity: 1.0, space: "world" }); new PointLight(viewer.scene,{ id: "rimLight", pos: [-20, 80, -80], color: [0.6, 0.6, 0.6], intensity: 1.0, space: "world" }); // Create a sphere and ground plane new Mesh(viewer.scene, { geometry: new ReadableGeometry(viewer.scene, buildSphereGeometry({ radius: 1.3 }), material: new PhongMaterial(viewer.scene, { diffuse: [0.7, 0.7, 0.7], specular: [1.0, 1.0, 1.0], emissive: [0, 0, 0], alpha: 1.0, ambient: [1, 1, 0], diffuseMap: new Texture(viewer.scene, { src: "textures/diffuse/uvGrid2.jpg" }) }) }); new Mesh(viewer.scene, { geometry: buildPlaneGeometry(ReadableGeometry, viewer.scene, { xSize: 30, zSize: 30 }), material: new PhongMaterial(viewer.scene, { diffuseMap: new Texture(viewer.scene, { src: "textures/diffuse/uvGrid2.jpg" }), backfaces: true }), position: [0, -2.1, 0] }); ``` -------------------------------- ### Create and Configure DirLights Source: https://xeokit.github.io/xeokit-sdk/docs/class/src/viewer/scene/lights/DirLight.js~DirLight.html Example of replacing default scene lights with custom view-space DirLights. This setup includes a key light, fill light, and rim light, along with creating a sphere and ground plane mesh. ```javascript import {Viewer, Mesh, buildSphereGeometry, buildPlaneGeometry, ReadableGeometry, PhongMaterial, Texture, DirLight} from "xeokit-sdk.es.js"; // Create a Viewer and arrange the camera const viewer = new Viewer({ canvasId: "myCanvas" }); viewer.scene.camera.eye = [0, 0, 5]; viewer.scene.camera.look = [0, 0, 0]; viewer.scene.camera.up = [0, 1, 0]; // Replace the Scene's default lights with three custom view-space DirLights viewer.scene.clearLights(); new DirLight(viewer.scene, { id: "keyLight", dir: [0.8, -0.6, -0.8], color: [1.0, 0.3, 0.3], intensity: 1.0, space: "view" }); new DirLight(viewer.scene, { id: "fillLight", dir: [-0.8, -0.4, -0.4], color: [0.3, 1.0, 0.3], intensity: 1.0, space: "view" }); new DirLight(viewer.scene, { id: "rimLight", dir: [0.2, -0.8, 0.8], color: [0.6, 0.6, 0.6], intensity: 1.0, space: "view" }); // Create a sphere and ground plane new Mesh(viewer.scene, { geometry: new ReadableGeometry(viewer.scene, buildSphereGeometry({ radius: 2.0 }), material: new PhongMaterial(viewer.scene, { diffuse: [0.7, 0.7, 0.7], specular: [1.0, 1.0, 1.0], emissive: [0, 0, 0], alpha: 1.0, ambient: [1, 1, 0], diffuseMap: new Texture(viewer.scene, { src: "textures/diffuse/uvGrid2.jpg" }) }) }); new Mesh(viewer.scene, { geometry: buildPlaneGeometry(ReadableGeometry, viewer.scene, { xSize: 30, zSize: 30 }), material: new PhongMaterial(viewer.scene, { diffuseMap: new Texture(viewer.scene, { src: "textures/diffuse/uvGrid2.jpg" }), backfaces: true }), position: [0, -2.1, 0] }); ``` -------------------------------- ### Create Light Setup Source: https://xeokit.github.io/xeokit-sdk/docs/function Initializes the light setup for rendering, processing program variables and light states. This function is essential for configuring scene lighting. ```javascript import {createLightSetup} from '@xeokit/xeokit-sdk/src/viewer/scene/webgl/WebGLRenderer.js' ``` -------------------------------- ### Texture and Scene Setup Functions Source: https://xeokit.github.io/xeokit-sdk/docs/function/index.html Functions for creating combined textures, light setups, and skybox meshes. ```APIDOC ## createCombinedTexture ### Description Asynchronously creates a combined texture from multiple sources. ### Method (Not specified, likely a static method or function call) ### Endpoint (Not applicable) ### Parameters #### Path Parameters (None) #### Query Parameters (None) #### Request Body - **scene** (Component): The scene component. - **cfg** (*): Configuration object for creating the texture. ### Request Example (Not specified) ### Response #### Success Response - ** ***: The created texture. #### Response Example (Not specified) ``` ```APIDOC ## createLightSetup ### Description Creates a light setup configuration. ### Method (Not specified, likely a static method or function call) ### Endpoint (Not applicable) ### Parameters #### Path Parameters (None) #### Query Parameters (None) #### Request Body - **programVariables** (*): Program variables. - **lightsState** (*): Current lights state. ### Request Example (Not specified) ### Response #### Success Response - **Object**: An object containing light setup details, including: - **getHash**: Function to get the hash of the light setup. - **getAmbientColor**: Function to get the ambient color. - **directionalLights**: Array of directional lights. - **getIrradiance**: Function to get the irradiance. - **getReflection**: Function to get the reflection. #### Response Example (Not specified) ``` ```APIDOC ## createProgramVariablesState ### Description Initializes the state for program variables. ### Method (Not specified, likely a static method or function call) ### Endpoint (Not applicable) ### Parameters (None) ### Request Example (Not specified) ### Response #### Success Response - **Object**: An object containing program variables state and a buildProgram function: - **programVariables**: The program variables state. - **buildProgram**: Function to build a program. #### Response Example (Not specified) ``` ```APIDOC ## createSkyboxMesh ### Description Creates a skybox mesh for the scene. ### Method (Not specified, likely a static method or function call) ### Endpoint (Not applicable) ### Parameters #### Path Parameters (None) #### Query Parameters (None) #### Request Body - **scene** (Component): The scene component. - **texture** (Texture): The texture to use for the skybox. ### Request Example (Not specified) ### Response #### Success Response - ** ***: The created skybox mesh. #### Response Example (Not specified) ``` ```APIDOC ## createSphereMapMesh ### Description Creates a sphere map mesh. ### Method (Not specified, likely a static method or function call) ### Endpoint (Not applicable) ### Parameters #### Path Parameters (None) #### Query Parameters (None) #### Request Body - **scene** (*): The scene. - **texture** (Texture): The texture to use for the sphere map. ### Request Example (Not specified) ### Response #### Success Response - **Mesh**: The created sphere map mesh. #### Response Example (Not specified) ``` -------------------------------- ### Animation Start and Scheduling Source: https://xeokit.github.io/xeokit-sdk/docs/file/src/viewer/scene/camera/CameraFlightAnimation.js.html Sets up animation timing, duration, and flags, then schedules the animation update task. Fires a 'started' event. ```javascript this.fire("started", params, true); this._time1 = Date.now(); this._time2 = this._time1 + (Number.isFinite(params.duration) ? params.duration * 1000 : this._duration); this._flying = true; // False as soon as we stop core.scheduleTask(this._update, this); ``` -------------------------------- ### CubicBezierCurve.v0 Source: https://xeokit.github.io/xeokit-sdk/docs/file/src/viewer/scene/paths/CubicBezierCurve.js.html Gets and sets the starting point of the CubicBezierCurve. ```APIDOC ## CubicBezierCurve.v0 ### Description Gets and sets the starting point of the CubicBezierCurve. ### Method GET/SET ### Endpoint N/A (Class property) ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body * **value** (Number[]) - The starting point. Defaults to `[0.0, 0.0, 0.0]`. ``` -------------------------------- ### Instantiate LightMap with Usage Example Source: https://xeokit.github.io/xeokit-sdk/docs/class/src/viewer/scene/lights/LightMap.js~LightMap.html Demonstrates how to create a Viewer, set up the camera, and instantiate a LightMap with texture sources. It also includes creating a sphere mesh with a metallic material. ```javascript import {Viewer, Mesh, buildSphereGeometry, ReadableGeometry, MetallicMaterial, LightMap} from "xeokit-sdk.es.js"; // Create a Viewer and arrange the camera const viewer = new Viewer({ canvasId: "myCanvas" }); viewer.scene.camera.eye = [0, 0, 5]; viewer.scene.camera.look = [0, 0, 0]; viewer.scene.camera.up = [0, 1, 0]; new LightMap(viewer.scene, { src: [ "textures/light/Uffizi_Gallery/Uffizi_Gallery_Irradiance_PX.png", "textures/light/Uffizi_Gallery/Uffizi_Gallery_Irradiance_NX.png", "textures/light/Uffizi_Gallery/Uffizi_Gallery_Irradiance_PY.png", "textures/light/Uffizi_Gallery/Uffizi_Gallery_Irradiance_NY.png", "textures/light/Uffizi_Gallery/Uffizi_Gallery_Irradiance_PZ.png", "textures/light/Uffizi_Gallery/Uffizi_Gallery_Irradiance_NZ.png" ] }); // Create a sphere and ground plane new Mesh(viewer.scene, { geometry: new ReadableGeometry(viewer.scene, buildSphereGeometry({ radius: 2.0 }), new MetallicMaterial(viewer.scene, { baseColor: [1, 1, 1], metallic: 1.0, roughness: 1.0 }) }); ``` -------------------------------- ### Snap Program Setup Source: https://xeokit.github.io/xeokit-sdk/docs/file/src/viewer/scene/model/layer/Layer.js.html Creates a program for snapping functionality. Supports initialization and point-based snapping. ```javascript const makeSnapProgram = (vars, geo, c, isSnapInit, isPoints) => c(SnapProgram(vars, geo, isSnapInit, isPoints), true); ``` -------------------------------- ### CubicBezierCurve v0 Getter Source: https://xeokit.github.io/xeokit-sdk/docs/file/src/viewer/scene/paths/CubicBezierCurve.js.html Gets the starting point of the CubicBezierCurve. Defaults to [0,0,0]. ```javascript /** * Gets the starting point on this CubicBezierCurve. * * Default value is ````[0.0, 0.0, 0.0]```` * * @returns {Number[]} The starting point. */ get v0() { return this._v0; } ``` -------------------------------- ### v0 (getter/setter) Source: https://xeokit.github.io/xeokit-sdk/docs/class/src/viewer/scene/paths/CubicBezierCurve.js~CubicBezierCurve.html Gets or sets the starting point of the cubic Bezier curve. ```APIDOC ## v0 (getter/setter) ### Description Gets or sets the starting point on this CubicBezierCurve. ### Getter #### Return: * **Number[]** - The starting point. Defaults to `[0.0, 0.0, 0.0]`. ### Setter #### Parameters: * **value** (Number[]) - Required - The new starting point. ``` -------------------------------- ### NavCubePlugin Usage Example Source: https://xeokit.github.io/xeokit-sdk/docs/file/src/plugins/NavCubePlugin/NavCubePlugin.js.html Demonstrates how to initialize and configure the NavCubePlugin with a Viewer and load a model using XKTLoaderPlugin. Shows options for camera control, fitting, and synchronization. ```JavaScript import {Viewer, XKTLoaderPlugin, NavCubePlugin} from "xeokit-sdk.es.js"; const viewer = new Viewer({ canvasId: "myCanvas" }); 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.03]; const navCube = new NavCubePlugin(viewer, { canvasID: "myNavCubeCanvas", visible: true, // Initially visible (default) cameraFly: true, // Fly camera to each selected axis/diagonal cameraFitFOV: 45, // How much field-of-view the scene takes once camera has fitted it to view cameraFlyDuration: 0.5,// How long (in seconds) camera takes to fly to each new axis/diagonal fitVisible: false, // Fit whole scene, including invisible objects (default) synchProjection: false // Keep NavCube in perspective projection, even when camera switches to ortho (default) }); const xktLoader = new XKTLoaderPlugin(viewer); const model = xktLoader.load({ id: "myModel", src: "./models/xkt/Duplex.ifc.xkt", edges: true }); ``` -------------------------------- ### Creating a SpotLight with Shadow Source: https://xeokit.github.io/xeokit-sdk/docs/file/src/viewer/scene/lights/Shadow.js.html This example demonstrates how to create a SpotLight with a Shadow component attached. Configure shadow resolution, intensity, and sampling method. ```javascript var mesh = new xeokit.Mesh(scene, { lights: new xeokit.Lights({ lights: [ new xeokit.SpotLight({ pos: [0, 100, 100], dir: [0, -1, 0], color: [0.5, 0.7, 0.5], intensity: 1, constantAttenuation: 0, linearAttenuation: 0, quadraticAttenuation: 0, space: "view", shadow: new xeokit.Shadow({ resolution: [1000, 1000], intensity: 0.7, sampling: "stratified" // "stratified" | "poisson" | "basic" }) }) ] }), material: new xeokit.PhongMaterial({ diffuse: [0.5, 0.5, 0.0] }), geometry: new xeokit.BoxGeometry() }); ``` -------------------------------- ### Set and Get Control Point v0 Source: https://xeokit.github.io/xeokit-sdk/docs/class/src/viewer/scene/paths/CubicBezierCurve.js~CubicBezierCurve.html Manages the starting point (v0) of the CubicBezierCurve. ```javascript set v0(value: Number[]) ``` ```javascript get v0: Number[] ``` -------------------------------- ### Set and Get Control Points (v0, v1, v2) Source: https://xeokit.github.io/xeokit-sdk/docs/class/src/viewer/scene/paths/QuadraticBezierCurve.js~QuadraticBezierCurve.html Set or get the start (v0), middle control (v1), and end (v2) points of the QuadraticBezierCurve. These points define the shape of the curve. ```javascript quadraticBezierCurve.v0 = [5, 5, 5]; const startPoint = quadraticBezierCurve.v0; quadraticBezierCurve.v1 = [15, 20, 10]; const controlPoint = quadraticBezierCurve.v1; quadraticBezierCurve.v2 = [25, 10, 5]; const endPoint = quadraticBezierCurve.v2; ``` -------------------------------- ### Initialize Viewer and NavCubePlugin Source: https://xeokit.github.io/xeokit-sdk/docs/class/src/plugins/NavCubePlugin/NavCubePlugin.js~NavCubePlugin.html Create a Viewer instance, add the NavCubePlugin with custom configurations, and load a model using XKTLoaderPlugin. This sets up the scene navigation and model loading. ```javascript import {Viewer, XKTLoaderPlugin, NavCubePlugin} from "xeokit-sdk.es.js"; const viewer = new Viewer({ canvasId: "myCanvas" }); 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.03]; const navCube = new NavCubePlugin(viewer, { canvasID: "myNavCubeCanvas", visible: true, // Initially visible (default) cameraFly: true, // Fly camera to each selected axis/diagonal cameraFitFOV: 45, // How much field-of-view the scene takes once camera has fitted it to view cameraFlyDuration: 0.5,// How long (in seconds) camera takes to fly to each new axis/diagonal fitVisible: false, // Fit whole scene, including invisible objects (default) synchProjection: false // Keep NavCube in perspective projection, even when camera switches to ortho (default) }); const xktLoader = new XKTLoaderPlugin(viewer); const model = xktLoader.load({ id: "myModel", src: "./models/xkt/Duplex.ifc.xkt", edges: true }); ``` -------------------------------- ### QuadraticBezierCurve.v0 Source: https://xeokit.github.io/xeokit-sdk/docs/file/src/viewer/scene/paths/QuadraticBezierCurve.js.html Gets or sets the starting point of the QuadraticBezierCurve. The default value is ````[0.0, 0.0, 0.0]````. ```APIDOC ## QuadraticBezierCurve.v0 ### Description Gets or sets the starting point of the QuadraticBezierCurve. The default value is ````[0.0, 0.0, 0.0]````. ### Method GET/SET ### Endpoint N/A (Class property) ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body - **value** (Number[]) - The new starting point. ``` -------------------------------- ### setupTexture Source: https://xeokit.github.io/xeokit-sdk/docs/function Sets up a texture for rendering. ```APIDOC ## setupTexture ### Description Sets up a texture for rendering. ### Method Not applicable (function call) ### Parameters - **programVariables** (*): Program variables. - **type** (*): The type of texture. - **name** (string): The name of the texture. - **encoding** (*): The encoding of the texture. - **getTexture** (*): A function to get the texture. ### Response - ** ***: The result of setting up the texture. ``` -------------------------------- ### createLightSetup Source: https://xeokit.github.io/xeokit-sdk/docs/function Creates a light setup configuration. ```APIDOC ## createLightSetup ### Description Creates a light setup configuration. ### Method Not applicable (function call) ### Parameters - **programVariables** (*): Program variables. - **lightsState** (*): Current lights state. ### Response - **Object**: An object containing light setup details, including `getHash`, `getAmbientColor`, `directionalLights`, `getIrradiance`, and `getReflection`. ``` -------------------------------- ### Initialize Viewer and Plugins for Zone Creation Source: https://xeokit.github.io/xeokit-sdk/docs/file/src/plugins/ZonesPlugin/ZonesPlugin.js.html Sets up the xeokit viewer, XKTLoaderPlugin, and ZonesPlugin, then configures ZonesMouseControl for interactive zone creation. Ensure 'xeokit-sdk.es.js' is imported. ```javascript import {Viewer, XKTLoaderPlugin, ZonesPlugin, ZonesMouseControl} from "xeokit-sdk.es.js"; const viewer = new Viewer({ canvasId: "myCanvas", }); 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: "Duplex.xkt" }); const zones = new ZonesPlugin(viewer); const zonesControl = new ZonesMouseControl(Zones) ``` -------------------------------- ### Create and Use ReflectionMap Source: https://xeokit.github.io/xeokit-sdk/docs/class/src/viewer/scene/lights/ReflectionMap.js~ReflectionMap.html Demonstrates how to create a Viewer, configure the camera, instantiate a ReflectionMap with texture paths, and create a reflective sphere. ```javascript import {Viewer, Mesh, buildSphereGeometry, ReadableGeometry, MetallicMaterial, ReflectionMap} from "xeokit-sdk.es.js"; // Create a Viewer and arrange the camera const viewer = new Viewer({ canvasId: "myCanvas" }); viewer.scene.camera.eye = [0, 0, 5]; viewer.scene.camera.look = [0, 0, 0]; viewer.scene.camera.up = [0, 1, 0]; new ReflectionMap(viewer.scene, { src: [ "textures/reflect/Uffizi_Gallery/Uffizi_Gallery_Radiance_PX.png", "textures/reflect/Uffizi_Gallery/Uffizi_Gallery_Radiance_NX.png", "textures/reflect/Uffizi_Gallery/Uffizi_Gallery_Radiance_PY.png", "textures/reflect/Uffizi_Gallery/Uffizi_Gallery_Radiance_NY.png", "textures/reflect/Uffizi_Gallery/Uffizi_Gallery_Radiance_PZ.png", "textures/reflect/Uffizi_Gallery/Uffizi_Gallery_Radiance_NZ.png" ] }); // Create a sphere and ground plane new Mesh(viewer.scene, { geometry: new ReadableGeometry(viewer.scene, buildSphereGeometry({ radius: 2.0 }), new MetallicMaterial(viewer.scene, { baseColor: [1, 1, 1], metallic: 1.0, roughness: 1.0 }) }); ``` -------------------------------- ### Create Mesh with PhongMaterial and Fresnel Effect Source: https://xeokit.github.io/xeokit-sdk/docs/class/src/viewer/scene/materials/Fresnel.js~Fresnel.html Example demonstrating how to create a Mesh with a PhongMaterial that utilizes a Fresnel effect for its alpha channel, simulating a glass-like appearance. This setup requires importing several components from 'xeokit-sdk.es.js'. ```javascript import {Viewer, Mesh, buildTorusGeometry, ReadableGeometry, PhongMaterial, Texture, Fresnel} from "xeokit-sdk.es.js"; const viewer = new Viewer({ canvasId: "myCanvas", transparent: true }); viewer.scene.camera.eye = [0, 0, 5]; viewer.scene.camera.look = [0, 0, 0]; viewer.scene.camera.up = [0, 1, 0]; new Mesh(viewer.scene, { geometry: new ReadableGeometry(viewer.scene, buildTorusGeometry({ center: [0, 0, 0], radius: 1.5, tube: 0.5, radialSegments: 32, tubeSegments: 24, arc: Math.PI * 2.0 }), material: new PhongMaterial(viewer.scene, { alpha: 0.9, alphaMode: "blend", ambient: [0.0, 0.0, 0.0], shininess: 30, diffuseMap: new Texture(viewer.scene, { src: "textures/diffuse/uvGrid2.jpg" }), alphaFresnel: new Fresnel(viewer.scene, { v edgeBias: 0.2, centerBias: 0.8, edgeColor: [1.0, 1.0, 1.0], centerColor: [0.0, 0.0, 0.0], power: 2 }) }) }); ``` -------------------------------- ### Initialize Viewer with Plugins and Load Model Source: https://xeokit.github.io/xeokit-sdk/docs/file/src/plugins/StoreyViewsPlugin/StoreyViewsPlugin.js.html Demonstrates how to set up a xeokit Viewer, add the XKTLoaderPlugin and StoreyViewsPlugin, and then load a BIM model from an .xkt file. ```javascript import {Viewer, XKTLoaderPlugin, StoreyViewsPlugin} from "xeokit-sdk.es.js"; // Create a Viewer, arrange the camera const viewer = new Viewer({ canvasId: "myCanvas", transparent: true }); viewer.camera.eye = [-2.56, 8.38, 8.27]; viewer.camera.look = [13.44, 3.31, -14.83]; viewer.camera.up = [0.10, 0.98, -0.14]; // Add an XKTLoaderPlugin const xktLoader = new XKTLoaderPlugin(viewer); // Add a StoreyViewsPlugin const storeyViewsPlugin = new StoreyViewsPlugin(viewer); // Load a BIM model from .xkt format const model = xktLoader.load({ id: "myModel", src: "./models/xkt/Schependomlaan.xkt", edges: true }); ``` -------------------------------- ### Get Point on Quadratic Bézier Curve Source: https://xeokit.github.io/xeokit-sdk/docs/file/src/viewer/scene/paths/QuadraticBezierCurve.js.html Retrieves the 3D coordinates of a point on the quadratic Bézier curve at a specified parameter 't'. This method uses the quadratic Bézier formula to interpolate between the start, control, and end points. ```javascript getPoint(t) { var vector = math.vec3(); vector[0] = math.b2(t, this._v0[0], this._v1[0], this._v2[0]); vector[1] = math.b2(t, this._v0[1], this._v1[1], this._v2[1]); vector[2] = math.b2(t, this._v0[2], this._v1[2], this._v2[2]); return vector; } ``` -------------------------------- ### Initialize Viewer with Plugins Source: https://xeokit.github.io/xeokit-sdk/docs/class/src/plugins/StoreyViewsPlugin/StoreyViewsPlugin.js~StoreyViewsPlugin.html Create a Viewer instance and add XKTLoaderPlugin and StoreyViewsPlugin. Load a BIM model using the XKTLoaderPlugin. ```javascript import {Viewer, XKTLoaderPlugin, StoreyViewsPlugin} from "xeokit-sdk.es.js"; // Create a Viewer, arrange the camera const viewer = new Viewer({ canvasId: "myCanvas", transparent: true }); viewer.camera.eye = [-2.56, 8.38, 8.27]; viewer.camera.look = [13.44, 3.31, -14.83]; viewer.camera.up = [0.10, 0.98, -0.14]; // Add an XKTLoaderPlugin const xktLoader = new XKTLoaderPlugin(viewer); // Add a StoreyViewsPlugin const storeyViewsPlugin = new StoreyViewsPlugin(viewer); // Load a BIM model from .xkt format const model = xktLoader.load({ id: "myModel", src: "./models/xkt/Schependomlaan.xkt", edges: true }); ``` -------------------------------- ### Create and Configure a Bitmap Source: https://xeokit.github.io/xeokit-sdk/docs/class/src/viewer/scene/Bitmap/Bitmap.js~Bitmap.html Demonstrates how to create a Bitmap instance and configure its properties such as source image, dimensions, position, orientation, and interaction behavior. ```javascript import {Viewer, Bitmap, XKTLoaderPlugin} from "xeokit-sdk.es.js"; const viewer = new Viewer({ canvasId: "myCanvas", transparent: true }); viewer.camera.eye = [-24.65, 21.69, 8.16]; viewer.camera.look = [-14.62, 2.16, -1.38]; viewer.camera.up = [0.59, 0.57, -0.56]; const xktLoader = new XKTLoaderPlugin(viewer); xktLoader.load({ id: "myModel", src: "./models/xkt/Schependomlaan.xkt", edges: true }); new Bitmap(viewer.scene, { src: "./images/schependomlaanPlanView.png", visible: true, // Show the Bitmap height: 24.0, // Height of Bitmap pos: [-15, 0, -10], // World-space position of Bitmap's center normal: [0, -1, 0], // Vector perpendicular to Bitmap up: [0, 0, 1], // Direction of Bitmap "up" collidable: false, // Bitmap does not contribute to Scene boundary clippable: true, // Bitmap can be clipped by SectionPlanes pickable: true // Allow the ground plane to be picked }); ``` -------------------------------- ### Install xeokit-sdk Source: https://xeokit.github.io/xeokit-sdk/docs Install the xeokit-sdk using npm. ```bash npm i @xeokit/xeokit-sdk ``` -------------------------------- ### Initialize Viewer, Load Model, and Set Up MarqueePicker Source: https://xeokit.github.io/xeokit-sdk/docs/class/src/extras/MarqueePicker/MarqueePicker.js~MarqueePicker.html This snippet demonstrates the complete setup for using MarqueePicker. It initializes a Viewer, loads a model using XKTLoaderPlugin, creates an ObjectsKdTree3 for spatial indexing, instantiates MarqueePicker with the tree, and configures MarqueePickerMouseControl for interactive picking. Event handlers for 'clear' and 'picked' are also set up to manage object selection. ```javascript import { Viewer, XKTLoaderPlugin, ObjectsKdTree3, MarqueePicker, MarqueePickerMouseControl } from "xeokit-sdk.es.js"; // 1 const viewer = new Viewer({ canvasId: "myCanvas" }); viewer.scene.camera.eye = [14.9, 14.3, 5.4]; viewer.scene.camera.look = [6.5, 8.3, -4.1]; viewer.scene.camera.up = [-0.28, 0.9, -0.3]; // 2 const xktLoader = new XKTLoaderPlugin(viewer); const sceneModel = xktLoader.load({ id: "myModel", src: "../../assets/models/xkt/v8/ifc/HolterTower.ifc.xkt" }); // 3 const objectsKdTree3 = new ObjectsKdTree3({viewer}); // 4 const marqueePicker = new MarqueePicker({viewer, objectsKdTree3}); // 5 const marqueePickerMouseControl = new MarqueePickerMouseControl({marqueePicker}); marqueePicker.on("clear", () => { viewer.scene.setObjectsSelected(viewer.scene.selectedObjectIds, false); }); marqueePicker.on("picked", (objectIds) => { viewer.scene.setObjectsSelected(objectIds, true); }); marqueePickerMouseControl.setActive(true); ``` -------------------------------- ### PBRProgram Setup Source: https://xeokit.github.io/xeokit-sdk/docs/file/src/viewer/scene/model/layer/programs/PBRProgram.js.html Initializes the PBRProgram with geometry, scene, and lighting configurations. Sets up textures for color, metallic roughness, emissive, normal, and ambient occlusion. ```javascript import {LinearEncoding, sRGBEncoding} from "../../../constants/constants.js"; import {setupTexture} from "../../../webgl/WebGLRenderer.js"; export const PBRProgram = function(programVariables, geometry, scene, lightSetup, sao) { const setup2dTexture = (name, isSrgb, getTexture) => { return setupTexture(programVariables, "sampler2D", name, isSrgb ? sRGBEncoding : LinearEncoding, (set, state) => { const texture = getTexture(state.layerTextureSet); texture && set(texture.texture); }); }; const attributes = geometry.attributes; const getIrradiance = lightSetup.getIrradiance; const colorMap = setup2dTexture("uColorMap", true, textureSet => textureSet.colorTexture); const metallicRoughMap = setup2dTexture("uMetallicRoughMap", false, textureSet => textureSet.metallicRoughnessTexture); const emissiveMap = setup2dTexture("uEmissiveMap", true, textureSet => textureSet.emissiveTexture); const normalMap = setup2dTexture("uNormalMap", false, textureSet => textureSet.normalsTexture); const aOMap = setup2dTexture("uAOMap", false, textureSet => textureSet.occlusionTexture); const vViewPosition = programVariables.createVarying("vec3", "vViewPosition", () => `${attributes.position.view}.xyz`); const vViewNormal = programVariables.createVarying("vec3", "vViewNormal", () => attributes.normal.view); const vColor = programVariables.createVarying("vec4", "vColor", () => attributes.color); const vUV = programVariables.createVarying("vec2", "vUV", () => attributes.uv); const vMetallicRoughness = programVariables.createVarying("vec2", "vMetallicRoughness", () => attributes.metallicRoughness); const vWorldNormal = programVariables.createVarying("vec3", "vWorldNormal", () => `${attributes.normal.world}.xyz`); const outColor = programVariables.createOutput("vec4", "outColor"); const saturate = programVariables.createFragmentDefinition( "saturate", (name, src) => src.push(`float ${name}(const in float a) { return clamp(a, 0.0, 1.0); }`)); const BRDF_Specular_GGX = programVariables.createFragmentDefinition( "BRDF_Specular_GGX", (name, src) => { src.push("vec3 F_Schlick(const in vec3 specularColor, const in float dotLH) {"); src.push(" float fresnel = exp2( ( -5.55473 * dotLH - 6.98316 ) * dotLH );"); src.push(" return ( 1.0 - specularColor ) * fresnel + specularColor;"); src.push("}"); src.push("float G_GGX_Smith(const in float alpha, const in float dotNL, const in float dotNV) {"); src.push(" float a2 = ( alpha * alpha );"); src.push(" float gl = dotNL + sqrt( a2 + ( 1.0 - a2 ) * ( dotNL * dotNL ) );"); src.push(" float gv = dotNV + sqrt( a2 + ( 1.0 - a2 ) * ( dotNV * dotNV ) );"); src.push(" return 1.0 / ( gl * gv );"); src.push("}"); src.push("float G_GGX_SmithCorrelated(const in float alpha, const in float dotNL, const in float dotNV) {"); src.push(" float a2 = ( alpha * alpha );"); src.push(" float gv = dotNL * sqrt( a2 + ( 1.0 - a2 ) * ( dotNV * dotNV ) );"); src.push(" float gl = dotNV * sqrt( a2 + ( 1.0 - a2 ) * ( dotNL * dotNL ) );"); src.push(" return 0.5 / max( gv + gl, 1e-6 );"); src.push("}"); src.push("float D_GGX(const in float alpha, const in float dotNH) {"); src.push(" float a2 = ( alpha * alpha );"); src.push(" float denom = ( dotNH * dotNH) * ( a2 - 1.0 ) + 1.0;"); src.push(" return 0.31830988618 * a2 / ( denom * denom); // 1/PI"); src.push("}"); src.push(`vec3 ${name}(const in vec3 incidentLightDirection, const in vec3 viewNormal, const in vec3 viewEyeDir, const in vec3 specularColor, const in float roughness) {`); src.push(" float alpha = ( roughness * roughness );"); src.push(" vec3 halfDir = normalize( incidentLightDirection + viewEyeDir );"); src.push(` float dotNL = ${saturate}( dot( viewNormal, incidentLightDirection ) );`); src.push(` float dotNV = ${saturate}( dot( viewNormal, viewEyeDir ) );`); src.push(` float dotNH = ${saturate}( dot( viewNormal, halfDir ) );`); ``` -------------------------------- ### Get SectionPlane Visibility Source: https://xeokit.github.io/xeokit-sdk/docs/class/src/plugins/FaceAlignedSectionPlanesPlugin/FaceAlignedSectionPlanesControl.js~FaceAlignedSectionPlanesControl.html Gets if this FaceAlignedSectionPlanesControl is visible. ```javascript getVisible(): *: Boolean ``` -------------------------------- ### Get Fill Property Source: https://xeokit.github.io/xeokit-sdk/docs/file/src/viewer/scene/materials/EmphasisMaterial.js.html Gets if surfaces are filled with color. ```javascript get fill() { return this._state.fill; } ``` -------------------------------- ### ReflectionMap Usage Example Source: https://xeokit.github.io/xeokit-sdk/docs/file/src/viewer/scene/lights/ReflectionMap.js.html Demonstrates how to create and use a ReflectionMap with a Viewer. This includes setting up the viewer, camera, and creating a reflective sphere. ```javascript import {Viewer, Mesh, buildSphereGeometry, ReadableGeometry, MetallicMaterial, ReflectionMap} from "xeokit-sdk.es.js"; // Create a Viewer and arrange the camera const viewer = new Viewer({ canvasId: "myCanvas" }); viewer.scene.camera.eye = [0, 0, 5]; viewer.scene.camera.look = [0, 0, 0]; viewer.scene.camera.up = [0, 1, 0]; new ReflectionMap(viewer.scene, { src: [ "textures/reflect/Uffizi_Gallery/Uffizi_Gallery_Radiance_PX.png", "textures/reflect/Uffizi_Gallery/Uffizi_Gallery_Radiance_NX.png", "textures/reflect/Uffizi_Gallery/Uffizi_Gallery_Radiance_PY.png", "textures/reflect/Uffizi_Gallery/Uffizi_Gallery_Radiance_NY.png", "textures/reflect/Uffizi_Gallery/Uffizi_Gallery_Radiance_PZ.png", "textures/reflect/Uffizi_Gallery/Uffizi_Gallery_Radiance_NZ.png" ] }); // Create a sphere and ground plane new Mesh(viewer.scene, { geometry: new ReadableGeometry(viewer.scene, buildSphereGeometry({ radius: 2.0 }), new MetallicMaterial(viewer.scene, { baseColor: [1, 1, 1], metallic: 1.0, roughness: 1.0 }) }); ``` -------------------------------- ### Get Target Dot Source: https://xeokit.github.io/xeokit-sdk/docs/file/src/plugins/AngleMeasurementsPlugin/AngleMeasurement.js.html Gets the target Dot3D object. ```javascript get target() { return this._targetDot; } ``` -------------------------------- ### Initialize Viewer and Load IFC Model Source: https://xeokit.github.io/xeokit-sdk/docs/file/src/plugins/WebIFCLoaderPlugin/WebIFCLoaderPlugin.js.html Demonstrates the basic setup for initializing a xeokit Viewer and loading an IFC model using the WebIFCLoaderPlugin. It includes setting up the camera and configuring the plugin with a web-ifc API instance. ```javascript import {Viewer, WebIFCLoaderPlugin} from "xeokit-sdk.es.js"; import * as WebIFC from "https://cdn.jsdelivr.net/npm/web-ifc@0.0.51/web-ifc-api.js"; //------------------------------------------------------------------------------------------------------------------ // 1. Create a Viewer, // 2. Arrange the camera //------------------------------------------------------------------------------------------------------------------ // 1 const viewer = new Viewer({ canvasId: "myCanvas", transparent: true }); // 2 viewer.camera.eye = [-2.56, 8.38, 8.27]; viewer.camera.look = [13.44, 3.31, -14.83]; viewer.camera.up = [0.10, 0.98, -0.14]; //------------------------------------------------------------------------------------------------------------------ // 1. Create a web-ifc API, which will parse IFC for our WebIFCLoaderPlugin ``` -------------------------------- ### Get Corner Dot Source: https://xeokit.github.io/xeokit-sdk/docs/file/src/plugins/AngleMeasurementsPlugin/AngleMeasurement.js.html Gets the corner Dot3D object. ```javascript get corner() { return this._cornerDot; } ```