Importing Models

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

See also:

• Scene Graphs - details on scene graphs
• Scene Metadata - classifying scene content with metadata
• High Detail Models - high-performance model representations
• Viewer Plugins - list of available viewer plugins

Contents

• Example
• Finding Models and Objects by ID
• Destroying a model

Example

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 Entitys 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"];

Destroying a model

To destroy a model, just destroy its Entity:

carModel.destroy();