Importing Models

See also:

• Scene Graphs - details on scene graphs and metadata
• High Performance Model Representation - high performance scene representation for huge models
• Viewer Plugins - list of available viewer plugins

Introduction

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

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

Destroying a model

To destroy a model, just destroy its Entity:

carModel.destroy();