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 scene graph, which is hierarchy of Nodes in which Meshes are the drawable elements at the leaves.

When we use one of xeokit's Viewer plugins to load a model, we create a sub-graph of Nodes and Meshes that represents the model.

• See Scene Graphs for generic info on scene graphs.
• See Scene Metadata for classifying scene content with metadata.
• See Viewer Plugins for plugins to load various models formats.

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 use a Node to contain them in a simple scene graph, scaled down a bit, and we'll add a Mesh to represent the green ground plane.

The ground plane Mesh 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);

 new Node(viewer.scene, {

     scale: [.5, .5, .5], // Scale the whole scene down a bit

     children: [

         // Car

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

         // House

         gltfLoader.load({
             id: "myModel2",
             src: "./models/gltf/schependomlaan/scene.gltf",
             rotation: [0, 50, 0],
             edges: true
         }),

         // Ground plane

         new Mesh(viewer.scene, {
             geometry: buildPlaneGeometry(ReadableGeometry, viewer.scene, {
                 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
         })
     ]
 });