Ability to dynamically position & rotate SceneModel anywhere within World coordinate system

[xeolabs]

Interactive model translation and rotation

Useful for interactively/automatically aligning point clouds and architectural models

This PR adds the ability to dynamically move and rotate models anywhere within the extents of xeokit's double-precision coordinate system.

Previously, we could only move a model a short distance, before it showed rounding errors (render jitter).

The snippet below shows what's possible after this PR. In this snippet, we load a model, which happens to be more-or-less centered at [0,0,0]. Once loaded, we then rotate the model 90° about its X-axis and translate it to a very far distance, [1000000000.0, 0, 0], away from the origin of the viewer's World space coordinate system.

Translation and rotation is cheap to do, and can be done at the full speed of the viewer's renderer. This means that we could interactively control translation and rotation from mouse/touch input, to enable users to manually align models, such as point clouds with architectural models.

import {Viewer, XKTLoaderPlugin} from "../../dist/xeokit-sdk.min.es.js";

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

const xktLoader = new XKTLoaderPlugin(viewer);

const sceneModel = xktLoader.load({
    id: "myModel",
    src: "Schependomlaan.ifc.xkt"
});

sceneModel.on("loaded", ()=>{

   sceneModel.position = [1000000000.0, 0, 0];
   sceneModel.rotation = [0, 90, 0];

   viewer.cameraFlight.jumpTo(sceneModel);
});

The screen capture below shows another simple example, in which we're animating the translation and rotation of a simple programmatically-generated model. The model is translated from [1000000000, 0, 0] to [1000000100, 0, 0]`, while tumbling about its Y and Z axis. This model is made up of four "table" objects, each in its own RTC tile. The coordinates of each table are relative to the center (RTC) of its tile. This demo shows how translation and rotation continues to preserve the tiled coordinate system used by the four tables in the model.

Screencast.from.15.09.2023.00.54.48.webm

The animation loop to update the SceneModel position and rotation properties looks like this:

 const position = [1000000000, 0, 0];
    const rotation = [0, 0, 0];

    const next = () => {
        requestAnimationFrame(() => {

            sceneModel.position = position;
            sceneModel.rotation = rotation;

            position[0] += 1.1;

            rotation[1] += 0.1;
            rotation[2] += 0.4;

            if (position[0] < 1000000100) {
                next();
            }
        });
    }

    next();

[ghost]

👇 Click on the image for a new way to code review

Legend