Skip to content

Importing Models

Jump to bottom
xeolabs edited this page May 27, 2019 · 32 revisions

See also:

Introduction

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.

Contents

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/viewer/scene/nodes/Node.js";
import {OBJLoaderPlugin} from "../src/plugins/OBJLoaderPlugin/OBJLoaderPlugin.js";
import {GLTFLoaderPlugin} from "../src/plugins/GLTFLoaderPlugin/GLTFLoaderPlugin.js";
import {Mesh} from "../src/viewer/scene/mesh/Mesh.js";
import {buildPlaneGeometry} from "../src/viewer/scene/geometry/builders/buildPlaneGeometry.js";
import {ReadableGeometry} from "../src/viewer/scene/geometry/ReadableGeometry.js";
import {PhongMaterial} from "../src/viewer/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 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 = true;

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:

viewer.cameraFlight.flyTo(window);

Destroying a model

To destroy a model, just destroy its Entity:

carModel.destroy();
Clone this wiki locally