Function

Creates box-shaped triangle mesh geometry arrays.

Usage

In the example below we'll create an XKTModel, then create an XKTMesh with a box-shaped XKTGeometry.

[Run this example]

const xktModel = new XKTModel();

const box = buildBoxGeometry({
    primitiveType: "triangles" // or "lines"
    center: [0,0,0],
    xSize: 1,  // Half-size on each axis
    ySize: 1,
    zSize: 1
});

const xktGeometry = xktModel.createGeometry({
     geometryId: "boxGeometry",
     primitiveType: box.primitiveType,
     positions: box.positions,
     normals: box.normals,
     indices: box.indices
});

const xktMesh = xktModel.createMesh({
     meshId: "redBoxMesh",
     geometryId: "boxGeometry",
     position: [-4, -6, -4],
     scale: [1, 3, 1],
     rotation: [0, 0, 0],
     color: [1, 0, 0],
     opacity: 1
});

const xktEntity = xktModel.createEntity({
     entityId: "redBox",
     meshIds: ["redBoxMesh"]
 });

xktModel.finalize();

Creates box-shaped line segment geometry arrays.

Usage

In the example below we'll create an XKTModel, then create an XKTMesh with a box-shaped XKTGeometry.

[Run this example]

const xktModel = new XKTModel();

const box = buildBoxLinesGeometry({
    center: [0,0,0],
    xSize: 1,  // Half-size on each axis
    ySize: 1,
    zSize: 1
});

const xktGeometry = xktModel.createGeometry({
     geometryId: "boxGeometry",
     primitiveType: box.primitiveType, // "lines"
     positions: box.positions,
     normals: box.normals,
     indices: box.indices
});

const xktMesh = xktModel.createMesh({
     meshId: "redBoxMesh",
     geometryId: "boxGeometry",
     position: [-4, -6, -4],
     scale: [1, 3, 1],
     rotation: [0, 0, 0],
     color: [1, 0, 0],
     opacity: 1
});

const xktEntity = xktModel.createEntity({
     entityId: "redBox",
     meshIds: ["redBoxMesh"]
 });

xktModel.finalize();

Creates cylinder-shaped geometry arrays.

Usage

In the example below we'll create an XKTModel, then create an XKTMesh with a cylinder-shaped XKTGeometry.

[Run this example]

const xktModel = new XKTModel();

const cylinder = buildCylinderGeometry({
     center: [0,0,0],
     radiusTop: 2.0,
     radiusBottom: 2.0,
     height: 5.0,
     radialSegments: 20,
     heightSegments: 1,
     openEnded: false
});

const xktGeometry = xktModel.createGeometry({
     geometryId: "cylinderGeometry",
     primitiveType: cylinder.primitiveType,
     positions: cylinder.positions,
     normals: cylinder.normals,
     indices: cylinder.indices
});

const xktMesh = xktModel.createMesh({
     meshId: "redCylinderMesh",
     geometryId: "cylinderGeometry",
     position: [-4, -6, -4],
     scale: [1, 3, 1],
     rotation: [0, 0, 0],
     color: [1, 0, 0],
     opacity: 1
});

const xktEntity = xktModel.createEntity({
     entityId: "redCylinder",
     meshIds: ["redCylinderMesh"]
 });

xktModel.finalize();

Creates grid-shaped geometry arrays..

Usage

In the example below we'll create an XKTModel, then create an XKTMesh with a grid-shaped XKTGeometry.

[Run this example]

const xktModel = new XKTModel();

const grid = buildGridGeometry({
     size: 1000,
     divisions: 500
});

const xktGeometry = xktModel.createGeometry({
     geometryId: "gridGeometry",
     primitiveType: grid.primitiveType, // Will be "lines"
     positions: grid.positions,
     indices: grid.indices
});

const xktMesh = xktModel.createMesh({
     meshId: "redGridMesh",
     geometryId: "gridGeometry",
     position: [-4, -6, -4],
     scale: [1, 3, 1],
     rotation: [0, 0, 0],
     color: [1, 0, 0],
     opacity: 1
});

const xktEntity = xktModel.createEntity({
     entityId: "redGrid",
     meshIds: ["redGridMesh"]
});

xktModel.finalize();

Creates plane-shaped geometry arrays.

Usage

In the example below we'll create an XKTModel, then create an XKTMesh with a plane-shaped XKTGeometry.

[Run this example]

const xktModel = new XKTModel();

const plane = buildPlaneGeometry({
     center: [0,0,0],
     xSize: 2,
     zSize: 2,
     xSegments: 10,
     zSegments: 10
});

const xktGeometry = xktModel.createGeometry({
     geometryId: "planeGeometry",
     primitiveType: plane.primitiveType, // Will be "triangles"
     positions: plane.positions,
     normals: plane.normals,
     indices: plane.indices
});

const xktMesh = xktModel.createMesh({
     meshId: "redPlaneMesh",
     geometryId: "planeGeometry",
     position: [-4, -6, -4],
     scale: [1, 3, 1],
     rotation: [0, 0, 0],
     color: [1, 0, 0],
     opacity: 1
});

const xktEntity = xktModel.createEntity({
     entityId: "redPlane",
     meshIds: ["redPlaneMesh"]
 });

xktModel.finalize();

Creates sphere-shaped geometry arrays.

Usage

In the example below we'll create an XKTModel, then create an XKTMesh with a sphere-shaped XKTGeometry.

[Run this example]

const xktModel = new XKTModel();

const sphere = buildSphereGeometry({
     center: [0,0,0],
     radius: 1.5,
     heightSegments: 60,
     widthSegments: 60
});

const xktGeometry = xktModel.createGeometry({
     geometryId: "sphereGeometry",
     primitiveType: sphere.primitiveType, // Will be "triangles"
     positions: sphere.positions,
     normals: sphere.normals,
     indices: sphere.indices
});

const xktMesh = xktModel.createMesh({
     meshId: "redSphereMesh",
     geometryId: "sphereGeometry",
     position: [-4, -6, -4],
     scale: [1, 3, 1],
     rotation: [0, 0, 0],
     color: [1, 0, 0],
     opacity: 1
});

const xktEntity = xktModel.createEntity({
     entityId: "redSphere",
     meshIds: ["redSphereMesh"]
 });

xktModel.finalize();

Creates torus-shaped geometry arrays.

Usage

In the example below we'll create an XKTModel, then create an XKTMesh with a torus-shaped XKTGeometry.

[Run this example]

const xktModel = new XKTModel();

const torus = buildTorusGeometry({
     center: [0,0,0],
     radius: 1.0,
     tube: 0.5,
     radialSegments: 32,
     tubeSegments: 24,
     arc: Math.PI * 2.0
});

const xktGeometry = xktModel.createGeometry({
     geometryId: "torusGeometry",
     primitiveType: torus.primitiveType, // Will be "triangles"
     positions: torus.positions,
     normals: torus.normals,
     indices: torus.indices
});

const xktMesh = xktModel.createMesh({
     meshId: "redTorusMesh",
     geometryId: "torusGeometry",
     position: [-4, -6, -4],
     scale: [1, 3, 1],
     rotation: [0, 0, 0],
     color: [1, 0, 0],
     opacity: 1
});

const xktEntity = xktModel.createEntity({
     entityId: "redTorus",
     meshIds: ["redTorusMesh"]
});

xktModel.finalize();

Creates wireframe text-shaped geometry arrays.

Usage

In the example below we'll create an XKTModel, then create an XKTMesh with a text-shaped XKTGeometry.

[Run this example]

const xktModel = new XKTModel();

const text = buildVectorTextGeometry({
     origin: [0,0,0],
     text: "On the other side of the screen, it all looked so easy"
});

const xktGeometry = xktModel.createGeometry({
     geometryId: "textGeometry",
     primitiveType: text.primitiveType, // Will be "lines"
     positions: text.positions,
     indices: text.indices
});

const xktMesh = xktModel.createMesh({
     meshId: "redTextMesh",
     geometryId: "textGeometry",
     position: [-4, -6, -4],
     scale: [1, 3, 1],
     rotation: [0, 0, 0],
     color: [1, 0, 0],
     opacity: 1
});

const xktEntity = xktModel.createEntity({
     entityId: "redText",
     meshIds: ["redTextMesh"]
 });

xktModel.finalize();

Converts model files into xeokit's native XKT format.

Supported source formats are: IFC, CityJSON, glTF, LAZ and LAS.

Only bundled in xeokit-convert.cjs.js.

Usage

const convert2xkt = require("@xeokit/xeokit-convert/dist/convert2xkt.cjs.js");
const fs = require('fs');

convert2xkt({
     sourceData: fs.readFileSync("rme_advanced_sample_project.ifc"),
     outputXKT: (xtkArrayBuffer) => {
         fs.writeFileSync("rme_advanced_sample_project.ifc.xkt", xtkArrayBuffer);
     }
 }).then(() => {
     console.log("Converted.");
 }, (errMsg) => {
     console.error("Conversion failed: " + errMsg)
 });

Parses a CityJSON model into an XKTModel.

CityJSON is a JSON-based encoding for a subset of the CityGML data model (version 2.0.0), which is an open standardised data model and exchange format to store digital 3D models of cities and landscapes. CityGML is an official standard of the Open Geospatial Consortium.

This converter function supports most of the CityJSON 1.0.2 Specification, with the following limitations:

• Does not (yet) support CityJSON semantics for geometry primitives.
• Does not (yet) support textured geometries.
• Does not (yet) support geometry templates.
• When the CityJSON file provides multiple themes for a geometry, then we parse only the first of the provided themes for that geometry.

Usage

In the example below we'll create an XKTModel, then load a CityJSON model into it.

utils.loadJSON("./models/cityjson/DenHaag.json", async (data) => {

    const xktModel = new XKTModel();

    parseCityJSONIntoXKTModel({
         data,
         xktModel,
         log: (msg) => { console.log(msg); }
    }).then(()=>{
       xktModel.finalize();
    },
    (msg) => {
        console.error(msg);
    });
});

Parses glTF into an XKTModel, supporting .glb and textures.

• Supports .glb and textures
• For a lightweight glTF JSON parser that ignores textures, see parseGLTFJSONIntoXKTModel.

Usage

In the example below we'll create an XKTModel, then load a binary glTF model into it.

utils.loadArraybuffer("../assets/models/gltf/HousePlan/glTF-Binary/HousePlan.glb", async (data) => {

    const xktModel = new XKTModel();

    parseGLTFIntoXKTModel({
         data,
         xktModel,
         log: (msg) => { console.log(msg); }
    }).then(()=>{
       xktModel.finalize();
    },
    (msg) => {
        console.error(msg);
    });
});

Parses glTF into an XKTModel, supporting .glb and textures.

• Supports .glb and textures
• For a lightweight glTF JSON parser that ignores textures, see parseGLTFJSONIntoXKTModel.

Usage

In the example below we'll create an XKTModel, then load a binary glTF model into it.

utils.loadArraybuffer("../assets/models/gltf/HousePlan/glTF-Binary/HousePlan.glb", async (data) => {

    const xktModel = new XKTModel();

    parseGLTFIntoXKTModel({
         data,
         xktModel,
         log: (msg) => { console.log(msg); }
    }).then(()=>{
       xktModel.finalize();
    },
    (msg) => {
        console.error(msg);
    });
});

Parses glTF into an XKTModel, supporting .glb and textures.

• Supports .glb and textures
• For a lightweight glTF JSON parser that ignores textures, see parseGLTFJSONIntoXKTModel.

Usage

In the example below we'll create an XKTModel, then load a binary glTF model into it.

utils.loadArraybuffer("../assets/models/gltf/HousePlan/glTF-Binary/HousePlan.glb", async (data) => {

    const xktModel = new XKTModel();

    parseGLTFIntoXKTModel({
         data,
         xktModel,
         log: (msg) => { console.log(msg); }
    }).then(()=>{
       xktModel.finalize();
    },
    (msg) => {
        console.error(msg);
    });
});

Parses glTF JSON into an XKTModel, without .glb and textures.

• Lightweight JSON-based glTF parser which ignores textures
• For texture and .glb support, see parseGLTFIntoXKTModel

Usage

In the example below we'll create an XKTModel, then load a glTF model into it.

utils.loadJSON("./models/gltf/duplex/scene.gltf", async (data) => {

    const xktModel = new XKTModel();

    parseGLTFJSONIntoXKTModel({
         data,
         xktModel,
         log: (msg) => { console.log(msg); }
    }).then(()=>{
       xktModel.finalize();
    },
    (msg) => {
        console.error(msg);
    });
});

Parses IFC STEP file data into an XKTModel.

This function uses web-ifc to parse the IFC, which relies on a WASM file to do the parsing.

Depending on how we use this function, we may need to provide it with a path to the directory where that WASM file is stored.

This function is tested with web-ifc version 0.0.34.

Usage

In the example below we'll create an XKTModel, then load an IFC model into it.

import {XKTModel, parseIFCIntoXKTModel, writeXKTModelToArrayBuffer} from "xeokit-convert.es.js";

import * as WebIFC from "web-ifc-api.js";

utils.loadArraybuffer("rac_advanced_sample_project.ifc", async (data) => {

    const xktModel = new XKTModel();

    parseIFCIntoXKTModel({
         WebIFC,
         data,
         xktModel,
         wasmPath: "../dist/",
         autoNormals: true,
         log: (msg) => { console.log(msg); }
    }).then(()=>{
       xktModel.finalize();
    },
    (msg) => {
        console.error(msg);
    });
});

Parses LAS and LAZ point cloud data into an XKTModel.

This parser handles both the LASER file format (LAS) and its compressed version (LAZ), a public format for the interchange of 3-dimensional point cloud data data, developed for LIDAR mapping purposes.

Usage

In the example below we'll create an XKTModel, then load an LAZ point cloud model into it.

utils.loadArraybuffer("./models/laz/autzen.laz", async (data) => {

    const xktModel = new XKTModel();

    await parseLASIntoXKTModel({
         data,
         xktModel,
         rotateX: true,
         log: (msg) => { console.log(msg); }
    }).then(()=>{
       xktModel.finalize();
    },
    (msg) => {
        console.error(msg);
    });
});

Parses JSON metamodel into an XKTModel.

Parses PCD point cloud data into an XKTModel.

Usage

In the example below we'll create an XKTModel, then load an LAZ point cloud model into it.

utils.loadArraybuffer(""./models/pcd/ism_test_cat.pcd"", async (data) => {

    const xktModel = new XKTModel();

    await parsePCDIntoXKTModel({
         data,
         xktModel,
         log: (msg) => { console.log(msg); }
    }).then(()=>{
       xktModel.finalize();
    },
    (msg) => {
        console.error(msg);
    });
});

Parses PLY file data into an XKTModel.

Usage

In the example below we'll create an XKTModel, then load a PLY model into it.

utils.loadArraybuffer("./models/ply/test.ply", async (data) => {

    const xktModel = new XKTModel();

    parsePLYIntoXKTModel({data, xktModel}).then(()=>{
       xktModel.finalize();
    },
    (msg) => {
        console.error(msg);
    });
});

Parses STL file data into an XKTModel.

• Supports binary and ASCII STL formats.
• Option to create a separate XKTEntity for each group of faces that share the same vertex colors.
• Option to smooth face-aligned normals loaded from STL.
• Option to reduce XKT file size by ignoring STL normals and relying on xeokit to auto-generate them.

Usage

In the example below we'll create an XKTModel, then load an STL model into it.

utils.loadArraybuffer("./models/stl/binary/spurGear.stl", async (data) => {

    const xktModel = new XKTModel();

    parseSTLIntoXKTModel({data, xktModel});

    xktModel.finalize();
});

Writes an XKTModel to an ArrayBuffer.