Importing Models

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

xeokit represents a 3D scene as a hierarchy of Nodes, in which Meshes are the drawable elements at the leaves.

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

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

Click the image below for a live demo.

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
    ]
});