Importing Models

xeolabs edited this page Feb 4, 2019 · 28 revisions

See also:


xeokit-sdk can load multiple models from a variety of source formats into the same 3D scene.

Source formats (so far) include glTF, OBJ, STL, 3DXML and BIMServer. Regardless of where models were loaded from, xeokit exposes their objects via an abstract interface through which we can access them uniformly.

In this tutorial, you'll load two models from different formats into the same scene, then update rendering states on a couple of their objects.



In the example below, we'll use a GLTFLoaderPlugin to load the Schependomlaan house model and a OBJLoaderPlugin to load a model of a car.

We'll also add a Mesh to represent the green ground plane, which gets a plane-shaped Geometry created by a buildPlaneGeometry builder function.

Click the image below for a live demo.

import {Viewer} from "../src/viewer/Viewer.js";
import {Node} from "../src/scene/nodes/Node.js";
import {OBJLoaderPlugin} from "../src/viewer/plugins/OBJLoaderPlugin/OBJLoaderPlugin.js";
import {GLTFLoaderPlugin} from "../src/viewer/plugins/GLTFLoaderPlugin/GLTFLoaderPlugin.js";
import {Mesh} from "../src/scene/mesh/Mesh.js";
import {buildPlaneGeometry} from "../src/scene/geometry/builders/buildPlaneGeometry.js";
import {ReadableGeometry} from "../src/scene/geometry/ReadableGeometry.js";
import {PhongMaterial} from "../src/scene/materials/PhongMaterial.js";

const viewer = new Viewer({
    canvasId: "myCanvas"

const objLoader = new OBJLoaderPlugin(viewer);
const gltfLoader = new GLTFLoaderPlugin(viewer);

// Car

const car = objLoader.load({
    id: "myCarModel",
    src: "./models/obj/sportsCar/sportsCar.obj",
    position: [-5, -1, 0],

// House

const house = gltfLoader.load({
    id: "myHouseModel",
    src: "./models/gltf/schependomlaan/scene.gltf",
    rotation: [0, 50, 0],
    edges: true

// Ground plane

const ground =  new Mesh(viewer.scene, {
    id: "myGroundPlane",
    geometry: new ReadableGeometry(viewer.scene, buildPlaneGeometry({
        xSize: 500,
        zSize: 500
    material: new PhongMaterial(viewer.scene, {
        diffuse: [0.4, 1.0, 0.4],
        backfaces: true
    position: [0, -1.0, 0],
    pickable: false,
    collidable: false

Finding Models and Objects by ID

GLTFLoaderPlugin and OBJLoaderPlugin each created Entities within the Viewer's Scene to represent the models and their objects.

Each model is loaded with isModel:true so is represented by an Entity registered in viewer.scene.models, while each model object is represented by an Entity registered in viewer.scene.objects.

We can then find the model and object Entities like this:

const carModel = viewer.scene.models["myCarModel"];
const houseModel = viewer.scene.models["myHouseModel"];

const carWheelObject = viewer.scene.objects["3yjlObltnCpO3ehdiY7mcZ"];
const houseWindowObject = viewer.scene.objects["3yjlObltnCpO3ehdiY7mcZ"];

Just to get a taste of what we can do with our objects, let's hide the car wheel and highlight the window:

carWheelObject.visible = false;
houseWindowObject.highlighted = false;

Let's get the 3D boundary of the window:

const aabb = houseWindowObject.aabb; // [xmin,ymin,zmin,xmax,ymax,zmax]

Let's fly the camera to look at the window:


Destroying a model

To destroy a model, just destroy its Entity:

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.