xeokit-sdk-v0.3.0-beta

Overview

This xeokit SDK v0.3.0 release contains a new plugin for rapidly loading models from an optimized binary format, plus various refinements and fixes as requested by users.

• Load Models Efficiently using XKTLoaderPlugin
• Animated Transitions Between Camera Projections
• Create Annotations using pre-existing DOM Elements
• Ray Picking
• BCFViewpointPlugin Enhancements
• Customizable Loading Spinner
• Option to use External Canvas for NavCube

Load Models Efficiently using XKTLoaderPlugin

Use the XKTLoaderPlugin to efficiently load models from xeokit's optimized binary .xkt format.

Use the xeokit-gltf-to-xkt tool to convert your glTF files to .xkt format.

The XKTLoaderPlugin and the converter tool are based on prototypes by Toni Marti at uniZite - see the original discussion here.

• Run example
• Read API docs
• Read Wiki page

import {Viewer} from "../src/viewer/Viewer.js";
import {XKTLoaderPlugin} from "../src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js";

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

const xktLoader = new XKTLoaderPlugin(viewer);

const model = xktLoader.load({ 
   id: "myModel",
   src: "./models/xkt/OTCConferenceCenter/OTCConferenceCenter.xkt",
   metaModelSrc: "./metaModels/OTCConferenceCenter/metaModel.json"
});

Animated Transitions Between Camera Projections

CameraFlightAnimation can now smoothly transition between orthographic and perspective projections.

• Run example
• Read API docs

// Transition to orthographic projection over one second
viewer.cameraFlight.flyTo({ projection: 'ortho', duration: 1.0  })

// Transition back to perspective projection
viewer.cameraFlight.flyTo({ projection: 'ortho', duration: 1.0  })

// Fly Camera to a position, while transitioning to orthographic projection:
viewer.cameraFlight.flyTo({ 
   eye: [-100,20,2],
   look: [0,0,-40],
   up: [0,1,0],
   projection: "ortho", () => {
     // Done
});

Create Annotations using pre-existing DOM Elements

AnnotationsPlugin now gives us the option to supply our own pre-existing HTML elements for the pin and label of each annotation we create.

• Run example
• Read API docs

If we have preexisting DOM elements for an Annotation marker and a label:

<div id="myAnnotation1Marker" ...>A1</div>
<div id="myAnnotation1Label" ...></div>

We can now create an Annotation using the elements:

myAnnotationsPlugin.createAnnotation({
       id: "myAnnotation1",
       //...
       markerElementId: "myAnnotation1Marker",
       labelElementId: "myAnnotation1Label"
});

Ray Picking

We can now pick entities and surface positions using an arbitrarily-positioned ray.

• Run example

var hit = viewer.scene.pick({
    pickSurface: true,  // This causes picking to find the intersection point on the entity
    origin: [0, 0, 0],      // Fire ray down -Z axis
    direction: [0, 0, -1] 
});

BCFViewpointPlugin Enhancements

BCFViewpointsPlugin now provides a workaround for a xeokit camera compatibility issue with BCF viewpoints, as described below.

xeokit's Camera#look is the current 3D point-of-interest (POI). A BCF viewpoint, however, has a direction vector instead of a POI, and so BCFViewpointsPlugin#getViewpoint saves xeokit's POI as a normalized vector from Camera#eye to Camera#look, which unfortunately loses that positional information. When we load the viewpoint again with BCFViewpointsPlugin#setViewpoint, we're unable to restore Camera#look to the position it had when saving the viewpoint.

BCFViewPointsPlugin now works around this issue as follows. As shown in the code snippet below, providing a rayCast option to setViewpoint will cause the method to set Camera#look to the closest ray/surface intersection found along the Camera's eye -> look vector.

Essentially, when loading a BCF viewpoint, this automatically sets the Camera's POI to the closest thing in front of it. Internally, this uses the new 3D Ray Picking capability mentioned in the previous section.

• Run save viewpoint example
• Run load viewpoint example
• Read API Docs

bcfViewpoints.setViewpoint(viewpoint, {
    rayCast: true // Attempt to set Camera#look to surface intersection point (default)
});

Customizable Loading Spinner

The loading Spinner previously had baked-in HTML and CSS to define its appearance.

This release adds the option to supply the HTML/CSS externally, as an ID of a DOM element provided externally.

• Run example

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

Option to use External Canvas for NavCube

This release adds the option to configure NavCubePlugin with an external container canvas, instead of always relying on it to create its own canvas.

• Run example
• Read API Docs

new NavCubePlugin(viewer, {
    canvasId: "myNavCubeCanvas"
});