diff --git a/packages/sdk/src/basictypes/index.ts b/packages/sdk/src/basictypes/index.ts index 550780418..e752c325a 100644 --- a/packages/sdk/src/basictypes/index.ts +++ b/packages/sdk/src/basictypes/index.ts @@ -9,12 +9,20 @@ * * Use with {@link treeview | treeview} , to configure the appearance and behaviour of * {@link treeview!TreeView | TreeViews} for navigating basic element hierachies. * - * ## Installation + * # Installation * * ````bash * npm install @xeokit/sdk * ```` * + * # Usage + * + * ````javascript + * import {BasicEntity, BasicAggregation} from "@xeokit/sdk/basctypes"; + * + * //... + * ```` + * * @module basictypes */ diff --git a/packages/sdk/src/boundaries/index.ts b/packages/sdk/src/boundaries/index.ts index 9c1fbb2ae..649ae4c8f 100755 --- a/packages/sdk/src/boundaries/index.ts +++ b/packages/sdk/src/boundaries/index.ts @@ -16,18 +16,20 @@ * * Find center of positions * * FrustumProjection-boundary intersection tests * - * ## Installation + * # Installation * * ````bash * npm install @xeokit/sdk * ```` * - * ## Usage + * # Usage * * ````javascript - * import * as boundaries from "@xeokit/sdk/boundaries"; + * import {createAABB3} from "@xeokit/sdk/boundaries"; * - * //..TODO + * const aabb = createAABB([-100,-100,-100,100,100,100]); + * + * //... * ```` * * @module boundaries diff --git a/packages/sdk/src/cameracontrol/index.ts b/packages/sdk/src/cameracontrol/index.ts index b69492e91..cac0df6fe 100644 --- a/packages/sdk/src/cameracontrol/index.ts +++ b/packages/sdk/src/cameracontrol/index.ts @@ -3,12 +3,97 @@ * * # Mouse and touch controller for a Viewer's Camera * - * --- + * # Installation * - * ***TODO *** + * ````bash + * npm install @xeokit/sdk + * ```` * - * --- - * TODO + * # Usage + * + * In the example below, we will create a {@link viewer!Viewer | Viewer} with + * a {@link webglrenderer!WebGLRenderer | WebGLRenderer} and a {@link scene!Scene | Scene}, which holds model geometry and materials. + * + * We'll also create a {@link data!Data | Data}, which will hold semantic data for our model. + * + * On our Viewer, we will create a single {@link viewer!View | View} to render it to a canvas element on the page. We will + * also attach a {@link cameracontrol!CameraControl | CameraControl} to our View, allowing us to control its camera with mouse and touch input. + * + * Within the Scene, we will create a {@link scene!SceneModel | SceneModel} to hold model geometry and materials. Within Data, we will + * create a {@link data!DataModel | DataModel} to hold semantic IFC data, which includes IFC elements and property sets. + * + * We will then use + * {@link cityjson!loadCityJSON | loadCityJSON} to load a CityJSON file into our SceneModel and DataModel. + * + * The {@link core!SDKError | SDKError} class will be used to handle any errors that may occur during this process. + * + * ````javascript + * import {SDKError} 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 {loadCityJSON} from "@xeokit/sdk/cityjson"; + * + * const scene = new Scene(); + * const data = new Data(); + * + * const renderer = new WebGLRenderer({}); + * + * const viewer = new Viewer({ + * id: "myViewer", + * scene, + * renderer + * }); + * + * const view = viewer.createView({ + * id: "myView", + * elementId: "myCanvas" // << Ensure that this HTMLElement exists in the page + * }); + * + * 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 sceneModel = scene.createModel({ + * id: "myModel" + * }); + * + * const dataModel = data.createModel({ + * id: "myModel" + * }); + * + * fetch("model.json").then(response => { + * + * response.json().then(fileData => { + * + * loadCityJSON({ + * fileData, + * sceneModel, + * dataModel + * }).then(() => { + * + * sceneModel.build(); + * dataModel.build(); + * + * }).catch(err => { + * + * sceneModel.destroy(); + * dataModel.destroy(); + * + * console.error(`Error loading CityJSON: ${err}`); + * }); + * + * }).catch(err => { + * console.error(`Error creating JSON from fetch response: ${err}`); + * }); + * + * }).catch(err => { + * console.error(`Error fetching CityJSON file: ${err}`); + * }); + * ```` * * @module cameracontrol */ diff --git a/packages/sdk/src/cameraflight/index.ts b/packages/sdk/src/cameraflight/index.ts index dcf238f4a..53b6fe6bf 100644 --- a/packages/sdk/src/cameraflight/index.ts +++ b/packages/sdk/src/cameraflight/index.ts @@ -11,15 +11,97 @@ * *
* - * ## Installation + * # Installation * * ````bash * npm install @xeokit/sdk * ```` * - * ## Usage + * # Usage * - * TODO + * In the example below, we will create a {@link viewer!Viewer | Viewer} with + * a {@link webglrenderer!WebGLRenderer | WebGLRenderer} and a {@link scene!Scene | Scene}, which holds model geometry and materials. + * + * We'll also create a {@link data!Data | Data}, which will hold semantic data for our model. + * + * On our Viewer, we will create a single {@link viewer!View | View} to render it to a canvas element on the page. We will + * also attach a {@link cameracontrol!CameraControl | CameraControl} to our View, allowing us to control its camera with mouse and touch input. + * + * Within the Scene, we will create a {@link scene!SceneModel | SceneModel} to hold model geometry and materials. Within Data, we will + * create a {@link data!DataModel | DataModel} to hold semantic IFC data, which includes IFC elements and property sets. + * + * We will then use + * {@link cityjson!loadCityJSON | loadCityJSON} to load a CityJSON file into our SceneModel and DataModel. + * + * The {@link core!SDKError | SDKError} class will be used to handle any errors that may occur during this process. + * + * ````javascript + * import {SDKError} 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 {loadCityJSON} from "@xeokit/sdk/cityjson"; + * + * const scene = new Scene(); + * const data = new Data(); + * + * const renderer = new WebGLRenderer({}); + * + * const viewer = new Viewer({ + * id: "myViewer", + * scene, + * renderer + * }); + * + * const view = viewer.createView({ + * id: "myView", + * elementId: "myCanvas" // << Ensure that this HTMLElement exists in the page + * }); + * + * 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 sceneModel = scene.createModel({ + * id: "myModel" + * }); + * + * const dataModel = data.createModel({ + * id: "myModel" + * }); + * + * fetch("model.json").then(response => { + * + * response.json().then(fileData => { + * + * loadCityJSON({ + * fileData, + * sceneModel, + * dataModel + * }).then(() => { + * + * sceneModel.build(); + * dataModel.build(); + * + * }).catch(err => { + * + * sceneModel.destroy(); + * dataModel.destroy(); + * + * console.error(`Error loading CityJSON: ${err}`); + * }); + * + * }).catch(err => { + * console.error(`Error creating JSON from fetch response: ${err}`); + * }); + * + * }).catch(err => { + * console.error(`Error fetching CityJSON file: ${err}`); + * }); + * ```` * * @module cameraflight */ diff --git a/packages/sdk/src/cityjson/index.ts b/packages/sdk/src/cityjson/index.ts index 01acb7d64..2efa4d10b 100644 --- a/packages/sdk/src/cityjson/index.ts +++ b/packages/sdk/src/cityjson/index.ts @@ -5,7 +5,7 @@ * * --- * - * ### *Import 3D urban models from CityJSON format* + * ***Import 3D urban models from CityJSON format*** * * --- * @@ -23,6 +23,12 @@ * *
* + * # Installation + * + * ````bash + * npm install @xeokit/sdk + * ```` + * * ## Usage * * In the example below, we will create a {@link viewer!Viewer | Viewer} with diff --git a/packages/sdk/src/cityjsontypes_1_1_3/index.ts b/packages/sdk/src/cityjsontypes_1_1_3/index.ts index 46e4e5f2e..d681efc77 100644 --- a/packages/sdk/src/cityjsontypes_1_1_3/index.ts +++ b/packages/sdk/src/cityjsontypes_1_1_3/index.ts @@ -9,12 +9,20 @@ * * Use with {@link "treeview" | treeview} , to configure the appearance and behaviour of * {@link treeview!TreeView | TreeViews} for navigating CityJSON objects. * - * ## Installation + * # Installation * * ````bash * npm install @xeokit/sdk * ```` * + * # Usage + * + * ````javascript + * import {BasicEntity, BasicAggregation} from "@xeokit/sdk/basctypes"; + * + * //... + * ```` + * * @module cityjsontypes_1_1_3 */ diff --git a/packages/sdk/src/compression/index.ts b/packages/sdk/src/compression/index.ts index 130f63519..da0a67451 100644 --- a/packages/sdk/src/compression/index.ts +++ b/packages/sdk/src/compression/index.ts @@ -26,7 +26,7 @@ * and then use {@link scene!SceneModel.createGeometryCompressed | SceneModel.createGeometryCompressed} * to create the compressed geometry directly. * - * ### Compression Techniques Used + * # Compression Techniques * * * Simplifies geometry by combining duplicate positions and adjusting indices * * Generates edge indices for triangle meshes @@ -34,13 +34,13 @@ * * Converts positions to relative-to-center (RTC) coordinates * * Quantizes positions and UVs as 16-bit unsigned integers * - * ## Installation + * # Installation * * ````bash * npm install @xeokit/sdk * ```` * - * ## Usage + * # Usage * * In the example below, we'll use {@link scene!compressGeometryParams | compressGeometryParams} to compress * a {@link scene!SceneGeometryParams | SceneGeometryParams} into a diff --git a/packages/sdk/src/constants/index.ts b/packages/sdk/src/constants/index.ts index 6958b9bce..d424d7d58 100755 --- a/packages/sdk/src/constants/index.ts +++ b/packages/sdk/src/constants/index.ts @@ -10,6 +10,36 @@ * @module constants */ + + +/** + * + * + * # xeokit SDK Constant Definitions + * + * * Defines numeric constants for a basic set of entity and relationship types. + * * Use with {@link data | data} to assign basic types to {@link data!DataObject | DataObjects} + * and {@link data!Relationship | Relationships} and treat them as elements of a basic entity-relationship graph. + * * Use with {@link treeview | treeview} , to configure the appearance and behaviour of + * {@link treeview!TreeView | TreeViews} for navigating basic element hierachies. + * + * # Installation + * + * ````bash + * npm install @xeokit/sdk + * ```` + * + * # Usage + * + * ````javascript + * import {RepeatWrapping, ClampToEdgeWrapping} from "@xeokit/sdk/constants"; + * + * //... + * ```` + * + * @module constants + */ + /** * SceneTexture wrapping mode in which the texture repeats to infinity. */ diff --git a/packages/sdk/src/contextmenu/index.ts b/packages/sdk/src/contextmenu/index.ts index 2ab99b67f..5a250aad7 100644 --- a/packages/sdk/src/contextmenu/index.ts +++ b/packages/sdk/src/contextmenu/index.ts @@ -4,10 +4,6 @@ * * [](https://xeokit.github.io/xeokit-sdk/examples/index.html#ContextMenu_Canvas_TreeViewPlugin_Custom) * - * * [[Run this example](https://xeokit.github.io/xeokit-sdk/examples/index.html#ContextMenu_Canvas_TreeViewPlugin_Custom)] - * - * ## Overview - * * * A pure JavaScript, lightweight context menu * * Dynamically configure menu items * * Dynamically enable or disable items @@ -15,7 +11,13 @@ * * Supports cascading sub-menus * * Configure custom style with CSS (see examples above) * - * ## Usage + * # Installation + * + * ````bash + * npm install @xeokit/sdk + * ```` + * + * # Usage * * In the example below we'll create a ````ContextMenu```` that pops up whenever we right-click on an object within * our {@link Scene}. diff --git a/packages/sdk/src/core/index.ts b/packages/sdk/src/core/index.ts index 38f2897dd..d0a761c60 100644 --- a/packages/sdk/src/core/index.ts +++ b/packages/sdk/src/core/index.ts @@ -1,17 +1,25 @@ /** * * - * ## xeokit SDK Core Components + * # xeokit SDK Core Components * * * {@link core!Component | Component} base class * * Various interfaces that are implemented throughout the SDK. * - * ## Installation + * # Installation * * ````bash * npm install @xeokit/sdk * ```` * + * # Usage + * + * ````javascript + * import {Component, SDKError} from "@xeokit/sdk/core"; + * + * //... + * ```` + * * @module core */ diff --git a/packages/sdk/src/curves/index.ts b/packages/sdk/src/curves/index.ts index a8c7cfce5..460123302 100755 --- a/packages/sdk/src/curves/index.ts +++ b/packages/sdk/src/curves/index.ts @@ -1,22 +1,26 @@ /** - * # xeokit Curves Math Library + * + * + * # Spline curve math functions * * --- * - * ### *Spline curve math functions* + * ***Spline curve math functions*** * * --- * - * ## Installation + * # Installation * * ````bash * npm install @xeokit/sdk * ```` * + * # Usage + * * ````javascript - * import * as curves from "@xeokit/curves"; + * import {tangentQuadraticBézier, tangentQuadraticBézier3} from "@xeokit/sdk/curves"; * - * //.. + * //... * ```` * * @module curves diff --git a/packages/sdk/src/data/index.ts b/packages/sdk/src/data/index.ts index 156c091d5..fdd3db0de 100755 --- a/packages/sdk/src/data/index.ts +++ b/packages/sdk/src/data/index.ts @@ -42,6 +42,12 @@ * *
* + * # Installation + * + * ````bash + * npm install @xeokit/sdk + * ```` + * * # Usage * * ## Creating a DataModel from JSON