Importing Models

xeokit-sdk comes with plugins for loading models from a variety of source formats.

A scene graph forms the backbone of xeokit's 3D engine. It consists of Nodes than can be composed into hierarchies, with Meshes at the leaves.

Each Node has it's own dynamic transformation and rendering attributes, which it applies recursively to the Nodes within its subtree.

A Node can represent a model, a 3D object, or just an anonymous grouping of child Nodes and Meshes.

Each of xeokit's model loader plugins creates a tree of Nodes in which the root Node represents the model.

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

const viewer = new Viewer({
    canvasId: "myCanvas"
});

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

const objModel = objLoader.load({ // Returns a Node
    id: "myModel",
    src: "./models/obj/sportsCar/sportsCar.obj",
    position: [-5, -1, 0]
})

const glTFModel = gltfLoader.load({
    id: "myModel2",
    src: "./models/gltf/schependomlaan/scene.gltf",
    metaModelSrc: "./metaModels/schependomlaan/metaModel.json",
    rotation: [0, 50, 0]
});

const sceneNode = new Node(viewer.scene, {
    scale: [.5, .5, .5], // Scale the whole scene down a bit
    children: [
        objModel,
        glTFModel
    ]
});