Camera Animation for Views

This module provides functionality to animate a Camera to look at specified targets.

Features:

• Controls the Camera within a View.
• Moves the Camera to focus on a ViewObject or a specific boundary.
• Supports navigation to explicit coordinates using eye, look, and up vectors.
• Allows instant (jump) or smooth (fly) transitions.
• Enables seamless switching between different projection types.

Installation

npm install @xeokit/sdk
Copy

Usage

The following example demonstrates how to:

• Set up a Viewer with a WebGLRenderer and a Scene.
• Attach a CameraControl for user interaction.
• Load and render a CityJSON model using cityjson!CityJSONLoader | CityJSONLoader.

import { SDKInternalException } from "@xeokit/sdk/core";
import { Scene } from "@xeokit/sdk/scene";
import { WebGLRenderer } from "@xeokit/sdk/webglrenderer";
import { Viewer } from "@xeokit/sdk/viewer";
import { CameraControl } from "@xeokit/sdk/cameracontrol";
import { CityJSONLoader } from "@xeokit/sdk/formats/cityjson";

const scene = new Scene();
const data = new Data();

const viewer = new Viewer({
  scene
});

const renderer = new WebGLRenderer({
  viewer
});

const viewResult = viewer.createView({
  id: "myView",
  elementId: "myCanvas" // Ensure this HTMLElement exists on the page
});

const view = viewResult.value;

// Set the initial camera position
view.camera.eye = [1841982.93, 10.03, -5173286.74];
view.camera.look = [1842009.49, 9.68, -5173295.85];
view.camera.up = [0.0, 1.0, 0.0];

new CameraControl(view, {});

const sceneModelResult = scene.createModel({ id: "myModel" });
const sceneModel = sceneModelResult.value;

const dataModelResult = data.createModel({ id: "myModel" });
const dataModel = dataModelResult.value;

const cityJSONLoader = new CityJSONLoader();

fetch("model.json").then(response => {
    response.json().then(fileData => {
        cityJSONLoader.load({
            fileData,
            sceneModel,
            dataModel
        }).then(() => {
            // Loaded
        }).catch(err => {
            sceneModel.destroy();
            dataModel.destroy();
            console.error(`Error loading CityJSON: ${err}`);
        });
    }).catch(err => {
        console.error(`Error parsing JSON from fetch response: ${err}`);
    });
}).catch(err => {
    console.error(`Error fetching CityJSON file: ${err}`);
});
Copy